#讀書筆記# 視界·無界2.0:寫給UI設計師的設計書

用戶體驗不僅是視覺上的,從開始看到,到用手觸碰,再到大腦的思考,最后是心里的感受等,這一系列的過程才是用戶體驗

有規(guī)則的設計

1、思考的問題(以一個播放器為例)

按鈕的大小如何控制?

顏色是否要和播放條區(qū)別開來?

播放按鈕和下一頁按鈕哪個操作更頻繁?

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

進度條是什么顏色?

播放的時候是什么顏色?

靜止的時候是什么顏色?

顯示剩余時間還是整片時間,抑或是播放的時間?

大小該如何控制?

是否需要收藏按鈕?

網絡加載時應該怎么設計?

是否需要調用播放列表?

是否需要全屏按鈕?

全屏后如何退出?

2、按鈕

以APP界面設計為例,一個按鈕最合適的高度是96px

按鈕邊角風格:圓角應該控制在最小長度(注意:最小長度就是高度或者寬度哪個最小按照哪個計算)的1/10,比如高度是96px,那么圓角半徑不能大于其1/10,即10px。如果列出一個公式:最小寬高像素×10%?=?1/10最小高寬像素?≈?四舍五入偶數(shù)

3、文字

中文行間距應該是1.5倍,英文行間距是1.2倍

我們還要考慮的就是閱讀距離。通常人眼與手機的距離是40cm~60cm,而且需要把實際閱讀操作的環(huán)境也考慮進去,所以才會出現(xiàn)不同的行間距。如果所設計的界面針對的用戶傾向于有閱讀障礙或者文字量巨大的產品,可以適當?shù)貙⑿虚g距調整到1.5倍。

4、圖標



5、顏色

主、次、輔三色可以嘗試7:2:1這樣的比例區(qū)分,比如70%的白色、20%的藍色、10%的黑色,這樣的色彩搭配比例會讓界面信息層級更加準確,便于用戶閱讀

6、投影大小

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

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

有目的的設計

視覺設計:要充分考慮場景,比如設計易拉寶二維碼掃描,考慮到人的平均身高,將二維碼放在適合掃描的高度,即便影響美觀度,但是需首先考慮合適性

聽覺設計:設計一些操作的同時加入聲效

觸覺設計:考慮場景,比如冬天太冷戴著手套,還有車載等特殊場景,通過充分考慮場景來做設計

好的工作習慣

1、提案的簡單模板

【1p】封面+項目名稱

【2P】設計理念,比如靈感從哪些圖片、設計、照片而來

【2P】查找競品,跟自己產品類似的LOGO并且分析闡述優(yōu)、劣勢

【1P】最終自己設計的完稿

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

【1P】設備展示

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

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

【1P】手繪草稿

【2P】還有不同設計方案的反思,和被自己拋棄方案的自我批評

【3P】現(xiàn)實應用效果,比如網站、啟動圖標、公司門口、快遞或者信封、工牌等

【1P】將動態(tài)設計存儲為GIF圖或者以AVI格式進行展示

【1P】封底+感謝觀看

2、項目清晰的文件管理

一級文件夾:創(chuàng)建日期和項目名稱,便于日后知道起始日期,方便搜索查找。

二級文件夾:創(chuàng)建交互原型、組件庫、競品素材、源文件、成果展示、輸出切圖。

沸水效應

你作完成一件事情時,就處在沸水的狀態(tài),熱情飽滿,情緒高漲,是不能接受外界任何“冷卻”(冷靜客觀的評價)的,這個時候往往不要做決定,而是應該過一段時間再做決定

懶人思維

·接到案子。

·搜集別人設計好的相同類型的作品

·針對每一個設計作品分析3~5分鐘

·分析10個左右原作草稿,包括設計目的、拆分構圖、色彩風格

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

·將碎片思維重構成完整的內容或草圖

·對照自己的構思、草圖來完成作品的創(chuàng)作。

?第一,瀏覽同類作品,作為埋在心里最底層的一顆種子,瀏覽時要在草稿畫草圖,或者記憶配色,無須精確,只需大概。

第二,揣測并分析亮點,思考某個細節(jié)為何這么設計,并記錄下來。

第三,瀏覽其他類型的創(chuàng)作,不要詳細思考,要大量查閱,像雨水般去滋養(yǎng)你之前的種子。

第四,再次羅列對比草圖,將想法精細地繪制出來,不要擔心手繪問題,自己看得懂即可。

第五,拿走參考作品,對照草圖開始設計。

相關網站

騰訊CDC:cdc.tencent.com

騰訊ISUX:isux.tencent.com

阿里UED:www.aliued.com

阿里U一點:www.aliued.cn

百度UXC:ued.baidu.com

360?UXC:uxc.#

網易UEDC:uedc.163.com

京東JDC:jdc.jd.com

新浪UED:ued.sina.com

Facebook:facebook.design

Google:design.google

Apple:developer.apple.com/design

Airbnb:airbnb.desig

easings.net/zh-cn(動效描述,緩動函數(shù)速查表)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內容