UI知識(shí)，論新手如何單獨(dú)完成一款A(yù)PP的設(shè)計(jì)(4)

這是公司現(xiàn)在準(zhǔn)備推的優(yōu)品商城APP版。

市面上的商城APP，例如天貓、京東、亞馬遜、唯品會(huì)等等都已經(jīng)養(yǎng)成了一定的用戶習(xí)慣，所以在一開始設(shè)計(jì)APP的時(shí)候，被要求既不能大幅度打破這些人們熟知的用戶習(xí)慣，又要做出自己的特色，這是這次設(shè)計(jì)的難點(diǎn)所在。

而公司特色就是分銷返利系統(tǒng)，那就緊抓這個(gè)核心猛艸就對(duì)了。

第一次做APP，完全是兩眼一抹黑啊，也沒人教T.T

那既然人傻，就多看別人的唄，把前戲做足了！

從《iOS 8人機(jī)界面指南：UI元素與設(shè)計(jì)尺寸》、《IOS ui設(shè)計(jì)常用尺寸及基本知識(shí)》、《ios8 設(shè)計(jì)快速參考指南》等等設(shè)計(jì)規(guī)范，到天貓、京東、蘇寧、唯品會(huì)、亞馬遜、掌上管家等等APP，再到Flyme4的設(shè)計(jì)、ios9的設(shè)計(jì)，網(wǎng)上的優(yōu)秀設(shè)計(jì)，甚至是一個(gè)WIN10界面窗口旁的一圈描邊也能給予我極大的聯(lián)想創(chuàng)意。

前戲時(shí)間越多，后面發(fā)力起來越帶勁（個(gè)人感受~）

可能有一些同學(xué)對(duì)“抄”這個(gè)詞比較忌諱，感覺就是要做自己的東西。

這個(gè)我覺得還是要按照具體需求來，如果是極具個(gè)人特色的APP，的確應(yīng)該如此。但是這種比較大眾化的APP，還是隨著大眾來會(huì)比較好。況且精細(xì)地去解讀學(xué)習(xí)人家的優(yōu)秀設(shè)計(jì)，才能知道自己的不足所在。

ICON很重要！

（真的很重要，再說一遍�。�

如果說布局是一個(gè)人內(nèi)在，那ICON就是那巨大的歐派！

70年代的名人祖爾金的名言“我最厲害”，套用在ICON身上最合適不過了。

不過畫ICON的確是一件很折磨人的事。

贊美扁平化，讓這一工作變得沒有那么繁瑣。

前期就是多試試，保存下每一次不滿，說不定會(huì)突然發(fā)現(xiàn)“我了個(gè)艸，這個(gè)不錯(cuò)”，然后抓住這個(gè)特點(diǎn)，猛艸就好了。

這里推薦使用最新的PS CC2015版本，畫板功能在做多頁面的時(shí)候很贊，不容易偏離主體風(fēng)格。不過對(duì)電腦要求比較高，我的小筆記本跑的要死要活的。

其實(shí)做不同頁面最簡單的做法還是死抓一個(gè)要素，可以是一種顏色或多種搭配的顏色，或是框體風(fēng)格，甚至可以是你之前畫的ICON風(fēng)格等等。只要讓人一看有統(tǒng)一感即可~

這次制作周期較長，準(zhǔn)備工作做得比較足，最終效果還是可以接受的。

不滿之處當(dāng)然有很多，比如部分ICON畫的整體性不足，沒有制作動(dòng)效等等，但畢竟是自家的孩子，而且還是大寶貝，我個(gè)人還是很喜歡的~

也歡迎大家多說說壞話。老家有一種習(xí)俗，對(duì)著別人家的孩子說鄙俗之語，孩子長大了反而會(huì)反著來。做設(shè)計(jì)不也是這樣嘛？

最后跟大家一起探討一個(gè)標(biāo)線的問題

因?yàn)榘踩�框，所以我們畫的圖標(biāo)肯定要小于真正的尺寸，如圖中的紅色I(xiàn)CON。而外圍灰色部分則是他的真正大小。

但是在標(biāo)尺寸的時(shí)候，我見過一些人的做法是就是上圖的藍(lán)線，直接拉到ICON身上。這樣做就是方便。

而我認(rèn)為應(yīng)該像最正確的做法應(yīng)該是綠線，但這無疑加大很多工作量，因?yàn)镮CON外圍是透明的，在PS中不顯示，需要額外再畫出真實(shí)框體。

跟公司的程序員討論，他一開始是讓我標(biāo)藍(lán)線那種，我跟他討論有以后，又覺得綠線更合理。。。有點(diǎn)不大靠譜

大家是怎么看這個(gè)問題的呢？