#讀書筆記# 視界·無(wú)界2.0：寫給UI設(shè)計(jì)師的設(shè)計(jì)書

用戶體驗(yàn)不僅是視覺(jué)上的，從開(kāi)始看到，到用手觸碰凑兰，再到大腦的思考，最后是心里的感受等边锁，這一系列的過(guò)程才是用戶體驗(yàn)

有規(guī)則的設(shè)計(jì)

1姑食、思考的問(wèn)題（以一個(gè)播放器為例）

按鈕的大小如何控制？

顏色是否要和播放條區(qū)別開(kāi)來(lái)茅坛？

播放按鈕和下一頁(yè)按鈕哪個(gè)操作更頻繁音半？

使用頻率不同是否要有比例和顏色的區(qū)分？

進(jìn)度條是什么顏色贡蓖？

播放的時(shí)候是什么顏色曹鸠？

靜止的時(shí)候是什么顏色？

顯示剩余時(shí)間還是整片時(shí)間斥铺，抑或是播放的時(shí)間彻桃？

大小該如何控制？

是否需要收藏按鈕晾蜘？

網(wǎng)絡(luò)加載時(shí)應(yīng)該怎么設(shè)計(jì)邻眷？

是否需要調(diào)用播放列表？

是否需要全屏按鈕剔交？

全屏后如何退出肆饶？

2、按鈕

以APP界面設(shè)計(jì)為例岖常，一個(gè)按鈕最合適的高度是96px

按鈕邊角風(fēng)格：圓角應(yīng)該控制在最小長(zhǎng)度（注意：最小長(zhǎng)度就是高度或者寬度哪個(gè)最小按照哪個(gè)計(jì)算）的1/10驯镊，比如高度是96px，那么圓角半徑不能大于其1/10，即10px阿宅。如果列出一個(gè)公式：最小寬高像素×10%?=?1/10最小高寬像素?≈?四舍五入偶數(shù)

3候衍、文字

中文行間距應(yīng)該是1.5倍，英文行間距是1.2倍

我們還要考慮的就是閱讀距離洒放。通常人眼與手機(jī)的距離是40cm～60cm蛉鹿，而且需要把實(shí)際閱讀操作的環(huán)境也考慮進(jìn)去，所以才會(huì)出現(xiàn)不同的行間距往湿。如果所設(shè)計(jì)的界面針對(duì)的用戶傾向于有閱讀障礙或者文字量巨大的產(chǎn)品妖异，可以適當(dāng)?shù)貙⑿虚g距調(diào)整到1.5倍。

4领追、圖標(biāo)

5他膳、顏色

主、次绒窑、輔三色可以嘗試7:2:1這樣的比例區(qū)分棕孙，比如70%的白色、20%的藍(lán)色些膨、10%的黑色蟀俊，這樣的色彩搭配比例會(huì)讓界面信息層級(jí)更加準(zhǔn)確，便于用戶閱讀

6订雾、投影大小

投影大小=?投影距離x?N

如果設(shè)定某一個(gè)元素的投影“距離”等于12肢预，那么它的模糊范圍即“大小”就是24,?N設(shè)定為2,?“不透明度”設(shè)定為40%，這樣的投影效果是比較令人舒服的洼哎，哪怕在具有色彩的環(huán)境下烫映，40%的不透

有目的的設(shè)計(jì)

視覺(jué)設(shè)計(jì)：要充分考慮場(chǎng)景，比如設(shè)計(jì)易拉寶二維碼掃描噩峦，考慮到人的平均身高锭沟，將二維碼放在適合掃描的高度，即便影響美觀度识补，但是需首先考慮合適性

聽(tīng)覺(jué)設(shè)計(jì)：設(shè)計(jì)一些操作的同時(shí)加入聲效

