最近閱讀《0基礎學UI》這本書總結了一些讀書心得。分享給有需要的小伙伴。
UI設計原則:
1、清晰:? 內容才是一個產品的核心。除去繁冗的裝飾,突出重點。
2、一致性: 用戶通過一致的視覺語言得到相同的認知和內部系統統一的使用體驗。
3、及時反饋: 隨時讓用戶知道自己做了什么。自己的操作引起了什么后果。
4、直接操作:讓用戶更加集中注意力完成任務,同時更容易理解這些行為產生的后果。
5、美觀:美的事物會讓人產生愉悅感,UI設計中應時刻注意美觀度。
一、清晰
? ? ? 繁雜的幾面, 不但會干擾用戶視線, 也會讓用戶查找內容困難產生視覺疲勞。除去繁冗的裝飾,突出內容。同時保證app內部的可交互性。
1、表格內字體太小、顏色過于繁雜、圖標輪廓不清晰,除了影響客戶的瀏覽外,還容易造成誤操作。
2、內容展示是否清晰,重要的操作擺放的位置是否便與客戶操作。
3、層級之間的路徑是否被用戶感知。
二、一致性
? ? ? ? 用戶通過一致的視覺語言得到相同的認知和內部系統統一的使用體驗。讓用戶對app有熟悉感,降低使用成本。
1、優秀的UI,其結構應該清晰明朗,布局一致,色調一致,視覺風格統一、控件尺寸統一。
2、ios標準一致,是否使用了系統提供的控件、視圖和圖標。
3、是否按照用戶所預期的方式整合了設備特性,文案是否一致措辭與風格。
4、同樣的圖標是否表意相同,在不同的位置執行操作是否使用同樣的反饋,是否符合用戶預期。
三、及時反饋
? ? ? ? 長時間的空白狀態或者響應慢,會使得用戶離開應用。 隨時讓用戶知道自己做了什么。自己的操作引起了什么后果。
1、反饋包括視覺反饋(動效)、觸覺反饋(震動)、聽覺反饋(聲音)。每一種反饋方式都不能單獨存在,需要相互協同。才能達到最好的效果。
2、精致的動效會給人帶來有意義的反饋,幫助應用闡明行為。同時pp更有深度,讓用戶使用時產生驚喜,方便了解功能。浮動窗口從下層升起,點擊關閉時向下收回。這? ? ? 樣有利于用戶感知到它的層級關系。
3、保證視覺與觸覺同步。讓使用及時得到反饋。聽覺與觸覺反饋需要開發者自行同步。
4、盡量避免警告反饋,要讓用戶覺得自己的體驗被打斷是值得的。盡量讓用戶對警告作出相應的反饋。
5、保證用戶的決策權。可以為用戶提出建議或警告,但是不能為用戶做出決定。避免? ? ? ? ? 讓用戶在不必要的結果之間,做出平衡。
四、直接操作
? ? ? ? 用戶在屏幕上直接操作對象,能讓它們更加集中注意力完成任務,同時也更容易理解這些行為產生的后果。
1、? 3D touch,最新的直接操控手勢。使用時盡量讓3D touch的觸發與程序內部的操作相融合。同時注意不可以在peek里設置按鈕。
2、標準手勢包括:點擊,拖拽,輕掃,滑動,雙擊,捏,觸控屏按住,搖。作為一般? ? ? ? ? 規則,使用常用手勢。減少學習成本。
五、美觀
? ? ? ? UI設計是對圖形用戶界面的美術設計,是對設計師的基本訴求。美的東西會讓人產生愉悅感,在UI這設計中應時刻注意美觀度的加強。
1、檢查顏色搭配是否和諧,圖標是否清晰精致,設計語言是否一致。
2、布局是否一致,結構布局是否清晰,視圖尺寸是否舒適,整體視覺規范是否統一。
3、界面質感是否到位,設計風格是否符合用戶定位。
本人是個UI新手,第一次發文,喜歡的小伙伴可以持續關注,希望跟你們一起成長。
本文多數資料來源于《0基礎學UI》作者田海。有興趣的小伙伴可以看一下。