最近閱讀《0基礎(chǔ)學UI》這本書總結(jié)了一些讀書心得。分享給有需要的小伙伴。

UI設(shè)計原則：

1、清晰：? 內(nèi)容才是一個產(chǎn)品的核心。除去繁冗的裝飾，突出重點。

2、一致性： 用戶通過一致的視覺語言得到相同的認知和內(nèi)部系統(tǒng)統(tǒng)一的使用體驗。

3、及時反饋： 隨時讓用戶知道自己做了什么。自己的操作引起了什么后果。

4、直接操作：讓用戶更加集中注意力完成任務(wù)，同時更容易理解這些行為產(chǎn)生的后果。

5、美觀：美的事物會讓人產(chǎn)生愉悅感，UI設(shè)計中應(yīng)時刻注意美觀度。

一、清晰

? ? ? 繁雜的幾面， 不但會干擾用戶視線， 也會讓用戶查找內(nèi)容困難產(chǎn)生視覺疲勞。除去繁冗的裝飾，突出內(nèi)容。同時保證app內(nèi)部的可交互性。

1、表格內(nèi)字體太小、顏色過于繁雜、圖標輪廓不清晰，除了影響客戶的瀏覽外，還容易造成誤操作。

2、內(nèi)容展示是否清晰，重要的操作擺放的位置是否便與客戶操作。

3、層級之間的路徑是否被用戶感知。

二、一致性

? ? ? ? 用戶通過一致的視覺語言得到相同的認知和內(nèi)部系統(tǒng)統(tǒng)一的使用體驗。讓用戶對app有熟悉感，降低使用成本。

1、優(yōu)秀的UI，其結(jié)構(gòu)應(yīng)該清晰明朗，布局一致，色調(diào)一致，視覺風格統(tǒng)一、控件尺寸統(tǒng)一。

2、ios標準一致，是否使用了系統(tǒng)提供的控件、視圖和圖標。

3、是否按照用戶所預期的方式整合了設(shè)備特性，文案是否一致措辭與風格。

4、同樣的圖標是否表意相同，在不同的位置執(zhí)行操作是否使用同樣的反饋，是否符合用戶預期。

三、及時反饋

? ? ? ? 長時間的空白狀態(tài)或者響應(yīng)慢，會使得用戶離開應(yīng)用。 隨時讓用戶知道自己做了什么。自己的操作引起了什么后果。

1、反饋包括視覺反饋（動效）、觸覺反饋（震動）、聽覺反饋（聲音）。每一種反饋方式都不能單獨存在，需要相互協(xié)同。才能達到最好的效果。

2、精致的動效會給人帶來有意義的反饋，幫助應(yīng)用闡明行為。同時pp更有深度，讓用戶使用時產(chǎn)生驚喜，方便了解功能。浮動窗口從下層升起，點擊關(guān)閉時向下收回。這? ? ? 樣有利于用戶感知到它的層級關(guān)系。

3、保證視覺與觸覺同步。讓使用及時得到反饋。聽覺與觸覺反饋需要開發(fā)者自行同步。

4、盡量避免警告反饋，要讓用戶覺得自己的體驗被打斷是值得的。盡量讓用戶對警告作出相應(yīng)的反饋。

5、保證用戶的決策權(quán)?？梢詾橛脩籼岢鼋ㄗh或警告，但是不能為用戶做出決定。避免? ? ? ? ? 讓用戶在不必要的結(jié)果之間，做出平衡。

四、直接操作

? ? ? ? 用戶在屏幕上直接操作對象，能讓它們更加集中注意力完成任務(wù)，同時也更容易理解這些行為產(chǎn)生的后果。

1、? 3D touch，最新的直接操控手勢。使用時盡量讓3D touch的觸發(fā)與程序內(nèi)部的操作相融合。同時注意不可以在peek里設(shè)置按鈕。

2、標準手勢包括：點擊，拖拽，輕掃，滑動，雙擊，捏，觸控屏按住，搖。作為一般? ? ? ? ? 規(guī)則，使用常用手勢。減少學習成本。

五、美觀

? ? ? ? UI設(shè)計是對圖形用戶界面的美術(shù)設(shè)計，是對設(shè)計師的基本訴求。美的東西會讓人產(chǎn)生愉悅感，在UI這設(shè)計中應(yīng)時刻注意美觀度的加強。

1、檢查顏色搭配是否和諧，圖標是否清晰精致，設(shè)計語言是否一致。

2、布局是否一致，結(jié)構(gòu)布局是否清晰，視圖尺寸是否舒適，整體視覺規(guī)范是否統(tǒng)一。

3、界面質(zhì)感是否到位，設(shè)計風格是否符合用戶定位。

本人是個UI新手，第一次發(fā)文，喜歡的小伙伴可以持續(xù)關(guān)注，希望跟你們一起成長。

本文多數(shù)資料來源于《0基礎(chǔ)學UI》作者田海。有興趣的小伙伴可以看一下。