觸覺(jué)設(shè)計(jì)：考慮場(chǎng)景冈钦，比如冬天太冷戴著手套，還有車載等特殊場(chǎng)景李请，通過(guò)充分考慮場(chǎng)景來(lái)做設(shè)計(jì)

好的工作習(xí)慣

1、提案的簡(jiǎn)單模板

【1p】封面+項(xiàng)目名稱

【2P】設(shè)計(jì)理念厉熟，比如靈感從哪些圖片导盅、設(shè)計(jì)、照片而來(lái)

【2P】查找競(jìng)品揍瑟，跟自己產(chǎn)品類似的LOGO并且分析闡述優(yōu)白翻、劣勢(shì)

【1P】最終自己設(shè)計(jì)的完稿

【2P】黑白、彩色漸變、圖片滤馍、環(huán)境LOGO實(shí)現(xiàn)效果

【1P】設(shè)備展示

【1P】色彩規(guī)范

【1P】黃金比例岛琼、間距規(guī)范、大小規(guī)范設(shè)定

【1P】手繪草稿

【2P】還有不同設(shè)計(jì)方案的反思巢株，和被自己拋棄方案的自我批評(píng)

【3P】現(xiàn)實(shí)應(yīng)用效果槐瑞，比如網(wǎng)站、啟動(dòng)圖標(biāo)阁苞、公司門口困檩、快遞或者信封、工牌等

【1P】將動(dòng)態(tài)設(shè)計(jì)存儲(chǔ)為GIF圖或者以AVI格式進(jìn)行展示

【1P】封底+感謝觀看

2那槽、項(xiàng)目清晰的文件管理

一級(jí)文件夾：創(chuàng)建日期和項(xiàng)目名稱悼沿，便于日后知道起始日期，方便搜索查找骚灸。

二級(jí)文件夾：創(chuàng)建交互原型糟趾、組件庫(kù)、競(jìng)品素材甚牲、源文件义郑、成果展示、輸出切圖鳖藕。

沸水效應(yīng)

你作完成一件事情時(shí)魔慷，就處在沸水的狀態(tài)，熱情飽滿著恩，情緒高漲院尔，是不能接受外界任何“冷卻”（冷靜客觀的評(píng)價(jià)）的，這個(gè)時(shí)候往往不要做決定喉誊，而是應(yīng)該過(guò)一段時(shí)間再做決定

懶人思維

·接到案子邀摆。

·搜集別人設(shè)計(jì)好的相同類型的作品

·針對(duì)每一個(gè)設(shè)計(jì)作品分析3～5分鐘

·分析10個(gè)左右原作草稿，包括設(shè)計(jì)目的伍茄、拆分構(gòu)圖栋盹、色彩風(fēng)格

·換不同類型的創(chuàng)作來(lái)完善前面的碎片思考（如攝影、裝修敷矫、制作CG原畫例获、看電影、玩游戲等）

·將碎片思維重構(gòu)成完整的內(nèi)容或草圖

·對(duì)照自己的構(gòu)思曹仗、草圖來(lái)完成作品的創(chuàng)作榨汤。

?第一，瀏覽同類作品怎茫，作為埋在心里最底層的一顆種子收壕，瀏覽時(shí)要在草稿畫草圖，或者記憶配色，無(wú)須精確蜜宪，只需大概虫埂。

第二，揣測(cè)并分析亮點(diǎn)圃验，思考某個(gè)細(xì)節(jié)為何這么設(shè)計(jì)掉伏，并記錄下來(lái)。

第三损谦，瀏覽其他類型的創(chuàng)作岖免，不要詳細(xì)思考，要大量查閱照捡，像雨水般去滋養(yǎng)你之前的種子颅湘。

第四，再次羅列對(duì)比草圖栗精，將想法精細(xì)地繪制出來(lái)闯参，不要擔(dān)心手繪問(wèn)題，自己看得懂即可悲立。

第五鹿寨，拿走參考作品，對(duì)照草圖開(kāi)始設(shè)計(jì)薪夕。