1995年， “About Face：The Essentials of User Interface Design” 《交互設計精髓》出版，提出“交互設計”一詞（Interaction Design）
美的三種模式
公認的
公認的美與基本的設計美學原則有關，
如對稱、協調、三分法則和黃金比例。這些是美觀設計的傳統基礎。心理學和進化生物學為這些公認的原則提供了許多解釋。我們的視覺系統趨于在事物中組織信息、尋找模式和建立秩序。
文化的
文化的美指的是在某個時刻從某種方面我們發現某種文化的迷人之處。
瑪麗蓮·夢露是世界上最有名的人物之一。不過，如果她現在還活著，她會不會成為美的典范就很難說了。在網上，思考點在于不同時代流行于不同群體間的各種文體風格。
主觀的
主觀的美就是你個人覺得對象具有美， 這與你個人的品味和偏好有關。
也許你覺得Quora的斯巴達美學很對你的胃口，或者也許你覺得相當無趣。
業界標榜
交互設計所涉及的學科
心理學、社會學、人機工程、用戶體驗等
以價值為中心的設計
- 誘惑，被吸引而心動，不僅僅是審美選擇
- 同理心：能夠體會到他人所想的能力
- 現代產品：功用性、可行性 、稱許性，缺一不可
- 設計方案應該具備四個特點：
- 合乎倫理（有用、貼心）
- 不造成傷害
- 改善人類環境
- 目標明確（有用、可用）
- 幫助用戶實現目標和期望
- 符合用戶場景和能力水平
- 實用（切實可行）
- 幫助設計機構實現目標
- 滿足商業和技術需求
- 優雅（高效、藝術性、能打動人）
- 代表最簡單而完整的方案
- 內在一致性（自我表現、可理解的）
- 恰當順應、調動認知與情感
- 合乎倫理（有用、貼心）
法則
- Fitts’ Law / 菲茨定律（費茨法則）
- Hick’s Law / 席克定律（希克法則）
- 神奇數字 7±2 法則
- The Law Of Proximity 接近法則
- Tesler’s Law 泰思勒定律（復雜性守恒定律）
- 新鄉重夫：防錯原則
- Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）
- Fitts’ Law / 菲茨定律（費茨法則）
- 定律內容：從一個起始位置移動到一個最終目標所需的時間由兩個參數來決定，到目標的距離和目標的大小（上圖中的 D與 W），用數學公式表達為時間 T = a + b log2(D/W+1)。
- 1954 年保羅.菲茨首先提出來的，用來預測從任意一點到目標中心位置所需時間的數學模型，在人機交互（HCI）和設計領域的影響卻最為廣泛和深遠。 新的 Windows 8 中由開始菜單到開始屏幕的轉變背后也可以看作是該定律的應用。
- 菲茨定律的啟示：
- 按鈕等可點擊對象需要合理的大小尺寸
- 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因為邊角是巨大的目標，它們無限高或無限寬，你不可能用鼠標超過它們。即不管你移動了多遠，鼠標最終會停在屏幕的邊緣，并定位到按鈕或菜單的上面。
- 出現在用戶正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因為不需要移動到屏幕的其他位置。
- Hick’s Law / 席克定律（希克法則）
- 定律內容：一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長。用數學公式表達為反應時間 T=a+b log2（n）。在人機交互中界面中選項越多，意味著用戶做出決定的時間越長。例如比起 2 個菜單，每個菜單有 5 項，用戶會更快得從有 10 項的 1 個菜單中做出選擇。
- 席克定律多應用于軟件/網站界面的菜單及子菜單的設計中，在移動設備中也比較適用。
- 神奇數字 7±2 法則
- 1956 年喬治米勒對短時記憶能力進行了定量研究，他發現人類頭腦最好的狀態能記憶含有7（±2）項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。與席克定律類似，神奇數字 7±2 法則也經常被應用在移動應用交互設計上，如應用的選項卡不會超過 5 個，如iOS的標簽欄圖標個數。
- The Law Of Proximity 接近法則
- 根據格式塔（Gestalt）心理學：當對象離得太近的時候，意識會認為它們是相關的。在交互設計中表現為一個提交按鈕會緊挨著一個文本框，因此當相互靠近的功能塊是不相關的話，就說明交互設計可能是有問題的。
- Tesler’s Law 泰思勒定律（復雜性守恒定律）
- 該定律認為每一個過程都有其固有的復雜性，存在一個臨界點，超過了這個點過程就不能再簡化了，你只能將固有的復雜性從一個地方移動到另外一個地方。如對于郵箱的設計，收件人地址是不能再簡化的，而對于發件人卻可以通過客戶端的集成來轉移它的復雜性。- 新鄉重夫：防錯原則
- 防錯原則認為大部分的意外都是由設計的疏忽，而不是人為操作疏忽。通過改變設計可以把過失降到最低。該原則最初是用于工業管理的，但在交互設計也十分適用。如在硬件設計上的 USB 插槽；而在界面交互設計中也是可以經常看到，如當使用條件沒有滿足時，常常通過使功能失效來表示（一般按鈕會變為灰色無法點擊），以避免勿按。
- 如評論功能快，在留言框沒有內容或郵箱格式不正確的時候是無法獲取驗證碼的，只有兩者都滿足了才可以。
- Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）
- 這個原理被稱為“如無必要，勿增實體”，即如有兩個功能相等的設計，那么選擇最簡單的。除非是用戶真的需要，否則不要添加功能和交互。
- 如與費茨定律接近的 Steering Law轉向定律、Gutenberg Diagram古登堡圖法則
- Fitts’ Law / 菲茨定律（費茨法則）
8.帕累托定律（80/20 原則）
9.三等分原則等
（2/3的值接近于黃金分割點）
設計源于生活
飲水思源、聯想生活的轉換。如抽屜——菜單。
要知道標準規范在哪里，什么樣才是好，什么是差的，這是本文的目的。
- 移動終端的屏幕小。App的一個頁面能展示的信息本來就非常有限，不可能像PC一樣堆滿各種不同的信息。況且，App的使用環境還非常不穩定，如走路、坐車、單手、雙手等，這些進一步限制了一個App頁面只能做一件事情。
- 參考以下思路
- 刪除隱藏
- 確定主要任務和次要任務，排序優先級
- 滿足主流的中級用戶，他們是重點，不能為了某個極客的行為就去開發一個功能
- 刪除那些可有可無的功能、多余的選項、冗余的文字、花哨的修飾，可以減輕用戶的負擔，讓用戶專心做自己想做的事。界面清清爽爽、簡簡單單，不去分散用戶的注意力
- 隱藏的功能在用戶需要的時候會出現在合適的位置。例如使用支付寶轉賬到卡，默認隱藏了到賬時間，以簡化頁面。當用戶填好卡號等信息的時候會自動出現到賬時間（ 如Adobe軟件工具欄的小三角）
- 其它措施
- 1秒鐘等待
- 轉移注意力
- 減少客戶端和服務端發生數據調用的場景
- 一次點擊
- 三級跳
等待時間
- 外面的世界很精彩，用戶不想等
- 許多研究表明，超過8秒，無法忍受
- 界限點0.1秒、1秒、8秒，研究超過8秒鐘用戶離你而去
- 如YouTube先加載框，后文字，最后圖像，減輕等待的負面情緒
- 生活中亦是，如飯店中，等待排隊，店家為客戶提供小吃、休閑游戲
- 在交互中可以應用一些小動畫，如財產類產品中的數字金額的小動畫，減少等待的焦慮情緒
方便快捷，提升可用性
要記住：懶，是人的天性。
交互設計師的天職就是將用戶從繁重的交互操作中拯救出來，提升產品的可用性，讓用戶方便快捷地完成任務。在交互設計中，應盡可能地減少額外的點擊，做到一鍵完成任務。一次點擊意在減少用戶操作次數，提高操作效率，成全人類“懶”的天性。
交互產品經常包括一些不必要的額外點擊，對于用戶而言，這些不必要的操作都是附加工作。附加工作消耗用戶的精力，又不能直接實現用戶的目標。消除附加工作，可以提升操作效率，改善產品的可用性。交互設計師只有對產品中附加工作高度敏感，才能把產品設計得更高效。
PC有全局導航和面包屑導航，這些跳轉可能都不是問題。但是在手機屏幕上是沒有這些導航的，只有左上角的返回，這就完全交代不清楚了。所以，在手機應用頁面之間的跳轉不能太多。
標簽欄、抽屜式、宮格式、列表式、輪播式、喚起式，
移動設計里的導航模式就這幾種，都是比較簡單的結構和模式。如果在移動設計里面設計了太深的信息架構，一會讓用戶迷惑，二會大大降低操作效率。所以，移動設計中常用的內容應該在3個層級以內看到
手機上能不跳轉就不跳轉，用戶不離開當前頁面，如模態對話框
基礎規范
- 從設計原則著手，制訂框架，定設計標準，如螺絲的生產，有了標準后，品控就保障了
- 有控件的視覺設計源文件
- 保證頁面基礎元素、框架的一致
- 難定義點，某些頁面的彈框出現方式不一樣
- 什么時候應該用小氣泡，什么時候該用彈框
- 對頁面中通用交互規則進行定義
- 打造一致的操作體驗
- 降低用戶的學習成本
- 最大限度地復用系統原生的交互規則
- 這套規范進一步保障了重要元素的交互行為和視覺樣式的一致性
- 交互規范和視覺規范都是死的，設計是活的
- 團隊要有一致的設計價值觀
- 知道什么樣的設計是好的
- 什么樣的設計是不好的
- 一個代表團隊設計價值觀的東西——設計原則應運而生
- 遵循標準，用于指導設計和衡量設計方案的優劣
好的規范需要執行
規范如果沒有人使用，那就是一堆文檔。
當然，為了保障產品整體的體驗，我們可以采用行政手段，強制要求團隊成員閱讀并且遵守規范文檔。這全靠每個人的記憶力和自覺性，并不能很好地達到我們想要的效果。因為每個人對同一個東西的理解和執行度都是不一樣的。
強制的方法不好，我們就得換一個角度，從每個人的利益出發，讓大家都樂意使用規范。
這個利益點就是“效率”，我們要::讓規范幫助大家提升工作效率、溝通效率。::
規范是死的，設計是活的。
設計文檔和標準控件是死的，設計思想是活的。
標準化建設的過程中一定要把握好這個平衡，不能讓規范制約了創新。建立團隊統一的設計價值觀，界定一個好的設計框架，讓設計師在一致的范圍里創造是設計規范的價值所在。所以，設計原則、規范理論基礎等的提煉和建設在規范體系里應該得到我們的重視。
不要“戴著鐐銬跳舞”
規范文檔&UIKit
規范文檔是最全的文檔，里面詳細闡述了設計原則、基礎規范，以及每個控件的樣式和使用規則。
這部分文檔需要設計師閱讀并且理解里面的規則。
UIKit則是控件樣式的集合，提供和維護最新的樣式源文件。工作中只需要復制和拖動，不必重復繪制和單獨設計，節省了大家的時間。
開發基礎控件庫
建立開發的基礎控件庫，讓各個開發都可以直接調用和配置參數，這是規范和標準化執行的終極環節。
- 開發基礎控件庫
建立開發的基礎控件庫，讓各個開發都可以直接調用和配置參數，這是規范和標準化執行的終極環節。
- 適時反饋
- 適度反饋
- 情感關懷
Siri很好的體現了三點：
- 界面中展示的信息是系統向用戶傳遞信息，用戶的操作是在向系統傳遞信息，這一來一往就是對話
- 營造和諧的人機對話，是我們提出人性化原則的目的
-
當成生活中一個可以對話的助手
幻燈片13.jpeg
人與人的交流中，對話要有反應，尊重人。程序應及時恰當的反饋能告訴用戶下一步該做什么，幫助用戶做出判斷和決定
- 為用戶的操作提供必要、積極、即時的反饋
- 根據內容的重要程度選擇合適的反饋形式
- 避免過渡反饋，以免給用戶帶來不必要的打擾
- 不要打斷用戶的意識流，避免遮擋用戶可能回去查看或操作的對象
- 對話框
- 對話框
帶有一兩句說明文字和兩個操作按鈕，用于確認和取消重要操作（比如，是否刪除內容），通常會用明顯的顏色，突出顯示可能造成損失的操作項（比如，“刪除”“不保存”）。對話框的出現，強迫用戶關注彈窗內容和操作，并屏蔽背景的所有內容不可操作，是對用戶打擾最大的反饋提示，也是最強的反饋方式。通常用戶都想趕快關掉對話框，以便接著完成被打斷的操作。所以，對話框中的文案要盡量言簡意賅，幫助用戶快速了解和做出決策 - 氣泡
也可以叫“Toast”，是一種弱化版的對話框。它就像氣泡一樣，在界面上展示短暫的時間（5秒以下），然后自動消失。它不強制用戶做任何操作和確認，所以對用戶的打擾比對話框小很多。氣泡一般用來確認用戶執行的任務狀態或者 - 按鈕
是虛擬世界隱喻現實世界的產物，是對現實世界的按鈕和開關的模擬。而現實世界中的按鈕會對用戶的操作提供實實在在的物理反饋。
為了符合用戶的心智模式，界面中的按鈕也應該為用戶的操作提供反饋，否則用戶不知道發生了什么。當用戶在屏幕上按下一個按鈕或鏈接時，也需要有狀態的改變，讓用戶知道界面已經接收到他的操作了- 小氣泡
- 多態按鈕
- 動畫
- 動畫能給用戶提供有意義的反饋，幫助用戶直觀了解操作的結果。并且不打擾用戶的操作，用戶體驗更流暢。而且精美有趣的動畫，能給用戶留下深刻印象，提升使用時的愉悅感。
- 手機購物時將商品收入購物車時的動畫
- 聲音或震動
- 聲音或震動能帶給用戶更真實的物理反饋。聲音或震動的反饋給用戶的感覺也應該是最真實和自然的。
- 虛擬鍵盤“啪啪”聲
- 短信、郵件“嗖”聲
- 拍照時“咔嚓”聲
- 恰當的聲音反饋有畫龍點睛的效果，但過多地使用可能會變成一種打擾。所以，我們不能將聲音作為主要反饋，并且要給用戶關閉提示音的權利（因為用戶所處的環境多樣，可能很吵而聽不見聲音，也可能不適合打開聲音）。
- 震動是一種更強烈的觸覺反饋，可以用來加強聲音的反饋。
- 聲音或震動能帶給用戶更真實的物理反饋。聲音或震動的反饋給用戶的感覺也應該是最真實和自然的。
- 過度反饋
- 濫用，反而打擾了用戶的體驗流程，體驗糟糕
- 情感是人對客觀事物是否滿足自己的需要而產生的態度體驗。——《心理學大辭典》
人性和情感是緊密相連、不可分割的，我們在思考人性化的時候，一定不能忘了用戶的情感需求。用戶的需求和期望得到滿足時會產生愉快、喜愛的情感；反之，就會苦惱、厭惡。所以，當用戶受挫的時候，我們要及時地給予情感上的安撫和關懷；
- 安撫和關懷
- 正向強化
- 智能服務
等待、報錯、系統繁忙等場景都會使用戶產生挫敗感。長時間的等待會讓用戶感到煩躁；犯錯誤讓用戶感到苦惱；系統繁忙甚至讓用戶感到厭惡。巧妙地處理好這些場景，降低用戶的挫敗感，就能體現設計在產品中的價值。
賦予系統人格特征，用能俗易懂的語言和虔誠的口吻，跟用戶展開“人與人”之間的對話。
強化正向情體驗，讓用戶有喜悅感，加深產品的正向情感，強化自我認同感。
一些信息，系統可以用戶記住，不需要用戶二次輸入，提升操作效率。
如輸入銀行卡號，系統自動判斷是哪家銀行。
- 對話框
品牌意識
反映品牌個性與共性，從而建立品牌知名度、美譽度、忠誠度及品牌聯想度。
處理好設計元素之間完美配合，才能達到理想的效果。
品牌色在界面設計中的使用應同時具備品牌識別性以及界面設計功能性，色彩的運用應達到信息傳遞、動作指引、交互反饋，或是強化和凸顯某一個元素的目的。
人們的大腦記憶過程主要分為3個階段：識記、保存、重現。在實際設計中，我們可以利用這一特點，更好地傳達品牌的視覺感知。
- 極簡主義（MinimaIism）
- 設計從功能出發
- 形式以滿足功能而存在，沒有功能性的修飾全部去掉
- 感官上簡約整潔，品位和思想上更為優雅
- 極簡主義設計時，
- 顏色
- 字體及大小
- 線條
- icon風格
- 留白
留白是一門想象的藝術。沒有過多的元素去干擾，用戶更容易擁有想象的空間去發揮。為了讓頁面飽滿而去做一些沒意義的信息補充是不可取的方式，留白也是有講究的。
移動端通過視覺感官來增強品牌色的引用主要有3種途徑
1.當前選中項
2.主操作按鈕
3.操作類文案信息
字體
字體如果做個性設計，會產生3個方面的影響：
增加了App的安裝包的大小
用戶在使用該App時，增加額外的學習和適用成本
個性字體與系統字體沒有統一性
建議大家采用系統字體做設計方案的產出。下面介紹一下大家經常接觸的兩大系統字體及屬性。-
iOS
- 2015開發者大會，蘋方字體，其字體具有現代感的外觀、清晰易讀的屏幕顯示效果，并同時支持簡體中文（PingFangSC）、繁體中文（PingFangTC）、香港中文（PingFangHK），蘋果公司還是很注重中國人的用戶體驗
-
Android
- 2011年4.0版本，Ice Cream Sandwich發布以來，Roboto就是Android系統的默認英文及數字體。寬度和圓度都輕微提高，從而提升了清晰度，并且看起來讓人更加愉悅。
進階知識
思源宋體：是 Google 的一個開放原始碼自由字型專桉，與 Adobe 公司合作，旨在提供一個可以涵蓋 Unicode 全部字符的多語言、全方位字型，用「Noto」這名稱來代表「No more Tofu（沒有豆腐）」，試圖消滅電腦中無法顯示罕見文字時的那些空白方塊（豆腐形狀）。
字號的大小也會降低可讀性和易讀性，
設計師應站在用戶角度去思考，
他們在閱讀時是否會覺得困難？如果你無法確定，可以多進行一些測試和對比。
在做設計時，可能我們能順利讀懂內容，對于大部分的用戶來說卻是很困難的事情。
有目的地進行層次結構劃分是非常重要的步驟。
在設計領域，層次涉及的是一些表示重要度的視覺元素排列。
要通過規模、顏色、類型等，將一些重要元素和不重要的元素類型區分開來。
不同的元素在設計中表現不同的重要性。
中文字在國際GB 2312—1980（漢字國際碼）中采用全角字符，輸入中文時，所使用標點同時應采用全角字符。這樣就與中文字占的字節數保持一致，展示出來的中文字與標點所占的間距保持統一。
半角
- 英文
-
數字
特殊字符采用半角輸入模式，其內容所使用的標點也采用半角標點。
幻燈片28.jpeg
“空格”是鍵盤里最大的一個按鍵。
如何把“空格”應用到實際的設計中，下3點經驗：
1. 中英文混排時中文與英文之間加半角空格，方便用戶在閱讀時進行區分
2. 數字與單位之間需要增加空格，方便用戶精確查閱數字（財務類軟件中，用戶對數字非常關注，數字等同于金額）。但度、百分比與數字之間無須增加空格
3. 中文之間鏈接文字需增加空格。在技術上實現鏈接時，可增大可點區域，同時給用戶傳遞可點擊感
根據消息的強弱進行消息通知的設計。
強消息通知
可以使用客戶端推送，用戶可以在手機屏幕或者手機的通知欄預覽到內容。用戶可以通過通知的新消息直達到詳情頁面或通知列表。用戶未讀的信息可以標記出未讀數字。
弱消息通知
可以在用戶打開應用后，在內容層上統一提示，告訴共有××條新消息。點擊后可查看所有消息內容。
iOS
- 在設計過程中，采用默認的字行高產出設計稿，但在視覺驗收階段，卻發現技術開發的頁面與設計稿不一致。例如：文字與圖片的間距、文字與文字間距、文字與邊框間距等都不同。
-
解決此類問題其實很簡單，文字行高采用與技術開發對等的參數產出設計稿幻燈片30.jpeg
Y=2×ceiI（X/10）+X式中：X 為字號（sketch里的字號）; Y為行高；ceiI（）為向上取整數
- 此公式方便我們在產出設計稿時，按照文字大小，對應地設置文字行高，便可以確保設計稿與技術開發的頁面中的文字行高一致了。
Android - Android由于各機型的字體不同，字體庫對手機廠商的開放，文字行高就很難找統一的規則。在實際產出設計稿時，采用字體Droid Sans FaIIback、Roboto，文字行高為系統默認，不做設置
風格
圖標風格
使用圖標網格可確保圖標設計的一致性，從而建立一套明確的圖形元素定位規則。
關鍵線的形狀
關鍵線的形狀是網格的基礎。利用這些核心形狀作為向導，即可使整個相關產品的圖標保持一致的視覺比例。
產品圖標
色彩鮮明，精致，傳遞產品的核心理念與內涵。
一致性的原則要求，系統中同樣功能的元素、控件、界面應該在樣式、交互行為上都保持一致。
控件以及組件的標準
建立控件以及組件的標準，整個規范才能完整地發揮作用。
- 系統層
- 框架層
- 臨時層
- 內容層
系統層——完全調用系統原生的控件和組件，不做任何額外的定義和設計。所有產品和頁面都應該是一致的，最大限度符合系統特性，隨著系統更新變化而變化。系統層包括狀態欄、系統通知、控制控件、系統鍵盤、手勢
框架層——用于組織頁面信息，并且起到導航作用的控件。這部分控件在符合系統體驗原則的基礎上，應該反映支付寶的品牌特點。所以框架層需要根據支付寶自身的特點定制和開發，但是它在內部應該是一致的。這部分控件包括導航欄、Tab欄、分段控件、工具欄
臨時層——頁面中臨時出現的浮層和內容，在調整符合系統交互特性的基礎上，樣式根據特點定制和開發。內部需要保持體驗的一致性。臨時層包括活動視圖、活動菜單、POP菜單、彈框、Toast、選擇器、臨時公告等
內容層——頁面中剩下的內容，跟頁面內容的特點相關，每個頁面可能都不同，是設計師發揮空間最大的部分。但是一些具有共性的控件，如列表項、按鈕、輸入框等可以抽離出來，做成標準化
一個基本思路如下：
- 選擇一種尺寸作為設計和開發基準
- 定義一套適配規則，自動適配剩下尺寸
- 特殊適配效果給出設計效果
第一步：
視覺設計階段，按寬度750px（iPhone 6）做設計稿，除圖片外所有設計元素用矢量路徑來做。設計定稿后在750px的設計稿上做標注，輸出標注圖。同時等比放大1.5倍生成寬度1125px的設計稿，在1125px的稿子里切圖。
第二步：
輸出兩個交付物給開發工程師：一個是程序用到的@3X切圖資源，另一個是寬度750px的設計標注
圖。
第三步：
開發拿到750px標注圖和@3X切圖資源，完成iPhone 6（375pt）的界面開發。此階段不能用固定寬度的方式開發界面，得用自動布局（auto layout），方便后續適配到其他尺寸。
第四步：
適配調試階段，基于iPhone 6的界面效果，分別向上、向下調試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果。
由此完成大、中、小三屏適配。
iOS
第一步：
視覺設計階段，按寬度1080px做設計稿，除圖片外所有設計元素用矢量路徑來做。設計定稿后在1080px的設計稿上做標注，輸出標注圖。同時等比放大4/3倍生成寬度1440px的設計稿，在1440px的稿子里切圖。
第二步：
輸出兩個交付物給開發工程師：一個是程序用到的@4X切圖資源，另一個是寬度1080px的設計標注圖。
第三步：
開發工程師拿到1080px標注圖和@4X切圖資源，完成1080px的界面開發。此階段不能用固定寬度的方式開發界面，得用自動布局（auto layout），方便后續適配到其他寬度尺寸。
第四步：
適配調試階段，基于1080px的界面效果，分別向上、向下調試1440px和720px及以下的界面效果。由此完成大、中、小三屏適配。
Android
這套適配規則總結起來就是：文字流式，控件彈性，圖片等比縮放，適配系數。
- 文字流式：
在不同的設備上，文字大小不變，文字顯示的區域產生變化。通常iOS5的文字顯示區域更長，一行可以展示更多的文字。
- 控件彈性：
navigation、cell、bar等適配過程中垂直方向上高度不變、水平方向寬度變化時，通過調整元素間距或元素右對齊的方式實現自適應。這樣屏幕越大，在垂直方向上可以顯示越多的內容，發揮大屏幕的優勢，如圖44所示。
- 圖片等比縮放：
當涉及插圖、banner等位圖時，這些圖片在不同設備中根據屏幕大小等比縮放，保證不變形，
- 適配系數：
同屏幕密度的適配，如6、5、4s，用到前面3個規則就可以了；跨屏幕密度的適配，如6+、6、3Gs，需要用一個適配系數進行換算以后再用前面3個規則
- 特殊適配：
有些界面通過以上規則進行適配以后，可能并不能達到設計師理想的效果。這時候需要對這個頁面做各個屏幕的設計稿，進行特殊適配。為了更好地展示效果，工作量成倍地增長。
排版
人們的閱讀習慣一般是從左到右，人的兩眼是橫著排列的，眼睛視線橫看比豎看要寬，橫看時眼和頭部轉動較小，自然省力，不易疲勞。
在實際的文字排版中，中文或英文均可以采用左對齊的方式。
數字通常采用右對齊或小數點對齊，便于對個、十、百、千位上的數字進行對比。3個數字以上，使用千分符作為分隔，便于用戶識別。
左對齊類型是最常見的形式，是指將每行文字的首字左對齊，與此同時，右側則呈現出錯位的效果。這是最容易被接受并且不太會出錯的方案，如果拿捏不定，不妨選擇左對齊。該類排列方式在結構上與人們的閱讀習慣相符，因而能使讀者在瀏覽時覺得輕松與自然。
右對齊類型是比較有自我風格的一種對齊形式，是指將每行文字尾字右對齊排列，而左側則呈現出參差不齊的狀態。左對齊和右對齊是兩組完全對立的排列方式，它們在結構與形式上都各具特色。由于右對齊排列有違人們的閱讀習慣，因此該類排列在視覺上總會帶給人以不順遂的印象，但同時也為版面增添了幾分新穎的效果。右對齊用在平面排版以及一些裝飾類的設計上比較多。不建議大篇幅的文本采取右對齊排版方式，因為右對齊在大篇幅的文章中很難起到良好的引導作用，也容易使文章的折行不自然。
居中的文本形式，是指版面中的文字要素以畫面的中心線為參照物，將段落與畫面的中心進行重合式排列。居中對齊擁有簡潔的排列結構，它也是版式設計中較常見的一種文字編排手法，
海報、請柬、品牌推廣使用居中對齊的頻率比較高。居中類型的文本可以很容易地平衡內容，并且顯得比較美觀。然而，并不建議對大篇幅的文本類型采用居中對齊的排版形式。
許多正文以左右均齊的方式進行排版，版面表現出整齊、干凈的視覺效果。相關圖片分別放置在文案的左右兩側，使版面更加具有平衡感。
在業務中，為了方便用戶更好地瀏覽，絕大多數都是左對齊。
通識性問題
1．時間
- 制定時間規范
根據產品設計需求，在前期根據場景規劃時間顯示規則，如格式是“2016-3-16”還是“2016/03/16”等。用在列表頁面、詳情頁面還是會話頁面都要提前規范好。
- 不同場景下時間格式的選擇
用戶對于時間的感知根據場景的不同會有很大的差異。
平時問“什么時候開周會”，會回答“周三”。
問“什么時候提交報告”，會回答“3月20日”。
從對話的場景中可以看出我們對時間維度的區分。因此在對時間進行設計時，一定是根據使用場景來進行時間的設計。
- 有效/失效時間
消息、卡券、紅包等都會有時效性，有的時效對用戶來說是有生效期的，與生效期相對的是失效期。
內容失效后需要處理，可能由清除或者其他功能來支持。
有的內容是沒有生效期的，但是它會變成歷史內容，歷史內容與現有的內容需要進行一定的區分。
2．數量
規范數量規則時，需考慮以下問題：
- 是否為零，為零時應該顯示還是隱藏？
- 刷新是否影響數字變化？
- 數字是否會減少，當數字減少為零時是否有反饋或界面變化？
適時友好反饋
（1）即時反饋
當用戶操作后，若有需要反饋的信息，在操作后立刻給出，反饋的區域不能距用戶的操作區域太遠，否則就會被忽略。
如果是非阻塞式的反饋，那反饋的方式要輕，不要因反饋而干擾用戶當前的任務，對用戶造成困擾。
（2）反饋效果
所有的點擊都要有明確的反饋狀態，點擊后會出現一系列的狀態變化。如有的按鈕只可以被點擊一次，用戶點擊后首先按鈕狀態會改變，其次會產生一個與點擊相關的操作結果反饋。
- 點擊狀態
- 發送狀態
按鈕點擊狀態包括開始、結束、不可點、失效、已領完、已過期等
發送狀態分兩種：
一是發送后需要較長時間返回結果的，此時發送后直接到結果頁面，結果頁面上顯示當前進度和最終結果及其時間；
二是發送后較短時間就返回結果的，此時發送后到過渡頁面，有幾秒的等待時間，然后跳轉到最終結果頁面。 - 輸入
- 音效
（1）減少輸入
在移動端輸入的成本比較高，可以通過表單、選項卡、默認填入值來減少輸入。
在社交會話中則可以通過更多的語音、圖片、視頻來減少輸入，讓用戶溝通得更輕松。
（2）輸入限制
在內容不確定多寡的輸入框內，可以采用暗文或數字的方式來幫助用戶確認當前的輸入內容有沒有超過限制。
輸入的內容一定要做長度限制，因為不只是在輸入過程中會遇到顯示的問題，在發布后也會有顯示問題。
（3）中斷時保存內容
移動環境不穩定，經常會出現中斷退出的情況。
當遇到異常情況時，可以保存用戶在中斷前輸入的內容，待環境穩定后用戶可以繼續操作。
__應用音效需要考慮其大小，配合操作使用時是否有延遲。特別需要考慮用戶當前的使用場景出現聲音是否合適。 __
設計，專注目標
::設計，就是設計生活，設計人生。::
需要用感性的右腦加理性的左腦去分析問題、解決問題，
::讓設計、生活、人生變得更加美好。::
面向目標的設計”方法。如果設計師專注于人們的目標（即人們一開始使用一種產品的原因），以及期望、態度、天 資，就能設計出讓人用起來既有效又愉快的解決方案。
人有許多特征，讓自己變得體貼。人們或多或少地也將這些特征賦予了具有交互性質的產品，
體貼的交互性質的軟件產品/(和人）所具有的特點：
- 關心用戶喜好
- 是恭順的
- 樂于助人的
- 具有常識
- 有判斷力
- 預見需求
- 盡責的
- 不會因為自己的問題增加你的負擔
- 會及時通知我們
- 是敏銳的
- 是自信的
- 不問過多的問題
- 即使失敗也不失風度
- 知道什么時候調整規則
- 承擔責任
- 能夠幫助你避免犯低級錯誤
檢查機制
設計走查表
-
場景可能包含了移動App使用的軟件系統、硬件載體、移動環境下的網絡狀態以及App實現的技術框架、版本兼容、使用時間、地點等內容。這些場景中遇到的問題是我們設計走查表里的核心骨架。
- 網絡特性
網絡環境對移動應用設計有較大的影響，如快速啟動、合理緩存、弱網環境、中斷/超時，都與網絡狀態密不可分。通過設計策略可以避免網絡環境的各種狀態對用戶體驗造成的影響。
快速啟動
應用在啟動時需要一個加載時間，為避免用戶在等待時間感到枯燥、乏味，
可采用以下3種方式。
（1）讓用戶感知到應用的啟動速度比較快
使用一張與應用相同的圖片，在用戶點擊應用時，這張圖片就顯示出來，用戶會認為這個時候應用已啟動，雖然用戶會在啟動頁面停留幾秒，但是會覺得應用加載速度比較快。
（2）作為一個產品品牌展示區
啟動頁面展示的是產品的廣告語，如支付寶的“我有我的方式”或者如犀牛的故事“犀牛故事，在故事里相遇”。
（3）作為一個廣告展示區
啟動頁面可以是產品代言人或者某個時間段的活動。如手機淘寶就經常會有這樣的啟動頁面。合理緩存
●頁面合理緩存可以讓用戶感受到應用的速度更快，不浪費流量。但是緩存不能過量，不能任何頁面內容都做緩存，那哪些頁面需要做緩存呢？一般應用首頁有比較固定的內容時需要做緩存或已有內容的頁面不需要全頁面加載，可以先展示較舊的內容然后加載出較新的內容。相比每次進入都重新加載，緩存會讓用戶有更好的體驗。-
弱網環境
（1）弱網環境下加載失敗
網絡環境不穩定容易導致加載失敗，加載時間控制在8秒內（8秒是用戶最長的等待時間，用戶在等待8秒左右時開始感到不耐煩并且想離開當前頁面），并且盡可能地采用有趣的加載來降低用戶的等待時間，加載失敗后，要給予用戶重試的機會，并且告知加載失敗的原因。
（2）弱網環境下內容展示不全
弱網環境下可能只能顯示部分內容，經常遇到的情況是文字內容顯示，而圖片無法加載出來，只出現占位圖或者是空白圖片，圖9所示為2016年新春紅包出現的占位圖。
（3）弱網無網狀態下數據傳輸/設置生效機制
如果網絡環境不穩定或者斷網，但用戶需要將內容發布出去，可以支持用戶本地發出去，本地可見。當有網絡請求時，再將內容上傳到服務端，并且讓其他用戶可見。這樣可以有效提升用戶體驗，讓用戶不受網絡環境的限制。如美拍可以在斷網的環境下緩存視頻，當有網絡時可以手動將視頻上傳上去。Facebook自動檢測網絡，有網絡后立即上傳失敗內容的設計
- 中斷、超時
●在網絡中斷時，幫助用戶保存當前的輸入內容或者瀏覽內容，當重新連接到網絡時用戶可以繼續當前的任務。若超時則給用戶提示，讓用戶停止等待，重新請求網絡或退出。
○頁面狀態
○可以用生命周期來描述一個頁面的狀態。用戶進入這個頁面，首先會看到頁面的初始化；閱讀內容的過程中會涉及頁面的刷新、加載；當同時訪問頁面的用戶數量過多時，頁面內容會被限流，用戶會在不同的時間進入頁面查看內容；當前頁面內容可能過了某個時間節點會失效，用戶不能再訪問；當一個新用戶進入這個頁面，可能當前的頁面內容為空。頁面的這些狀態需要設計師提前考慮并提出解決方案。 - 頁面初始化
啟動應用進入首頁時，可以在啟動過程中預加載首頁內容，讓用戶快速進入且有內容可預覽。頁面初始化需要配合加載策略進行。 - 頁面刷新
通過刷新可以更新當前頁面的數據。一般情況下采用用戶手動下拉刷新，下拉刷新不需要對整體頁面進行刷新，只需要拉取最新的狀態，顯示出來即可。但是如果當前頁面涉及一些數字的提醒或通知，則不需要刷新也可以展示給用戶，當用戶點擊查看時觸發刷新，則將頁面內容更新到最新的狀態。 - 頁面加載
（1）分步加載
分步加載是全頁面加載的一種方式，為了盡快地顯示頁面內容，可先加載文字內容，再加載圖片等內容。讓用戶在網速不夠快的情況下可以盡快預覽到內容。這種加載方式通常應用在用戶首次進入頁面時。
（2）懶加載
懶加載也稱為延遲加載，即在需要的時候才加載，這種加載效率低，但占用內存小。一般在頁面瀏覽過程中加載新內容時采用這種方式進行加載。
（3）智能加載
第一種策略是在產品中增加網絡判斷的機制，如果在弱網環境下，提前壓縮圖片并顯示小圖片，使其能盡量展示預覽出的內容，點擊小圖，可查看大圖。最好是可以讓用戶點擊未加載的內容后繼續加載，不需要重新刷新頁面（只針對客戶端頁面）。第二種策略是降低圖片視頻質量，點擊后可以加載高清圖片或者點擊播放視頻選擇高清模式。而在網絡環境不佳的情況下，則默認幫助用戶降低質量，減少流量的耗損。 - 頁面內容被限流
一般產品頁面是不會遇到限流的問題的，只有在活動頁面可能因為訪問量太大而遇到限流。如在支付寶的春晚發紅包過程中，預測到活動中人流量會比較大，我們提前設計了限流頁面，讓用戶有較好的體驗。 - 頁面內容為空
一般與用戶相關的頁面可能為空，如我的動態、評論等。這些頁面為空時不能不顯示，但可以在顯示上用調皮一點的文案避免空頁面顯得過于枯燥。 - 頁面內容失效
一般固定入口不會有頁面失效的狀態。非固定入口的頁面失效后，可以將入口下掉或者在用戶進入后重新刷新出可用內容。頁面內也需要考慮信息的時效性、延時、過期等問題。
頁面流程完整性
除了用抽象的流程圖來確保流程的完整性，設計師還可以通過快速回到首頁/主要頁面、讓用戶始終知道自己在哪兒、返回到原來的瀏覽位置、任務完成后跳轉這幾項設計原則來確保完整性上的體驗。
■快速回到首頁/主要頁面
用戶不管在應用的什么地方，都可以快速返回到首頁/主要頁面。這要求我們在搭建整體信息架構的時候，結構足夠扁平。并且所有的頁面流程都必須形成一個有效的閉環。
■讓用戶始終知道自己在哪兒
通過頁面標題來讓用戶確認當前的位置。
通過頁面之間跳轉的轉場動效讓用戶確認當前的位置。
用戶可以沿原路返回。
返回到原來的瀏覽位置
明確任何一個可點擊的去向，且去向是可返回的。返回問題連帶定位，從哪里去返回到哪里。特殊路徑需要定制，可能會出現連跳幾個頁面的情況，在驗收過程中需要重點注意。
■任務完成后跳轉
任務成功后，頁面跳轉后可返回到來源頁面。
任務失敗后，需提示當前狀態，并引導用戶如何查看最新的狀態。在有新結果時，通知用戶。
硬件特性
硬件特性從制定適配原則、賬戶在設備上的切換、橫豎屏顯示效果等方面來描述，看看在設計前期我們需要注意哪些問題。
■制定適配原則
■任何產品都會涉及適配問題。首先是制訂native適配方案，如顯示的文字或圖片的適配。
1）數量不變進行同比放大適配，如圖2所示，支付寶首頁適配的時候就是進行同比放大，一行數量不變。
2）同行數量增多，圖片字號大小不變。
3）避免不規則背景。在圖片的適配過程中，若圖片底部有不規則花紋，如圖3所示，因為要切一張大圖，則可能會使紅包增大，用戶打開加載時也會增加流量的耗費。
■避免不規則背景
4）不同設備適配時遮擋。通常，操作時的適配問題容易被忽略。頁面顯示的內容在喚起鍵盤時是否有遮擋的問題，怎樣解決遮擋問題？如圖4所示，在iPhone4/4s上，無論怎樣進行適配，由于頁面承載的信息過多，下面的支付渠道（用黃色框框住的地方）仍然顯示不全。但在iPhone5/5s、iPhone6/6pIus上則可以通過調整間距使內容顯示完整。
■賬戶在設備上的切換
●同一設備，不同賬戶切換
切換的新賬戶若曾經在本設備上登錄過，則幫助用戶加載展示客戶端存儲的本地內容，并且標記用戶未處理的新信息。在加載的過程中給出明確的加載狀態、內容展示。
●不同設備，同一賬戶iOS切換
同一個賬戶在不同設備上登錄時，先確定該賬戶是否支持多設備同時登錄（多點登錄）；如只支持單點登錄，則在登錄B設備時，A設備的賬戶自動被擠下線（單點登錄的安全限制），并提示用戶，設備是在何時何地登錄的，所以退出了當前的登錄狀態，圖5所示為支付寶賬戶在其他設備上登錄時出現的提示。
●若支持多點登錄，則注意內容的同步，且內容被操作后的狀態也需要同步到各個設備上。特別是同時登錄時push通知下發及同步，不能讓用戶操作重復閱讀的工作。
●如果設計的產品與優惠、紅包等相關，則要判斷設備ID，避免用戶刷優惠或紅包，對產品或活動造成影響。
●橫豎屏顯示效果
應用是否支持橫豎屏顯示先確定，如果不支持則鎖定豎向或橫向的單一方向。如果支持則要在設計的過程中考慮豎屏和橫屏兩種模式下的顯示效果。
軟件特性
軟件系統本身是很復雜的，設計師需要掌握一些與設計相關的軟件特性來幫助設計，如操作系統特性、制定多平臺的設計規范、版本兼容。
操作系統特性
進行新產品規劃初期，需要確定新產品覆蓋的系統及系統版本號。如iOS系統支持很多手勢操作，故iPhone的用戶更容易接受手勢操作。而Android因為硬件設備的差異比較大，對手勢的支持也有較大的差異，因此較為隱藏的手勢操作不適合使用。
■制定多平臺的設計規范
系統是不斷更新和進步的，一個產品如果是多平臺設計，需要制定平臺規范。比如統一的表單操作、選項卡、浮層提示、加載、刷新等，這些組控件的統一，可以有效地提高產品優化的效率，降低開發成本，同時能保證用戶體驗的一致性。圖7所示為支付寶制定的標簽統一規范。
■版本兼容
●版本覆蓋時間
版本上線后要確認一下版本在多久的時間范圍內可以覆蓋80%以上的用戶。當新版本的某些功能要配合H5活動時，這個時間顯得尤為重要。如果版本沒有發布，而活動的時間已經迫在眉睫，那這個活動可能將會面臨失敗。在跨部門合作過程中，可能因為溝通不到位產生這樣的結果。因此當有大型活動進行時，需要全力去配合。
●更新提示強弱
一般來說，用戶可以選擇不去更新版本繼續使用，但是當App產生較大BUG或存在安全隱患時，可通過不可取消更新進行強制升級
●兼容性展示
新版本的內容是可以展示在舊版本上的。用戶在低版本客戶端的會話頁面仍然能收到會話消息提示，點擊此消息，可以有效地引導用戶更新App。更新后可查看來往的具體會話內容。
愿景
交互不是單個人，單一崗位的事情，需要大家通力協作，產品經理是源頭，大家一起走，就有了康莊大道。
