保持好奇，巧妙融合，追求卓越，自然而然
當我們回顧近20年的手機發展歷程，可以發現2007年iPhone的橫空出世真正改變了手機這個行業。喬布斯在發布會上展示初代iPhone給行業帶來的沖擊力是前所未有的，對人機交互領域也帶來了了深遠的影響。
任何一個新事物的出現，人們總是傾向于從現有的知識體系中尋找類似的事物進行描述與概括，以尋求情感上的歸屬和理性上的辨識。但是過于超前的創新，往往是現有的知識體系無法解釋的。無法解釋，自然無法接受。
文章來源：站酷
在我們設計UI有所疑惑時，可以參照以下標準做法。
這些做法并非一成不變—我只是列舉出這些方法，相信它們可以對你的日常UI設計工作有所幫助。
我們需要記住一點，設計其實就是跳出框框思考，這意味著，有些時候我們要打破陳規。所以，對我的建議也不要全盤接受。
圖中的像素值是密度像素值的三四倍
密度像素是屏幕上每一英寸所包含的像素個數，簡稱PPI（Pixels Per Inch）。dp（density-independent pixel）是密度獨立像素，也寫作dip（也有device-independent pixel之說，設備獨立像素）。
設計界面時，建議大家基于設備的密度像素，而不是像素。這樣可以保證我們設計出的圖標素材比例適當，適應不同尺寸的設備。
舉個例子，假如我們以密度獨立像素dp為單位，設計了一個 200 x 50的按鍵，那么這個按鍵在160ppi的屏幕上的尺寸是200 x 50像素，在320ppi的屏幕上的尺寸則為400 x 100像素，即原尺寸的兩倍。
因為有些屏幕的單位英寸的像素數量要比其他屏幕多，即ppi分辨率大，為了保證設計的圖標在不同分辨率的屏幕上都一樣大，設計師通常只是設計一個尺寸，導出2x、3x、4x的尺寸。
iPhone XS Max的屏幕尺寸是414 x 896。但這里的單位并不是像素，而是點的個數。論像素，則是1242 x 2688 px。知道了這些，給iPhone XS Max做設計時，我會以414 x 896個點為尺寸做設計，而后導出3x的圖標素材。
為什么UI設計的間距都是8的倍數而不是5的倍數呢？這里有一個簡單的解釋—如果一個設備是1.5x的分辨率，我們就沒法導出一個奇數。
另外，現代主流的屏幕尺寸都是以8為單位，以8的倍數做設計可以很好地適應這些屏幕。
以8的倍數設計可以保證設計的一致性?；谶@種慣例，大家在進行設計工作時不用再猜測間距的數值，每個圖標都可以完美地與其他圖標對齊。
有關這個話題的更全面探討，請參考Bryn Jackson的文章《八像素網格設計》。
我們在設計的過程中應該時常將自己抽離出來，審視界面中這些作為元素“容器”的線和框是否讓界面顯得過于雜亂，是否應該予以保留。通常這些用以區隔界面內容的線和框可以被邊界留白代替。
我們設計的大部分元素都存在于線框里，簡單清除掉這些“容器”可以讓界面看起來不那么擁擠—給元素更多呼吸的空間。
善用對比度不僅僅是為了讓用戶的注意力集中于重要的信息，更是為了使產品更容易訪問/使用。
設計產品就好比建設像圖書館、學校一類的公共場所，它的適用對象需要涵蓋每一個人，包括失明、色盲和視障用戶。
Web內容無障礙指南（WCAG）要求文本或文本圖像的對比度至少為4.5：1。
為了保證設計達到該標準，我們可以下載Stark這款插件來檢查設計是否是無障礙的。
為什么有些圖標元素會被公認為標準？原因有多種。
假如你把一個按鈕設計成圓形，那么當我們需要一個（字數較多的）“Start Free Trial”按鈕時，它就會不必要地占用界面中豎直方向上的空間。
另外，用戶期待的是與其他產品相似的體驗。如果你設計的網站、APP或軟件與用戶的既有習慣相悖，那么這樣的體驗是不直觀的，用戶很可能會因此受挫。
故而，在我們發揮創造力的時候，最好以現有的設計規范為基準和前提。不要重新設計輪子。
每一種顏色都有自己的視覺重量，我們可以通過借助顏色的視覺重量來建立內容的視覺層次，用顏色的深淺來呈現內容的重要性的層級。
善用顏色視覺重量的秘訣是，一個更為重要的元素，應該有更重的視覺顏色，以便用戶快速瀏覽網頁，區分重要和不重要的信息。
大字號、粗體的信息會首先被用戶注意到，而后他們會關注其下的輔助性信息。
通常，設計界面會控制使用的字體數目，兩種不同的字體就應足夠—這不是說你不能使用更多字體，只是你需要充分的理由。通常來講，僅用兩種字體會更好。
設計界面時要善用字體家族。
使用字體家族意味著我們可以使用同一字體的不同變體。字體家族的存在就是為了字體的不同變體可以更和諧地被放在一起，讓設計在保持多變性的同時兼顧一致性。
選擇字體時，盡量選擇那些有多種重量（如標準、適中、粗體、特粗）和樣式的（如長體、寬體、斜體）的字體家族（譯者注：作者此處所述選字體經驗的適用對象主要為英文字體。）。這樣既會給設計留出可探索的空間，也不會增加額外的字體種類。
讓用戶去認知產品是產品設計中所推崇的，因為，我們為什么要讓用戶在使用的過程中去思考呢？
結賬頁面、電子郵箱、搜索歷史、返回按鈕等都是很好的建立了用戶認知的例子。
在好的設計中，結賬頁面是不需要讓用戶記住他們所要購買的物品的。用戶應該可以清楚地從界面中確認他要購買的物品，而非通過回憶來想起。
在Gmail郵箱中，我瞟一眼就可以知道哪些是已讀郵件，哪些是未讀郵件，這個過程不需要過腦子。同理，我登錄到自己的亞馬遜賬戶后，可以迅速地從上次購物時中斷的地方繼續開始購物—因為它顯示了我最近瀏覽過的物品。
設計時，應讓元素、功能、選項明顯可見，最小化用戶的記憶負荷。用戶無需自己在操作的步驟中記住信息。系統的操作說明應該在需要時很容易看到或查到。
—Nielson Norman Group（尼爾森諾曼集團，人機交互和用戶體驗咨詢公司，唐·諾曼是創始人之一）
作為用戶，速度和效率是最重要的。用戶使用一個應用程序，是為了解決某個特定的問題。
我要速度。
— Ricky Bobby（電影《塔拉迪加之夜：瑞奇鮑比的民謠》主角、賽車手）
如果將一張支票通過手機存入銀行賬戶這個體驗是非常讓人享受的，那固然很好，但作為設計師，千萬不要讓你的創造力阻礙用戶實現他們的目標。
關于動畫和微交互的一條經驗就是，如果某個體驗只是無謂地增加了時間，那么這不是在改善用戶體驗。
如果加入的動畫帶有目的性，則可以改善用戶體驗；但是如果增加的只是不必要的分散注意力的元素或用戶操作，那么用戶體驗不會變得更好。
Dribble上有很多著陸頁的設計—當用戶向下滾動鼠標時，動畫隨之展開。通常，這些設計展現出過火的動畫效果，每個元素都在淡入淡出，動來動去，而幾乎不關注體驗本身。當太多事情同時在界面上發生時，用戶很難知道到底哪些信息是應該關注的，這等同于浪費用戶寶貴的時間。
這位Dribble用戶，非常抱歉把你揪了出來:/
無數研究表明，界面中動畫的最佳時間在200到500毫秒之間，這個數字是由大腦的特征決定的。任何短于100毫秒的動畫都是一晃而過，人眼根本無法識別；而超過一秒的動畫會帶給人無聊和延遲的感覺。
—《UX微動畫設計指南》
所以，如果你要在界面中使用動畫，那么給它一個明確的目的，并且不要讓用戶等待超過500毫秒。在2019年的今天，惹惱你的用戶只需要1毫秒。
每次我們想要增加額外的信息到界面中時，例如按鈕、文字、照片、動畫、插圖等等，它們就會跟相關的信息進行競爭。如果一頁上有太多東西，那么某些元素的重要程度就會被削減。
谷歌搜索首頁就是典范。這個設計將全部的注意力放在了搜索這個主要功能上，沒有把用戶淹沒在不必要的信息海洋里。
對不起了雅虎，在這必須把你當做不好的案例展示
最后，分享給大家一句我最愛的設計箴言：
臻于完美之時，不是加無可加，而是減無可減。
文章來源：UXRen
作者通過從會員體系構成的4個核心要素對“京東、亞朵、支付寶、騰訊理財通”的會員體系進行拆解，發現不同類產品中的設計會員體系需要注意的問題。
一款產品要想持續獲取用戶價值，前端增長和后端活躍、留存與轉化缺一不可。隨著流量越來越貴拉新成本越來越高，多數互聯網公司開始將用戶活躍與留存視為產品核心指標，而會員體系一直以來都是最有效的活躍留存與轉化的運營手段之一。
本文對比4款目前付費類產品中比較典型的“京東、亞朵、支付寶、騰訊理財通”的等級會員體系，分別代表4種不同的等級會員體系類型。從會員體系構成的4個核心元素：命名、層數、成長值計算、會員權益，來快速了解一款產品的會員體系。
希望通過這篇文章給在做會員體系抓耳撓腮的你一點啟發。
會員命名是品牌文化、用戶群體特征的體現，而會員層數的多少則反映了產品轉化路徑的長短。
京東會員分為非付費會員（下稱等級會員）和付費會員兩個體系。為了凸顯付費會員，2019.9.15日起，取消了等級會員原有的銅銀金鉆制會員體系，以京享值代替。
至此，從會員命名的角度，京東的會員只有付費會員和等級會員兩種名稱，等級會員會員之間以京享值的大小進行區分，共分為5層。
亞朵會員在命名方面充分體現了“舒心微笑”的品牌特征，等級會員共分為5級，分別為注冊會員（初遇）、銀會員（識君）、金會員（知己）、鉑金會員（執手）、黑金會員（逍遙）。括號內的短稱分別來對應著兩句詩詞，詳見官網的會員介紹。
支付寶等級會員共分為4級，分別為大眾會員、黃金會員、鉑金會員、鉆石會員。從級別數量來說，支付寶會員級別相比于前者少了1級，會員升級的難度也加大了。
騰訊理財通等級會員共分為4級，分別為普通會員、白銀會員、黃金會員與鉑金會員。顏色區分上，級別從低到高顏色分別為藍灰色、銀灰、金色、黑色，通過灰色調營造理財產品的嚴肅和專業感。
【注：等級會員是指，會員級別不能直接購買得到，而是要通過完成產品任務升級達到。付費會員是指，用戶通過付費購買產品會員特權，購買的會員獨立于非付費會員，不是非付費會員的某一級】
通常會員命名會以金屬作為主線，其中金、銀、鉆石等最為常見。
這是用戶已經熟知的命名方式，遵循以上規則有助于用戶更快的接受會員身份。但如果產品有特殊的品牌文化和目標用戶，可以考慮在命名上加入品牌元素，如亞朵。
付費會員與等級會員之間具有重疊性。
高階的等級會員分散了用戶對付費會員的注意力，因此京東最終不得不對等級會員體系采取“除名”做法。
付費會員必然會導致原等級會員體系影響力的削弱，在初始設計時需要綜合考慮付費會員和等級會員體系在維系用戶、營銷行為等方面的價值，做好取舍。
此外，還可以參考亞朵酒店的做法，將等級會員的某一級作為付費對象來售賣，如下圖，亞朵酒店將會員體系中的第三級【金會員】單獨售賣。
不同產品的會員層數不同。
電商等付費類產品會員普遍采用4-5級的分層、資訊類產品的會員體系可多達10級，如趣頭條等；社交、游戲類產品更是根據玩法的不同，設置幾十級的會員等級。
會員定級層數主要取決于產品的轉化路徑長短：
付費類產品轉化路徑短，用戶使用產品就一定會付費，因此只需要根據用戶實際消費能力進行用戶分層，4-5層即可覆蓋用戶的全部消費能力。
但社交類產品轉化路徑長，需要用戶長期活躍在產品內才有機會轉化付費用戶，會員級別需要足夠多，才能保證用戶有動力持續的活躍和留存。
此外，從成本的角度考慮，付費類產品的會員權益通常為商家的折扣和返利，會員級別越高企業付出成本越高，
級別過多會導致企業難以承擔成本，而社交、游戲類產品的會員權益通常為虛擬的勛章、身份象征等，即使會員級別高達幾十級，也不會產生過多的成本。
下圖是趣頭條10級會員的權益，可以看到權益大多數為榮譽勛章類虛擬獎勵，企業幾乎不需要付出成本。
成長值是用于衡量會員級別的刻度，用戶通過獲取成長值來達到升級、保級的目的。成長值的獲取方式體現了產品主要的運營動作，而計算公式也根據業務變動速度和產品特點有所不同。
分析如下：
京東的主要運營動作包括以下幾方面：提高用戶消費，促進用戶活躍、收集用戶信息、建立信用評分體系等。
京東成長值的具體計算公式并未明確給出，因此可以推斷其業務調整快，變動幅度大。不公布具體計算公式可以靈活的調整成長值計算公式，但也犧牲了用戶的確定性體驗。
分析如下：
亞朵對用戶的主要運營方向為消費和互動，運營動作主要是圍繞著訂房和相關服務展開。
成長值計算兼容地區差異：酒店業務通常分布在多個城市，每個城市的消費水平差異很大。若僅僅以消費金額來衡量會員級別，會導致大多數的高級會員都集中在高消費城市，無法實現對二三線城市的用戶激勵。因此，酒店行業會員的成長值通常結合間夜和消費金額綜合計算。
酒店預定更加依賴于用戶渠道，包括OTA（美團/攜程等平臺）、自營渠道、分銷商等。不同的渠道企業付出的成本不同，會員體系通常只給自營渠道的用戶計算成長值。如亞朵。
分析如下：
支付寶主要的運營動作包括促進用戶消費購物、完成生活繳費和增加金融理財。生活繳費任務的成長值獎勵較高，可以推測占據用戶生活支付場景是主要運營方向
支付寶的成長值計算公式為白盒，這與理財類產品性質相關，由于涉及到用戶的金錢投入，更需要獲取用戶的信任，明確的計算方式能夠帶給用戶確定感。
分析如下：
騰訊理財通的主要運營動作包括促進用戶購買理財、激勵用戶完善個人信息。騰訊理財通的會員任務多達27個，收集用戶信息的任務占到1/3，可見完善用戶畫像為產品的主要戰略。
理財通會員成長值的計算公式同樣為白盒，清晰的展示用戶完成任務能獲得的成長值。
（注：數字標記表示用戶級別，其中高級會員擁有低級會員的全部權益）
騰訊理財通會員等級禮遇如下圖所示：
通過分析會員體系的4個核心元素：命名、層數、成長值計算、會員權益，可以迅速讀懂一個產品的會員體系。
一個好的會員體系能夠通過選擇合適的會員命名、設置符合產品轉化路徑的會員層數、設計涵蓋主要運營動作并能靈活調整的成長值計算體系、提供滿足用戶核心需求的會員權益。最終形成業務閉環，引導用戶價值逐步提升，實現用戶價值的最大化。
文章來源：人人都是產品經理
看似簡單的登錄框，暗藏了多少值得推敲的用戶體驗？這10個細節，就是你和設計高手的區別。
你不應該讓你的用戶到處尋找登錄區域。他們找的時間越長，就會越沮喪。他們越沮喪，最終登錄的可能性就越小。
一個很好的例子就是 Gmail 的登錄頁面。
你可以確切地知道你需要在何處登錄，以及要在輸入區域輸入什么內容，上面的例子，如果你沒有 Gmail 帳戶，它允許你通過單擊「創建帳戶」來輕松地創建一個帳戶。
好的用戶體驗是使你的登錄區域明顯，使你的用戶盡可能容易地進行登錄操作。
第三方登錄正迅速成為用戶登錄賬戶的方式，理由很充分。為不同的產品創建多個賬戶既耗時又令人困惑。很難記住一堆不同的密碼和用戶名。
通過允許用戶使用用戶的第三方賬戶中的信息來創建一個賬戶，可以解決所有關于這些問題。
讓我們來看看下面的石墨文檔和MONO登錄時的選擇方式：
甚至還有更方便的注冊登錄方式，手機短信驗證碼在注冊的同時登錄：
一些產品在用戶點擊第三方注冊登錄時還需要用手機號進行短信登錄，從用戶的角度看，這很明顯是一個不好的體驗，但是產品的角度去思考就不一樣了，產品為了獲取用戶更多的信息，則需要這樣來設計流程。
這種設計流程該不該用，這需要在產品和用戶之間進行權衡，第三方與手機短信驗證碼登錄，在提高用戶體驗的同時，可以提高用戶的效率，使界面更加直觀。
因為環境不同，在中國很多網頁端的網站，第三方登錄很的產品很少。
例如，如果你的 QQ 沒有在電腦端登錄，因為即使選擇第三方 QQ 登錄，你也要拿出手機—打開 QQ —打開掃一掃，進行掃碼登錄等一些列的操作。
又或者，當你想要登錄 behance，只要瀏覽器有記錄之前的第三登錄，點擊第三方登錄即可直接進入該網站，甚至不用注冊。
可以看下面的騰訊網與 behance 的網頁登錄：
好的登錄體驗應該只有賬號、密碼兩個輸入字段，或者手機號碼、短信驗證碼兩個字段，以及使用第三方登錄的選項。在簡單、的同時，并為用戶提供了很好的體驗。
如果一個用戶來到你的網站進行注冊，或者想他們返回登錄界面，這就需要讓用戶清楚的知道他在何處，下一步應該去哪里。
我們通過使用登錄字段與注冊字段的區別來幫助他們，讓我們看看下面的 dribbble 注冊界面：
創建賬戶的按鈕已 dribbble 的主題能很快突出在用戶面前。新用戶可以直接在頁面上注冊，而返回的用戶可以使用最上面右上角的登錄兩字。看到上面「sign in 」字段了嗎？
dribbble 使用了不同的顏色、布局去區分注冊按鈕與登錄的入口，這樣更加清晰明了。
同時可以看看 dribbble 的主頁面，他們會把 sign in 與 sign up 的進行區分，在 sign up 加上微邊框，讓用戶能更快區分兩者的不同。
讓用戶用他們的用戶名來進行登錄真的不是一和很明智的做法，為用戶省去記錄你產品的用戶名的麻煩，應該讓他們使用他們的電子郵件地址或電話號碼注冊來進行代替用戶名。
ins 讓用戶有機會用他們的電話號碼或電子郵件地址登錄。
反例：
盡可能讓用戶同時用手機號碼或郵件地址來登錄，因為用戶可能會忘記他們用來登錄你的產品的電子郵件地址，所以這時，用戶能使用手機號碼進行登錄。
給用戶提供可顯示密碼的按鈕，減少用戶輸錯密碼的操作，當輸錯的同時，可進行對錯的字段進行糾正，不用全部刪掉重新來。
讓我們來下面的脈脈和片刻：
還有什么比再次到你之前登錄的網站或 app，卻發現你需要再次輸入賬戶密碼登錄更令人沮喪的事情嗎?
當你的用戶返回到你的網站時，請確保他們已經登錄了，或者為了方便登錄，提前為他們預先填充賬戶和密碼等字段。
谷歌在這方面做得很棒。每當用戶需要重新登錄到 YouTube、Gmail 或任何其他谷歌品牌時，他們的登錄信息都會被記住，使登錄過程更加簡單。
盟友銀行允許用戶勾選 「保存用戶名」 復選框，允許網站在用戶到達網站時默認記住用戶名。這是記住用戶信息的另一個好方法，展示形式可以多樣化，可根據自己產品與用戶需求來進行把控。
有時你的用戶會忘記他們的登錄信息。當這種情況發生時，盡量讓恢復過程盡可能的輕松。
公眾號的賬戶密碼輸入欄有記住密碼復選框，以防用戶忘記他們的用戶名和密碼，不用每次進來都輸入賬戶密碼進行登錄。
印象筆記對他們的密碼做了一些巧妙的處理，讓用戶知道他們多久以前更改了密碼。
這個小小的提示可以喚起用戶的記憶，幫助他們記起密碼。
如果用戶忘記了他們的登錄信息，要讓他們清楚應該去哪里。如果你將使令人沮喪的情況變得不那么令人沮喪，你的用戶將因此會喜歡上你的產品。
我們都有過這樣的經歷：令人沮喪地輸入和重新輸入你的密碼都無濟于事，結果卻發現你一直開著大寫鎖定鍵。
可以通過警告你的用戶，防止這種情況發生。微軟的 Edge 瀏覽器還使用戶可以選擇在鍵入時打開大寫鎖定時打開通知。
讓你的移動用戶使用無密碼登錄，現在很多特別是金融類 app，都可以讓用戶進行指紋登錄，因為不像其他 app 一樣可以一直保持用戶已登錄狀態，在保障安全的同時能更便捷。
以上的設計技巧與案例希望能幫助各位讀者提高產品的用戶體驗。
歡迎關注作者的微信公眾號：「設計探」
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
心理學在我們生活中涉及的面很廣，是每個行業都要了解的，對于設計師來說，更要了解用戶的心理，因為我們的設計是面向用戶的
閱讀時間：大約9分鐘
目錄
前言
7±2法則
費茨定律
希克定律
格式塔原則
色彩心理學
馮·雷斯托夫效應
奧卡姆剃刀原理
總結
前言
最近正好在學習用戶體驗方面的知識，也查閱了相關的資料和文章，輸出是最好的輸入，所以把整理的相關文檔寫下了，也是將所學的知識再鞏固下，歡迎大家一起探討。
7±2法則的定義
7±2法則出于美國心理學家George A. Miller1956年發布的論文《神奇的數字7加減2：我們加工信息能力的某些限制》。Miller最早對短時記憶能力進行了定量研究，他發現人的短時記憶能力的廣度為7±2個信息塊。
這說明人的大腦短時記憶的容量大約為“7”，并在7+2與7-2之間浮動，因此，心理學家把這個神奇的記憶容量規律稱為“7±2法則”。由7±2法則我們可以得出，一般人接受新事物的記憶容量大約是7,最多不會超過9。
心理學家Alan Baddeley質疑7加減2規則。Baddeley（1994）翻出Miller的文章，發現那并不是真正的研究報告，只是一次專業會議的講稿。Miller基本上是自言自語，猜想人能夠同時處理的信息量有沒有固有的限制。
此外，Nelson Cowan（2001）等研究者也追隨了他的腳步?，F在研究表明，那個“神奇的數字”其實是4。（無論是7±2還是4，便于我們記憶同時也協助我們工作提升效率就是最好的數字）
George Mandler（1969）指出，人們能分門別類地記住信息，并且如果每個記憶類別里只有1～3條信息，那么人們能夠出色地回憶起來。當每類超過3條信息時，記憶效果就會相應下降，每類有4～6條信息時，人能記住80%；儲存信息條數越多，記住的比例就越低，當每類有80條信息時，人只能記住20%（如下圖所示）。
舉個直觀的例子，以下隨機給出10個詞語，你看一遍能記住幾個？
桌子 電腦 椅子 水杯 鉛筆 地圖 綠植 鍵盤 鼠標 文件
7±2法則的運用
1、組塊記憶
為了改善不穩定的工作記憶，人們會采取一些有趣的策略。其中之一就是將信息“組塊記憶”。
也就是把數字分為3-4-4來記憶，抖音的登錄賬號、美團的Dialog彈窗都是遵循的這一原則。
包括現在在生活中，我給別人發手機號碼或者是身份證號的時候都會選擇這個原則，自己看著也清晰，也便于對方將信息分類。
2、優化選項
網易新聞和今日頭條的導航都遵循了7±2法則，更多的信息左側滑動即可。
3、頁面布局
7±2法則還可以幫我們將頁面分組，將內容按照屬性分類，使頁面更有條理性和層次感，用戶能的完成自己的操作，例如：餓了么
費茨定律的定義
任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。
用數學公式表達為時間 T = a + b log2(D/W+1)。
T=移動設備所需時長；a,b是經驗常量，D=設備起始位置和目標位置的距離；W=目標的寬度大小。
費茨定律的理解
1、設備當前位置和目標位置的距離D越長，所用時間越長；
2、目標的大小W越大，所用時間越短。
費茨定律的應用
1、按鈕放大，點擊更容易
閑魚和印象筆記，一個是直接發布閑置，另一個是直接創建筆記，都屬于核心功能，將用戶最想要或最直接想點擊的按鈕外漏、放大；增加可點擊區域來滿足用戶的需求。
2、讓相關的內容更接近
淘寶、京東的加入購物車和立即購買，在視覺上讓用戶增加了他們相關性的認知，也減少了兩個按鈕操作之間的距離和時間。
3、頁面的邊和腳適合放一些按鈕和菜單
安卓手機刪除應用時的操作、Potoshop軟件頂部菜單等、Mac操作系統的底部應用等，無論我們怎么操作，鼠標都不會超過這些區域。
?？硕傻亩x
?？硕?— 原稱?？撕Ｂ桑℉ick Hymalrs 1aw），是一種心理物理學定律。
一個人所面臨的選擇越多，做出選擇所花的時間就越多，當面臨選擇的數量增加，做出決定的時間也會跟著增加。
?？硕傻膽?/span>
?？硕傻膽煤軓V泛，不僅是在產品上，在生活中也隨處可用。
和同事每天都會遇到的問題，一到中午，同事就會問，吃什么？每日一問，看著商場眾多美食，真是發愁，但如果她換種問法：我們今天中午吃海底撈還是和府撈面，這樣的詢問是不是就節省思考和作出選擇的時間？
遙控器的設計也是，看到下面兩個遙控器的樣式，你會感覺哪個好用，很明顯是右邊小米的遙控器，老人再不用教的情況下就可以自己操作，左邊的拿起來我們要花很多時間是研究如何使用，可能剛學會，想進行下一個操作的時候又要去花時間研究，是不是很鬧心？
猿輔導APP中，導航默認的是所有的課程，對于學員來說選擇自己想要學習的課程，比較浪費時間，右側的設計就是將我們不感興趣的課程關閉推薦，剩下的課程大大縮短了我們選擇和尋找的時間
格式塔的定義
格式塔（德式造型）是20世紀20年代由德國心理學家提出的一組視覺知覺原理。它建立在“一個有組織的整體，被認為大于其各部分之和”的理論基礎上。
格式塔的應用
在我們做設計的過程中，常用的是原則有：簡單性、接近性、相似性、連續性、閉合性等
1、簡單性原則
簡單原理適用于設計中的三角形構圖，均衡構圖，對稱構圖，向心構圖，攝影中的對角線，X型構圖等。這些構圖方式都是為了把復雜的信息元素通過簡單的方式讓觀者易于理解。
58同城和愛奇藝首頁都是均衡和對稱的構圖
2、接近性原則
一個頁面中，如果兩個元素是接近的，給用戶的感覺他們之間就有相關性
在支付寶我的頁面中，個人信息都是有相關性的，所以放一起遵循了接近性原則
3、相似性原則
我們的眼睛很容易關注那些復雜環境中外表相似的東西，可以利用相似原則組織好界面中的信息和層級關系。
相似性原則在UI設計中也很常見，網易郵箱、騰訊視頻都采用了相似性原則
4、連續性原則
人的視覺有追隨一個方向上的連續性，以便把不關聯的元素聯系到一起。
我們在APP中?？吹搅斜硪彩沁B續性原則的應用
色彩心理學定義
在自然欣賞、社會活動方面，色彩在客觀上是對人們的一種刺激和象征；在主觀上又是一種反應與行為。色彩心理透過視覺開始，從知覺、感情而到記憶、思想、意志、象征等，其反應與變化是極為復雜的。色彩的應用，很重視這種因果關系，即由對色彩的經驗積累而變成對色彩的心理規范，當受到什么刺激后能產生什么反應，都是色彩心理所要探討的內容。
色彩心理學應用
黑色：精致和力量
白色：干凈、精致、純潔
紅色：勇氣、激勵、力量；也能激發欲望
藍色：冷靜、安定、信任、安全
黃色：樂觀、歡樂
綠色：平衡、可持續的增長
紫色：皇權、精神意識、奢華
橙色：友誼、舒適、食物
粉色：平靜、女性化、性
一說到美食，我們能想到的顏色就是橘色，暖色系，因為這個顏色會增加食欲
插播一個知識點：美團外賣選擇的橘色，跟美食相關的顏色，我們可以理解，但餓了么平臺為什么會選擇藍色而不是暖色系呢？餓了么是以科技為主導的，核心并不是美食，所以選用了科技藍
在一些電商類網站都會將加入購物車、立即購買顏色設置為紅色，因為紅色可以刺激人的眼球，來增加點擊的欲望，還有微信群和朋友圈的未讀，都設置成紅色
顏色也是影響人們的情緒，比如長時間在橘色的環境下呆著，會使人焦慮不安，所以一些餐廳在顏色、燈光選擇上都會選擇用一些暖色系，藍色和褐色，會使人平靜，適合一些酒吧；
但色彩也不能濫用，它是具有聯系和含義的，例如：紅色代表赤字，即經濟困難；也可以代表警告、危險等；綠色代表環保、通行，所以在選用顏色上也要考慮它的含義和意義，要謹慎。
馮·雷斯托夫效應定義
馮·雷斯托夫效應告訴我們，某個元素越是違反常理，就越引人注目、令人難忘。
Hedwig von Restorff在1933年檢驗了這個理論。她讓實驗對象觀看一系列相似的物品。如果其中某個很特殊，比如說有聚光燈照射，那么相比其他物品，受試者就更容易回憶起這件物品。
比如，下面這個紅西紅柿
如果你想要讓某物引人們的注目，就要使它特殊化，可以通過色彩、尺寸、留白等方式來引起注意
例如：小紅色的紅色按鈕、蘇寧易購一套節日氣氛的首頁
奧卡姆剃刀定律定義
奧卡姆剃刀定律（Occam's Razor, Ockham's Razor）又稱“奧康的剃刀”，它是由14世紀英格蘭的邏輯學家、圣方濟各會修
士奧卡姆的威廉（William of Occam，約1285年至1349年）提出。這個原理稱為“如無必要，勿增實體”，即“簡單有效原理”。正如他在《箴言書注》2卷15題說“切勿浪費較多東西去做，用較少的東西，同樣可以做好的事情?！?
奧卡姆剃刀定律的應用
我們在進行頁面設計的時候并不是內容越多越好，信息飛速發展的時代，大家都講究快、效率，我只要通過這個APP盡快達到目的為好，繁冗的功能對用戶來說只會降低用戶體驗感，抖音APP底部的導航開始是文字加icon，后來發現圖標會影響整體的效果，因為當視頻播放的時候，下面的Tab識別度會降低，經過改版，將icon去掉，文字放大，CTR也上去了，之后小紅書就開始參考抖音的改版：我不管你去掉的原因是什么，CTR上去就行
總結
一句話在回顧下文章的定律
7±2法則：一般人接受新事物的記憶容量大約是7,最多不會超過9
費茨定律：A和目標B的距離越長，所用時間越長；A大小越大，所用時間越短。
希克定律：選擇越多，花的時間就越多，選擇的數量增加，做出決定的時間也會跟著增加。
格式塔原則：常用的是原則有：簡單性、接近性、相似性、連續性、閉合性
色彩心理學：顏色也是影響人們的情緒，選用上要謹慎
馮·雷斯托夫效應：某個元素越是違反常理，就越引人注目、令人難忘
奧卡姆剃刀原理：簡單有效原理，去繁從簡
轉自：站酷-麥小兜Sarah
寫這篇文章的初衷，是在實際工作中遇到 PRD & DRD 文檔，對于一些交互設計圖，會產生不理解，或者說在實際落地畫圖的時候會發現一些前后不一致的問題，解釋過于冗余，不清晰。在接觸新的業務時，很難把新理解的內容從上至下的消化完整。所以希望通過這篇文章幫助剛接觸交互的同學更好地開展交互設計工作。
在傳統瀑布式需求分析流程中，我們設計師往往拿到的是已成型的信息架構圖&產品結構圖&關鍵業務流程圖，只是了解一下大概是什么類型的產品，很難發現企業產品中真正關鍵的流程價值點在哪里，或者說也不清楚后續發展的走向，只能卯足了勁去做圖做說明，整理完整。時間緊迫壓力大，又要照顧整個項目。往往決定產品成功與否的，是產品 20% 的主要功能（二八原則）。所以在面臨初期產品設計中，應該將主要精力放在重要功能流程中。
目前，在互聯網產品中，敏捷開發是所有產品設計者最推崇的。原因在于，能夠對業務、設計、開發更有前瞻性&敏捷性。
產品交互的成功一定是建立在業務需求提煉清晰的基礎上。業務需求的價值提煉，也是設計師需要參與完成的。業務需求是一個比較大的任務，來源可能是老板的要求，可能是產品提出的，也可能是用戶的反饋。通過業務需求，我們要分析出相關的業務目標。有個偶然的機會，了解到彩色 UML 的設計方法，在具體實踐中，感覺這個方法能夠快速適應任何業務流程，簡單方便，易懂，并能快速發現業務流程中的問題，加以修正完善。
有幸認識王海鵬老師，他推薦了早年他翻譯的彩色 UML 建模一書，作者 Peter Coad，是將彩色和企業組件集成到建模技術之中的第一本書的主要作者，是世界上經驗豐富的建模人員之一，他所創建的模型幾乎涉及到所有行業。
此書是第一本介紹用彩色來表達軟件設計的著作。作者用 4 種顏色來代表 4 種架構型，給定一種顏色，你就知道這個類可能具有哪些屬性、鏈接、方法和交互。得到的彩色構建塊能創建更好的模型，并獲得應有的認可。彩色和架構型僅僅是開始。作者更進一步將這些架構型發展為 12 個類的領域無關組件。作者在過去 10 年中創建的每個模型，都遵循這個組件所表達的基本形狀和職責。
筆者利用彩色 UML 建模的設計方法，用于業務梳理工作，達到了意想不到的效果。以下為彩色 UML 建?；靖拍睿ń厝〔噬?UML 建模書中的介紹）。
△ 《彩色UML建模書》第9頁
△ 《彩色UML建模書》第10頁
△ 事例會員注冊
定義：ER 圖是用來描述現實世界中的實體關系模型，所謂實體是指客觀上或者邏輯上存在并且可以區分的人事物。
作用：促使你以最適合技術理解實現的方法，來規范的描述功能模塊的核心要素，其實就是數據庫的物理結構。而這種描述是無二義的，最清晰傳達 PM 的設計思想。
功能結構圖就是按照功能的從屬關系畫成的圖表，在該圖表中的每一個框都稱為一個功能模塊。功能模塊可以根據具體情況分得大一點或小一點，分解得最小功能模塊可以是一個程序中的每個處理過程，而較大的功能模塊則可能是完成某一個任務的一組程序。用通俗的話來說，功能結構圖就是以功能模塊為類別，介紹模塊下各功能組成的圖表。
作用
信息架構屬于用戶體驗的結構層，是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代，否則不會大改。
作用
信息結構圖構成要素
定義：產品結構圖是綜合展示產品信息和功能邏輯的圖表，簡單說產品結構圖就是產品原型的簡化表達。
作用：它能夠在前期的需求評審中或其他類似場景中作為產品原型的替代，因為產品結構圖相較于產品原型，其實現成本低，能夠快速對產品功能結構進行增、刪、改操作，減少 PM 在這個過程中的實現成本。
業務流程圖，不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程，直接和業務掛鉤，可以說是產品的核心流程。
作用
通過業務流程圖，鉆研關鍵事件的流程，分析為什么要這么做，探索出更深層次的問題，從而對現有不合理的業務流程進行重組優化，進而制定優化方案，改進現有流程；闡述在項目中各個角色是如何產生相關聯系的。
繪制規范/建議
任務流程圖就是通過圖形化的表達形式，闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時，會產生的一系列操作和反饋的圖標。
作用：基于業務流程，進行任務流程梳理，闡述角色和程序發生交互的流程，你如何進行操作，系統如何進行反饋。
任務流程與需求文檔中的業務流程并不一樣。雖然它們都是流程圖，但業務流程更偏向于業務限制、后臺邏輯等，并不過分注重用戶的操作邏輯。而任務流程則需要關注用戶如何操作、界面如何反饋等，從而引導用戶完成用戶目標。
定義：指電子產品具體所呈現的頁面跳轉流程圖。其承載了業務流程圖所包含的業務流轉信息。
作用：
定義：頁面的模塊、元素、人機交互的形式，利用線框描述的方法，將產品脫離皮膚狀態下更加具體跟生動的進行表達。
作用：用例闡釋者，用來了解用例的用戶界面；系統分析員，用來了解用戶界面如何影響系統分析；設計員，用來了解用戶界面如何施加影響及它對系統「內部」的要求；類測試人員，用來制定測試計劃活動。
構成要素
限制
包含范圍值、極限值等。
范圍值主要指數據的取值范圍。比如，當你的界面上出現了下拉菜單、篩選按鈕、滑塊等控件時，你必須標注清楚它們的選擇范圍，否則開發人員就不清楚該如何設定，如圖所示。
極限值主要指數據的顯示限制。比如，最多應該顯示多少字數，過時如何顯示，是否折行等，如圖所示。
狀態
包含默認狀態、常見狀態、特殊狀態等。
「默認狀態」主要指默認顯示的文字、數據、選項等。這些內容需要注明，否則開發人員可能難以意識到這是用戶填完的效果，還是默認就有的。
「常見狀態」主要指針對某一個模塊，經常遇到的一些狀態。這些狀態都需要在原型上表述出來。比如一個普通的積分模塊，一般會出現 3 種狀態：未登錄狀態、登錄后未簽到狀態、登錄后已簽到狀態，如圖所示。
「特殊狀態」一般指非正常情況下的樣式、文案、說明等，如圖所示：
操作
包含常見操作、特殊操作、誤操作、手勢操作等。
「常見操作」主要指正常操作時得到的反饋狀態。比如一個普通的翻頁控件，在經過不同操作后會立即出現如下的狀態。
「特殊操作」主要指一些極端情況下的操作。一般，用戶不會這么操作，但是一旦遇到極端情況，還是要想好應對措施，因為對于開發人員來說，不管是正常的還是極端的操作情況，他們都要去編寫對應的代碼。如下圖，是填寫用戶信息的例子，當不寫交互說明時，開放往往會遇到很多問題：如果已經勾選了 2 個人，再勾選第 3 個人，怎么辦？如果勾選了「張XX」，下面區塊中會相應地出現張XX的信息，那么這時候允許修改張XX的身份證信息嗎？假如允許的話，修改后「張XX」還保持勾選狀態嗎？表單提交后要新增一個被保險人信息嗎？若修改的是除身份證號碼以外的信息，「張XX」 還保持勾選狀態嗎？提交表單時是覆蓋原存儲信息嗎？若修改后出生日期、性別與身份證號碼不吻合怎么辦？等等。
面對各種復雜的情況，一方面要和開發人員積極探討，看看有沒有其他的解決方法可以簡化各種邏輯判斷；另一方面，在得出結論后，要把交互說明寫清楚，避免出現讓開發人員感到棘手的情況。
「誤操作」主要指當用戶操作錯誤時的情況。不過我們在設計時要盡量避免有用戶犯錯的機會。如圖所示，提示中已告訴用戶「庫存5件」，如果這個時候用戶在「數量」一欄中輸入「6」會怎么樣呢？系統會自動幫用戶將其改為「5」省去用戶手動修正的操作。
「手勢操作」主要指用戶使用移動產品時的操作方式。常見的有點擊雙擊、長按、捏、伸、滑動等等。
反饋
用戶操作后得到的反饋動作，包含提示、跳轉、動畫等。
「提示」主要指操作后，系統反饋給用戶的文字說明等，如圖所示。
「跳轉」主要指點擊某個鏈接后，頁面跳轉到哪里。設計師需要在原型上注明跳轉時是「原頁面刷新」還是「新頁面打開」。如果是做手機應用的話，需要注明跳轉時的轉場方式，如圖所示。
「動畫」主要指用戶操作后，系統通過動畫的方式反饋給用戶。動畫給人的感覺比較友好、趣味性較強，是非常常見的一種反饋形式。比如刪除某條信息，該信息以漸變消失的形式告訴用戶：這條信息已經被刪除了。在移動應用中，動畫反饋的形式更為常見。因此設計師一定要在原型上表述清楚動畫的形式，必要時可以制作 domo 動畫演示效果給開發人員。
文章來源：站酷
作為UI設計師，我相信大家都是專注于界面設計的好不好看，至于界面與界面之間如何交互，點擊之后如何反饋，是一個比較容易被忽略的重要環節。
那么我們怎么處理好界面交互中的加載設計，減少用戶因等待產生的焦慮情緒，保證整個體驗無縫銜接，今天這篇文章就來總結下APP中數據加載模式設計。
一、為什么要加載？
1、用戶在進行某些操作時，都要從后臺請求數據，這個過程都需要時間，系統應該始終在合理的時間內做出適當的反饋，讓用戶了解正在發生的事情，讓用戶知道此時的操作是有反應，減緩用戶因等待而產生的焦慮感。同時加載方式也可以做的有趣，吸引用戶注意力，增加沉浸式體驗，讓用戶輕松自在的享受等待；
2、體驗無縫銜接，減少用戶跳失，正常的等待加載時間是0.3秒以內，同時不同場景對應有不同的加載方式。
二、常見的加載場景及方式
a.加載場景：
不同場景有不同的加載方式，常見的加載場景一般有以下幾種：下拉刷新、上拉加載、切換新頁面的數據加載、頁面局部模塊的加載、啟動頁加載、操作按鈕加載。實際工作中，要根據不同的場景搭配不同的加載樣式，才能更好的做到緩解用戶等待焦慮，降低用戶的跳失率。
b.加載方式：
1、全屏加載
主要出現在手機H5頁面，例如微信的文章詳情頁。一般會有進度條或有趣的動畫設計，減輕用戶等待時的焦慮感。加載失敗后，頁面通常為空白頁，且有重新刷新操作按鈕。
優點：將整個頁面的內容都加載出來才展現給用戶，能保證內容的整體性，全部加載完才能夠系統化的閱讀。
缺點：一般等待的時間較長，容易產生焦躁情緒，尤其是遇到網絡不好的情況
2、下拉刷新加載
主要出現在頁面內容為推薦類、或者信息更新頻次高的產品，通過刷新加載新數據，加載的loading樣式可以結合產品logo或IP形象進行設計，增加趣味性，吸引用戶注意力。
3.占位圖加載
如果頁面布局樣式比較固定，可以采用占位圖加載機制，先加載頁面布局和占位圖，先給用戶展示頁面框架，后加載頁面圖片細節部分，這種加載方式相對于直接展示白屏來說，呈現給用戶無縫銜接的感覺，體驗更加流暢。
4.分布加載
當頁面中有文字和圖片時，優先加載占網絡資源較小的元素，如先加載文字，后加載圖片，圖片加載完成前使用占位符顯示，保證用戶可以順暢閱讀，縮短用戶的等待時間，提高產品體驗。
優點：可以幫助用戶快速閱讀內容，了解信息。
這種加載形式更加適用于內容閱讀型的APP或圖片、視頻類資源比較多的頁面。
5.自動加載（懶加載）
當瀏覽信息時，不停的向上滑動，新的內容會不停的從底部出現，這種方式稱為自動加載。對于自動加載，要注意每次加載多少條內容，或者多少屏的內容。一般會在距下面內容一定距離時開始加載，當網速非?？斓臅r候，用戶并不能感知懶加載的動作，這樣可以營造一種無極限瀏覽的錯覺，很容易的把用戶吸引住。
優點：無需用戶操作，自動加載后續內容，營造沉浸式體驗。
應用：適合feed流、瀑布流、算法推薦類的內容。
6.預加載
提前加載好頁面信息內容，這樣當網絡不好的時候，可直接從本地緩存中渲染，就不用再加載了。
比如用戶在看A頁面的時候，App在后臺加載完B頁，等用戶打開B頁的時候就不需要等待加載了，因為App已經幫用戶提前加載好了，給用戶提供無縫鏈接的感覺，弊端就是服務器壓力很大，就是要預測用戶行為，加載其他數據，這樣會消耗不少流量，所以建議在WiFi網絡環境下采取這種預加載機制，而在蜂窩網絡狀態下則不采用預加載機制。
7.漸進式加載
一般出現在圖片類產品，比如pinterest、unsplash等，當瀏覽圖片的時候，經常是先看到一張模糊圖或與圖片較為相似的色彩值圖片，然后再漸漸的變得清晰，這種效果就叫做漸進式加載。漸進式加載能夠大大的提升體驗感。
8.后臺加載(異步處理)
用戶在前端執行操作后，客戶端立即給予操作成功反饋提示，然后把請求放到后臺與服務器交互，這一過程用戶是看不到的，也不需要等待，體驗是非常棒的。
例如在用微信發朋友圈時，會覺得特別流暢，即使在網絡不好的情況下，會看到你的動態立即展示在朋友圈列表，并不會提示你網絡不好，操作失敗，全部以操作成功來顯示，其實它只是將你發布的操作記錄了下來，等網絡一好就將動態上傳到服務器，從而完成發布行為，微信的點贊也是同樣的操作，你給好友點了贊，并不會提示你網絡不好，操作失敗，而是提示你點贊成功了，其實它只是將你點贊的操作記錄了下來，等網絡一好就將點贊的行為上傳到服務器，從而完成點贊行為會，給用戶帶來體驗流暢的感覺。
所以這種加載方式是需要根據具體使用場景來權衡使用的，對于一些重要的操作，建議還是使用模態的方式加載，對于一些小操作，如點贊、訂閱、關注，可采用后臺加載的方式。
9.模態加載
以上幾種方式都是采用非模態加載，不會對用戶造成干擾，用戶可以做別的事情，不需要等待加載完成，大大降低了等待的焦躁感。
模態加載對用戶干擾比較大，需要中斷用戶的其他操作，用戶只能等待加載結束，因為如果用戶執行了其他操作就會打斷正在進行的加載過程，實現不了用戶的目標。
應用：用戶執行的操作本身不能和其他操作同時進行，例如登錄，退出，應用啟動，手機支付等場景。
三、具體實施方法小結
1、能用非模態加載的盡量不要去用模態加載，如果非得用模態加載，也盡量給一個能取消的按鈕，方便用戶在不愿意等待的情況下取消操作。
2、如果加載的時間比較長，最好能告知用戶加載進度，讓用戶心理有個預期，這樣用戶更愿意等待，不會因為等待產生焦慮感，分分鐘卸載你的產品?？茖W的實驗證實，先慢后快的進度條是讓用戶心理感受上最快的設計，這是因為用戶最容易記住最后一瞬間的感覺，如果最后一瞬間，感知到了快，就覺得很順暢了。
3、數據加載本身就是很考驗用戶心態感受，所以盡量通過一些有趣的動畫來轉移用戶的注意力，營造沉浸式體驗，同時增加了趣味性，給予了產品人性化的設計。
總結
作為產品設計人員，盡量給用戶好的體驗，我們應該讓產品自己去解決問題，而不是把問題拋給用戶。在考慮人與客戶端交互的同時也要把客戶端和服務端之間的數據傳輸考慮進來，站在用戶、客戶端和服務器閉環的角度去思考產品，才能設計出體驗更好的數據加載方案。
轉自-站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
導航模式是提高可用性的捷徑。當你查看近年來最成功的交互導航設計時，顯而易見的贏家是那些完美執行基本原則的人。雖然跳出條條框框思考是一個非常好思維方式，但有些規則是你不能打破的。以下是創建出色的移動導航的四個重要原則：
簡單
首先，最重要的是，導航系統必須簡單。良好的導航應該感覺像一只無形的手，引導用戶。一種方法是根據移動用戶最有可能執行的任務來確定移動應用程序的內容和導航的優先級。
可見
正如雅各布·尼爾森（ Jakob Nielsen）所說，識別物體比記憶更容易。這意味著你應該通過使操作和選項可見來最小化用戶的記憶負擔。導航應該始終可用，而不僅僅是在我們預期用戶需要導航的時候。
明確
導航功能必須是不言而喻的。你需要以簡潔明了的方式傳遞信息。在沒有任何外部指導的情況下用戶應該一目了然的知道如何從A點轉到B點。試想一下購物車圖標，它作為一個標簽或查看項目的標識符。用戶無需考慮如何導航才能進行購買；此元素將指導他們執行適當的操作。
一致性
所有視圖的導航系統應相同。不要將導航控件放在不同頁面上的新位置。不要欺騙你的用戶，要始終保持言行一致。你的導航應該使用“最不意外的原則”。導航應該激勵用戶參與并與你所提供的內容互動。
大拇指設計法則
史蒂文·霍伯在對移動設備使用情況的研究中發現，49%的人依靠一個拇指在手機上完成任務。在下面的圖中，手機屏幕上的圖表是近似可達圖，其中顏色表示用戶可以觸及的屏幕區域，并與拇指交互。綠色表示用戶可以輕松到達的區域；黃色表示需要伸展的區域；紅色表示需要用戶改變握住設備的方式的區域。
在設計時，要考慮到你的應用程序將在多種環境中使用；即使是喜歡使用雙手握手機的人也不一定總是使用多個手指，更不用說雙手與你的用戶界面交互了。將最高層級且常用的操作放在屏幕底部非常重要。這樣，通過單手和拇指的交互即可輕松達到目標。
另一個重點是底部導航應該用于具有相同重要性的最高層級目標。是需要從應用程序中的任何位置都可以直接訪問的。
最后，也是很重要的一點，要注意點擊目標區域的大小。Microsoft 建議 你將觸摸目標區域大小設置為9平方毫米或更大（135 ppi顯示器上的48×48像素，縮放比例為1.0倍）。避免使用小于7平方毫米的觸摸目標區域。
觸摸目標區域不應小于44像素到48像素（或11毫米到13毫米），包括填充。
標簽欄
許多應用程序使用標簽欄來顯示應用程序最重要的功能。facebook只需輕觸一下就可以提供核心功能的主要部分，允許在功能之間快速切換。
底部導航設計的三個關鍵因素
導航通常是將用戶帶到他們想要去的地方的工具。對于具有相似重要性的指定目的地，這些目的地需要從應用程序中的任何位置直接訪問。好的底部導航設計應該遵循以下三個原則。
1.僅顯示最重要的目的地
避免在底部導航中使用五個以上的訪問標簽，因為TAP目標之間的距離太近。在標簽欄中放太多標簽會使人們很難點擊他們想要的標簽。而且，隨著每個額外的選項卡顯示，就會增加了應用程序的復雜性。
避免使用五個以上的目的地。
避免滾動內容
對于小屏幕來說，部分隱藏的導航似乎是一個非常好的解決方案，因為你不必擔心有限的屏幕空間，只需將導航選項放入一個可滾動的選項卡即可。但是，可滾動的內容效率較低，因為用戶必須先滾動才能看到所需的選項，因此最好盡可能避免。
該避免在選項卡欄中放置太多項目，以防止用戶滾動，然后才能單擊所需的選項。
2.明確當前位置
應用程序菜單上最常見的一個錯誤是沒有明確用戶的當前位置?！拔以谀睦铮俊笆怯脩粲龅降幕締栴}之一。用戶應該第一眼就知道如何從A點轉到B點，而不需要任何外部引導。你應該適當的使用視覺提示（圖標、標簽和顏色），這樣導航就不需要任何解釋。
圖標
底部導航應該與圖標的內容進行適當的結合。盡管有一些用戶熟悉的通用圖標，但大多數圖標代表的功能包括搜索，電子郵件，打印等。
在適用于Android的先前版本的Bloom.fm應用程序中，很難理解用戶的當前位置。
顏色
避免在底部選項卡欄中使用不同顏色的圖標和文本標簽。相反，遵循這個簡單的規則，用應用程序的主顏色為當前的底部導航（包括圖標和任何顯示的文本標簽）著色。
左：不同顏色的圖標使你的應用看起來像一棵圣誕樹。右：只使用一種原色。
這是iOS的Twitter應用程序中的底部欄菜單。消息視圖處于選中狀態。
如果底部導航欄是彩色的，請確保對當前位置的圖標和文本標簽使用黑色或白色。
左：避免將彩色圖標與彩色底部導航欄配對。右：使用黑色或白色圖標。
文本標簽
文本標簽應為導航圖標提供簡短且有意義的定義。避免使用長文本標簽，因為它們不會截斷或自動換行。
避免換行，截斷和縮小文本標簽。
菜單元素應易于理解。用戶應該能夠理解點擊元素時會發生什么。
目標尺寸
使目標區域足夠大，以使其易于點擊或單擊。要計算每個底部導航動作的寬度，請將視圖的寬度除以動作數量?；蛘撸瑢⑺械撞繉Ш絼幼髟O置為最大動作的寬度。Android建議移動設備底部導航欄的尺寸如下。
顯示了移動設備上的固定底部導航欄，單位為密度獨立像素（dp）
標簽上的微標
你可以在標簽欄圖標上顯示微標，以表明存在與該視圖或模式相關的新信息。
考慮對標簽欄圖標加微標以保持通俗易懂。
3.使導航不言而喻
良好的導航感覺就像是一只看不見的手，可以引導用戶前進。畢竟，如果人們找不到它，即使是最酷的功能或最引人注目的內容也沒有用。
行為
每個底部導航圖標必須指向目標目的地，并且不應打開菜單或其他彈出窗口。點擊底部的導航圖標可以引導用戶直接進入相關的視圖，或者刷新當前活動的視圖。不要使用標簽欄為用戶提供對當前屏幕或應用程序模式下的元素起作用的控件。如果需要提供控件，請改用工具欄。
每個底部導航圖標必須通向目標目的地。
上面的控件是工具欄而不是底部導航。
保持一致性
盡可能在各個頁面上顯示相同的選項卡。最好是你能給用戶一種視覺穩定性的感覺。
當選項卡的功能不可用時，不要刪除它。如果在某些情況下刪除了某個選項卡，但在其他情況下沒有，替換使應用程序的UI無法預測。最好的解決方案是確保所有選項卡都已啟用，但要說明為什么選項卡的內容不可用。例如，如果用戶沒有本地文件，則Dropbox應用中的“本地”選項卡將顯示一個頁面，說明如何獲取文件。
Dropbox應用的空狀態頁面
滾動時隱藏標簽欄
如果屏幕是滾動的，則當人們滾動查找新內容時，標簽欄可以隱藏，而當他們開始回到頂部時，標簽欄可以顯示。
標簽導航可以在滾動時動態消失。
視覺愉悅
避免使用橫向運動在視圖之間轉換?；顒右晥D和非活動視圖之間的過渡應使用淡入淡出動畫。
圖形圖標：創意導航
屏幕尺寸是將你的觀點傳達給用戶的主要挑戰。使用圖形圖標作為菜單元素是解決移動端屏幕空間有限問題的最有效的方法之一。圖標的圖形說明了點擊它后將會進入什么頁面，這種導航模式更加節省屏幕空間。
Google Material Design，浮動操作按鈕
Google Material Design 對這種類型的導航使用術語“浮動擦操作按鈕”。它們的區別在于浮動在UI上方的帶有圓圈的圖標，并具有運動行為。
像Evernote這樣的應用程序通過對最重要的用戶操作使用浮動操作按鈕簡化了操作流程。
Tumblr具有漂亮的圖形圖標以及適當的標簽。當你在應用程序中滑動屏幕時，這些圖標也很方便地消失。
然而，這種模式有一個明顯的缺點-浮動操作按鈕隱藏內容。從用戶體驗的角度來看，不便于用戶頻繁點擊操作
而且，許多研究人員表明，圖標難以記憶，而且效率極低。只有普遍理解的圖標才能被很好的記憶（例如，打印，關閉，播放/暫停，回復等）。這就是為什么使圖標清晰直觀*，并在圖標旁邊引入文本標簽的*重要原因。
導航通常是將用戶帶到他們想要去的地方的一種媒介。在使用應用程序時，要始終考慮用戶角色以及他們的目標。然后，定制導航以幫助他們實現這些目標。為用戶設計。一個產品對他們來說越容易使用，他們使用它的可能性就越大。
轉自：UI中國-Coldrain1
在做交互文檔之前，我們先要明白什么是交互文檔、為什么要做以及做了給誰看。
交互文檔，即交互設計說明文檔。英文 Design Requirement Document ，簡稱DRD。主要是用來承載設計思路、設計方案、信息架構、原型線框、交互說明等內容。
有些人可能對文檔這種東西比較反感，尤其是從事工作不久的朋友。其實工作得越久，越會發現文檔的重要性，它可以幫助你理清思路，并記錄下來，便于回顧。
交互文檔其實要說給誰看，其實具體情況具體分析。有的公司老板也要盯交互文檔，以及甲方爸爸、運營部門同事，都有查看的可能。
【產品經理】產品經理與交互設計師可能是溝通最多的人，產品經理主要在文檔中確認設計思路和業務流程，然后過一下頁面交互模塊。
【視覺設計】UI設計師通常最關注的是頁面交互模塊，有著產品思維和體驗思維的設計師也會仔細看一下設計思路和產品背景，以便于自己更了解產品業務邏輯和用戶心理。
【開發人員】前端的開發同事和UI設計師一樣，最關注頁面交互模塊，其他的作為提升會輔助了解。而后端開發人員關注更多的是業務邏輯、信息架構、操作流程等，這些都清晰了，他們才能輸出一份準確合格的開發文檔。
【測試人員】因為測試人員是把關產品上線的一群人，所以各個模塊、步驟都應該去了解透徹，才能提出有效的bug。
本文主要闡述以Axure軟件為撰寫工具，大家可以根據實際需求決定用什么軟件（Sketch、PPT、Word、PS、AI 等）。比如小需求可以用Sketch，快而。如果是要給甲方爸爸/大老板看的，使用PPT會讓他們更好理解。
通常，一個比較基礎、規范的交互文檔（DRD）由：文檔封面、更新日志、文檔圖例、設計背景/思路、業務流程、頁面交互、全局通用說明、廢紙簍八部分組成。當然，這不是絕對，你可以根據你的實際工作需要進行增減。
比如，如果是C端產品的話，用戶調研的結論、用戶畫像、用戶體驗地圖等等，都可以放進去給看的人一個參考。尤其是在如今這么關注用戶體驗、產品思維的一個大環境下，這些數據支撐很有力量。同時還可以幫助開發人員、界面設計人員培養產品思維、體驗思維，大家一起將產品變得更好。
其次，交互文檔的整潔與美觀也很有必要。相信在過去幾年不少人有遇到過這樣的產品經理（兼交互），他們會輸出一些有時連他們自己都看不太懂或者直接從其它競品截圖來的線框圖。當開發和界面設計的人提出質疑的時候還美其名曰線框不重要，重要的是里面的業務邏輯。。。其實用產品思維想，交互文檔就是交互設計師的產品，而看的人就是用戶，保持良好的可讀性，可謂至關重要。
交互文檔的封面如上圖，通常包括產品的名稱、Logo、版本號以及版本發布時間、所屬部門、對接負責人/對接人。
我們都知道，在產品的迭代的過程中，需求/功能是會不斷調整的。而更新日志，就是為了迭代而生。它一般由修改日期、修改內容、修改人、版本號和備注組成。如果是新增的功能或模塊，建議是要加上鏈接可直接跳轉至新增內容的，如上圖。
版本號也是同理，都應加上對應的版本鏈接，便于查看者回溯之前的內容，與當前的新版本形成對比。這一點對開發人員來說很重要，其次對于新同事深入理解產品也能起到很大的幫助。
修改日期，通常是按時間倒序排列，查看起來會比較方便。
文檔圖例，顧名思義就是關于此文檔的一些輔助說明，目的是為了讓讀者更好地理解文檔。如上圖的：操作/跳轉圖例、標簽圖例、流程圖例以及手勢操作圖例。
因為我今年對接最久的是一個B端產品的項目，所以整理了一個產品畫像，僅供參考。
業務流程圖，不是操作流程圖也不是頁面流程圖。它是產品的整體業務流程，直接和業務掛鉤，可以說是產品的核心流程。
例如淘寶APP，買家購物由始至終的流程就是它的業務流程。通常用泳道圖的形式展示，多數情況下是由產品經理繪制。
以上是我所負責產品的核心業務的流程圖。因為是B端產品，涉及角色較多，針對3個代表性角色分別進行了繪制，僅供參考。(涉及到保密協議，所有關鍵詞都去掉了)
信息架構屬于用戶體驗的結構層，是產品的骨架。一般是由產品經理或者更高層的管理人員給出大框架。除非是大的產品迭代，否則不會大改。
如果是C端產品，權限這一塊相對簡單，比較好整理的。B端產品涉及角色眾多，可能要單獨拎出來分析整理。以上僅供參考，大家具體情況具體分析。若是功能很單一的產品，交互文檔中也可省去這個模塊。
產品操作流程圖就是通過圖形化的表達形式，闡述產品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶在使用某個功能時，會產生的一系列操作和反饋的圖標。
上圖是登錄、注冊和找回密碼的操作流程圖。僅供參考。模板源文件下載，后臺回復“交互”即可。
頁面線框圖，是通過圖形化的表達形式，闡述產品在頁面層面的信息。包括：
【頁面標題】即每一個頁面的對應標題，一般就是導航欄標題
【頁面內容】以黑白為主，保證信息規整易讀
【交互說明】用標簽將其對應起來，包括交互邏輯、操作流程及反饋、元素狀態、字符限制、異常/特殊狀態、相關規則 等等
【主流程線】只需要畫出主流程線即可，千萬不可太多太雜，時刻考慮讀者的感受
以上是注冊/登錄的線框圖和詳細的交互說明。將重點內容用紅色標記，可以讓查看者一目了然更好理解文檔。
常用控件類似UIKit，通常將極具復用價值的控制整理在一起，方便及時調用。
文檔、軟件只是工具，最重要的還是要落地、實行起來才能對產品有所幫助。所以在撰寫文檔的每時每刻，都應該站在“讀者”的角度思考，他們看的時候感受會是怎樣的，會覺得很難理解嗎？
轉自-站酷
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。
藍藍設計的小編 http://www.syprn.cn