1995年溅漾， “About Face：The Essentials of User Interface Design” 《交互設(shè)計精髓》出版，提出“交互設(shè)計”一詞（Interaction Design）
美的三種模式
公認的
公認的美與基本的設(shè)計美學(xué)原則有關(guān)宣虾，
如對稱、協(xié)調(diào)啄栓、三分法則和黃金比例咳燕。這些是美觀設(shè)計的傳統(tǒng)基礎(chǔ)。心理學(xué)和進化生物學(xué)為這些公認的原則提供了許多解釋茫船。我們的視覺系統(tǒng)趨于在事物中組織信息琅束、尋找模式和建立秩序。
文化的
文化的美指的是在某個時刻從某種方面我們發(fā)現(xiàn)某種文化的迷人之處算谈。
瑪麗蓮·夢露是世界上最有名的人物之一涩禀。不過，如果她現(xiàn)在還活著然眼，她會不會成為美的典范就很難說了埋泵。在網(wǎng)上，思考點在于不同時代流行于不同群體間的各種文體風(fēng)格罪治。
主觀的
主觀的美就是你個人覺得對象具有美， 這與你個人的品味和偏好有關(guān)礁蔗。
也許你覺得Quora的斯巴達美學(xué)很對你的胃口觉义，或者也許你覺得相當(dāng)無趣。
業(yè)界標(biāo)榜
交互設(shè)計所涉及的學(xué)科
心理學(xué)浴井、社會學(xué)晒骇、人機工程、用戶體驗等
以價值為中心的設(shè)計
- 誘惑磺浙，被吸引而心動洪囤，不僅僅是審美選擇
- 同理心：能夠體會到他人所想的能力
- 現(xiàn)代產(chǎn)品：功用性、可行性 撕氧、稱許性瘤缩，缺一不可
- 設(shè)計方案應(yīng)該具備四個特點：
- 合乎倫理（有用、貼心）
- 不造成傷害
- 改善人類環(huán)境
- 目標(biāo)明確（有用伦泥、可用）
- 幫助用戶實現(xiàn)目標(biāo)和期望
- 符合用戶場景和能力水平
- 實用（切實可行）
- 幫助設(shè)計機構(gòu)實現(xiàn)目標(biāo)
- 滿足商業(yè)和技術(shù)需求
- 優(yōu)雅（高效剥啤、藝術(shù)性锦溪、能打動人）
- 代表最簡單而完整的方案
- 內(nèi)在一致性（自我表現(xiàn)、可理解的）
- 恰當(dāng)順應(yīng)府怯、調(diào)動認知與情感
- 合乎倫理（有用、貼心）
法則
- Fitts’ Law / 菲茨定律（費茨法則）
- Hick’s Law / 席克定律（峡陶铮克法則）
- 神奇數(shù)字 7±2 法則
- The Law Of Proximity 接近法則
- Tesler’s Law 泰思勒定律（復(fù)雜性守恒定律）
- 新鄉(xiāng)重夫：防錯原則
- Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）
- Fitts’ Law / 菲茨定律（費茨法則）
- 定律內(nèi)容：從一個起始位置移動到一個最終目標(biāo)所需的時間由兩個參數(shù)來決定，到目標(biāo)的距離和目標(biāo)的大形（上圖中的 D與 W）则涯，用數(shù)學(xué)公式表達為時間 T = a + b log2(D/W+1)。
- 1954 年保羅.菲茨首先提出來的冲簿，用來預(yù)測從任意一點到目標(biāo)中心位置所需時間的數(shù)學(xué)模型粟判，在人機交互（HCI）和設(shè)計領(lǐng)域的影響卻最為廣泛和深遠。 新的 Windows 8 中由開始菜單到開始屏幕的轉(zhuǎn)變背后也可以看作是該定律的應(yīng)用民假。
- 菲茨定律的啟示：
- 按鈕等可點擊對象需要合理的大小尺寸
- 屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素浮入，因為邊角是巨大的目標(biāo)，它們無限高或無限寬羊异，你不可能用鼠標(biāo)超過它們事秀。即不管你移動了多遠，鼠標(biāo)最終會停在屏幕的邊緣野舶，并定位到按鈕或菜單的上面易迹。
- 出現(xiàn)在用戶正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因為不需要移動到屏幕的其他位置平道。
- Hick’s Law / 席克定律（隙糜克法則）
- 定律內(nèi)容：一個人面臨的選擇（n）越多，所需要作出決定的時間（T）就越長一屋。用數(shù)學(xué)公式表達為反應(yīng)時間 T=a+b log2（n）窘疮。在人機交互中界面中選項越多，意味著用戶做出決定的時間越長冀墨。例如比起 2 個菜單闸衫，每個菜單有 5 項，用戶會更快得從有 10 項的 1 個菜單中做出選擇诽嘉。
- 席克定律多應(yīng)用于軟件/網(wǎng)站界面的菜單及子菜單的設(shè)計中蔚出，在移動設(shè)備中也比較適用。
- 神奇數(shù)字 7±2 法則
- 1956 年喬治米勒對短時記憶能力進行了定量研究虫腋，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項信息塊骄酗，在記憶了 5-9 項信息后人類的頭腦就開始出錯。與席克定律類似悦冀，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動應(yīng)用交互設(shè)計上趋翻，如應(yīng)用的選項卡不會超過 5 個，如iOS的標(biāo)簽欄圖標(biāo)個數(shù)盒蟆。
- The Law Of Proximity 接近法則
- 根據(jù)格式塔（Gestalt）心理學(xué)：當(dāng)對象離得太近的時候嘿歌，意識會認為它們是相關(guān)的掸掏。在交互設(shè)計中表現(xiàn)為一個提交按鈕會緊挨著一個文本框，因此當(dāng)相互靠近的功能塊是不相關(guān)的話宙帝，就說明交互設(shè)計可能是有問題的丧凤。
- Tesler’s Law 泰思勒定律（復(fù)雜性守恒定律）
- 該定律認為每一個過程都有其固有的復(fù)雜性，存在一個臨界點步脓，超過了這個點過程就不能再簡化了愿待，你只能將固有的復(fù)雜性從一個地方移動到另外一個地方。如對于郵箱的設(shè)計靴患，收件人地址是不能再簡化的仍侥，而對于發(fā)件人卻可以通過客戶端的集成來轉(zhuǎn)移它的復(fù)雜性。- 新鄉(xiāng)重夫：防錯原則
- 防錯原則認為大部分的意外都是由設(shè)計的疏忽鸳君，而不是人為操作疏忽农渊。通過改變設(shè)計可以把過失降到最低。該原則最初是用于工業(yè)管理的或颊，但在交互設(shè)計也十分適用砸紊。如在硬件設(shè)計上的 USB 插槽；而在界面交互設(shè)計中也是可以經(jīng)炒烟簦看到醉顽，如當(dāng)使用條件沒有滿足時，常常通過使功能失效來表示（一般按鈕會變?yōu)榛疑珶o法點擊）平挑，以避免勿按游添。
- 如評論功能快，在留言框沒有內(nèi)容或郵箱格式不正確的時候是無法獲取驗證碼的通熄，只有兩者都滿足了才可以唆涝。
- Occam’s Razor 奧卡姆剃刀原理（簡單有效原理）
- 這個原理被稱為“如無必要，勿增實體”唇辨，即如有兩個功能相等的設(shè)計石抡，那么選擇最簡單的。除非是用戶真的需要助泽，否則不要添加功能和交互。
- 如與費茨定律接近的 Steering Law轉(zhuǎn)向定律嚎京、Gutenberg Diagram古登堡圖法則
- Fitts’ Law / 菲茨定律（費茨法則）
8.帕累托定律（80/20 原則）
9.三等分原則等
（2/3的值接近于黃金分割點）
設(shè)計源于生活
飲水思源、聯(lián)想生活的轉(zhuǎn)換。如抽屜——菜單雀鹃。
要知道標(biāo)準(zhǔn)規(guī)范在哪里舷暮，什么樣才是好，什么是差的帕涌，這是本文的目的摄凡。
- 移動終端的屏幕小续徽。App的一個頁面能展示的信息本來就非常有限，不可能像PC一樣堆滿各種不同的信息亲澡。況且钦扭，App的使用環(huán)境還非常不穩(wěn)定，如走路床绪、坐車客情、單手、雙手等癞己，這些進一步限制了一個App頁面只能做一件事情膀斋。
- 參考以下思路
- 刪除隱藏
- 確定主要任務(wù)和次要任務(wù)，排序優(yōu)先級
- 滿足主流的中級用戶痹雅，他們是重點仰担，不能為了某個極客的行為就去開發(fā)一個功能
- 刪除那些可有可無的功能、多余的選項绩社、冗余的文字摔蓝、花哨的修飾，可以減輕用戶的負擔(dān)铃将，讓用戶專心做自己想做的事项鬼。界面清清爽爽、簡簡單單劲阎，不去分散用戶的注意力
- 隱藏的功能在用戶需要的時候會出現(xiàn)在合適的位置绘盟。例如使用支付寶轉(zhuǎn)賬到卡，默認隱藏了到賬時間悯仙，以簡化頁面龄毡。當(dāng)用戶填好卡號等信息的時候會自動出現(xiàn)到賬時間（ 如Adobe軟件工具欄的小三角）
- 其它措施
- 1秒鐘等待
- 轉(zhuǎn)移注意力
- 減少客戶端和服務(wù)端發(fā)生數(shù)據(jù)調(diào)用的場景
- 一次點擊
- 三級跳
等待時間
- 外面的世界很精彩，用戶不想等
- 許多研究表明锡垄，超過8秒沦零，無法忍受
- 界限點0.1秒、1秒货岭、8秒路操，研究超過8秒鐘用戶離你而去
- 如YouTube先加載框，后文字千贯，最后圖像屯仗，減輕等待的負面情緒
- 生活中亦是，如飯店中搔谴，等待排隊魁袜，店家為客戶提供小吃、休閑游戲
- 在交互中可以應(yīng)用一些小動畫，如財產(chǎn)類產(chǎn)品中的數(shù)字金額的小動畫峰弹，減少等待的焦慮情緒
方便快捷店量，提升可用性
要記住：懶鞠呈，是人的天性融师。
交互設(shè)計師的天職就是將用戶從繁重的交互操作中拯救出來，提升產(chǎn)品的可用性粟按，讓用戶方便快捷地完成任務(wù)诬滩。在交互設(shè)計中，應(yīng)盡可能地減少額外的點擊灭将，做到一鍵完成任務(wù)疼鸟。一次點擊意在減少用戶操作次數(shù)，提高操作效率庙曙，成全人類“懶”的天性空镜。
交互產(chǎn)品經(jīng)常包括一些不必要的額外點擊，對于用戶而言捌朴，這些不必要的操作都是附加工作吴攒。附加工作消耗用戶的精力，又不能直接實現(xiàn)用戶的目標(biāo)砂蔽。消除附加工作洼怔，可以提升操作效率，改善產(chǎn)品的可用性左驾。交互設(shè)計師只有對產(chǎn)品中附加工作高度敏感镣隶，才能把產(chǎn)品設(shè)計得更高效。
PC有全局導(dǎo)航和面包屑導(dǎo)航诡右，這些跳轉(zhuǎn)可能都不是問題安岂。但是在手機屏幕上是沒有這些導(dǎo)航的，只有左上角的返回帆吻，這就完全交代不清楚了域那。所以，在手機應(yīng)用頁面之間的跳轉(zhuǎn)不能太多猜煮。
標(biāo)簽欄次员、抽屜式、宮格式王带、列表式淑蔚、輪播式、喚起式辫秧，
移動設(shè)計里的導(dǎo)航模式就這幾種，都是比較簡單的結(jié)構(gòu)和模式被丧。如果在移動設(shè)計里面設(shè)計了太深的信息架構(gòu)盟戏，一會讓用戶迷惑绪妹，二會大大降低操作效率。所以柿究，移動設(shè)計中常用的內(nèi)容應(yīng)該在3個層級以內(nèi)看到
手機上能不跳轉(zhuǎn)就不跳轉(zhuǎn)邮旷，用戶不離開當(dāng)前頁面，如模態(tài)對話框
基礎(chǔ)規(guī)范
- 從設(shè)計原則著手蝇摸，制訂框架婶肩，定設(shè)計標(biāo)準(zhǔn)，如螺絲的生產(chǎn)貌夕，有了標(biāo)準(zhǔn)后律歼，品控就保障了
- 有控件的視覺設(shè)計源文件
- 保證頁面基礎(chǔ)元素、框架的一致
- 難定義點啡专，某些頁面的彈框出現(xiàn)方式不一樣
- 什么時候應(yīng)該用小氣泡险毁，什么時候該用彈框
- 對頁面中通用交互規(guī)則進行定義
- 打造一致的操作體驗
- 降低用戶的學(xué)習(xí)成本
- 最大限度地復(fù)用系統(tǒng)原生的交互規(guī)則
- 這套規(guī)范進一步保障了重要元素的交互行為和視覺樣式的一致性
- 交互規(guī)范和視覺規(guī)范都是死的，設(shè)計是活的
- 團隊要有一致的設(shè)計價值觀
- 知道什么樣的設(shè)計是好的
- 什么樣的設(shè)計是不好的
- 一個代表團隊設(shè)計價值觀的東西——設(shè)計原則應(yīng)運而生
- 遵循標(biāo)準(zhǔn)们童，用于指導(dǎo)設(shè)計和衡量設(shè)計方案的優(yōu)劣
好的規(guī)范需要執(zhí)行
規(guī)范如果沒有人使用畔况，那就是一堆文檔。
當(dāng)然慧库，為了保障產(chǎn)品整體的體驗跷跪，我們可以采用行政手段，強制要求團隊成員閱讀并且遵守規(guī)范文檔齐板。這全靠每個人的記憶力和自覺性吵瞻，并不能很好地達到我們想要的效果。因為每個人對同一個東西的理解和執(zhí)行度都是不一樣的覆积。
強制的方法不好听皿，我們就得換一個角度，從每個人的利益出發(fā)宽档，讓大家都樂意使用規(guī)范尉姨。
這個利益點就是“效率”，我們要::讓規(guī)范幫助大家提升工作效率吗冤、溝通效率又厉。::
規(guī)范是死的，設(shè)計是活的椎瘟。
設(shè)計文檔和標(biāo)準(zhǔn)控件是死的覆致，設(shè)計思想是活的。
標(biāo)準(zhǔn)化建設(shè)的過程中一定要把握好這個平衡肺蔚，不能讓規(guī)范制約了創(chuàng)新煌妈。建立團隊統(tǒng)一的設(shè)計價值觀，界定一個好的設(shè)計框架，讓設(shè)計師在一致的范圍里創(chuàng)造是設(shè)計規(guī)范的價值所在璧诵。所以汰蜘，設(shè)計原則、規(guī)范理論基礎(chǔ)等的提煉和建設(shè)在規(guī)范體系里應(yīng)該得到我們的重視之宿。
不要“戴著鐐銬跳舞”
規(guī)范文檔&UIKit
規(guī)范文檔是最全的文檔族操，里面詳細闡述了設(shè)計原則、基礎(chǔ)規(guī)范比被，以及每個控件的樣式和使用規(guī)則色难。
這部分文檔需要設(shè)計師閱讀并且理解里面的規(guī)則。
UIKit則是控件樣式的集合等缀，提供和維護最新的樣式源文件枷莉。工作中只需要復(fù)制和拖動，不必重復(fù)繪制和單獨設(shè)計项滑，節(jié)省了大家的時間依沮。
開發(fā)基礎(chǔ)控件庫
建立開發(fā)的基礎(chǔ)控件庫，讓各個開發(fā)都可以直接調(diào)用和配置參數(shù)枪狂，這是規(guī)范和標(biāo)準(zhǔn)化執(zhí)行的終極環(huán)節(jié)危喉。
- 開發(fā)基礎(chǔ)控件庫
建立開發(fā)的基礎(chǔ)控件庫，讓各個開發(fā)都可以直接調(diào)用和配置參數(shù)州疾，這是規(guī)范和標(biāo)準(zhǔn)化執(zhí)行的終極環(huán)節(jié)辜限。
- 適時反饋
- 適度反饋
- 情感關(guān)懷
Siri很好的體現(xiàn)了三點：
- 界面中展示的信息是系統(tǒng)向用戶傳遞信息，用戶的操作是在向系統(tǒng)傳遞信息严蓖，這一來一往就是對話
- 營造和諧的人機對話薄嫡，是我們提出人性化原則的目的
-
當(dāng)成生活中一個可以對話的助手
幻燈片13.jpeg
人與人的交流中，對話要有反應(yīng)颗胡，尊重人毫深。程序應(yīng)及時恰當(dāng)?shù)姆答伳芨嬖V用戶下一步該做什么，幫助用戶做出判斷和決定
- 為用戶的操作提供必要毒姨、積極哑蔫、即時的反饋
- 根據(jù)內(nèi)容的重要程度選擇合適的反饋形式
- 避免過渡反饋，以免給用戶帶來不必要的打擾
- 不要打斷用戶的意識流弧呐，避免遮擋用戶可能回去查看或操作的對象
- 對話框
- 對話框
帶有一兩句說明文字和兩個操作按鈕闸迷，用于確認和取消重要操作（比如，是否刪除內(nèi)容）俘枫，通常會用明顯的顏色腥沽，突出顯示可能造成損失的操作項（比如，“刪除”“不保存”）鸠蚪。對話框的出現(xiàn)今阳，強迫用戶關(guān)注彈窗內(nèi)容和操作师溅，并屏蔽背景的所有內(nèi)容不可操作，是對用戶打擾最大的反饋提示盾舌，也是最強的反饋方式险胰。通常用戶都想趕快關(guān)掉對話框，以便接著完成被打斷的操作矿筝。所以，對話框中的文案要盡量言簡意賅棚贾，幫助用戶快速了解和做出決策 - 氣泡
也可以叫“Toast”窖维，是一種弱化版的對話框。它就像氣泡一樣妙痹，在界面上展示短暫的時間（5秒以下）铸史，然后自動消失。它不強制用戶做任何操作和確認怯伊，所以對用戶的打擾比對話框小很多琳轿。氣泡一般用來確認用戶執(zhí)行的任務(wù)狀態(tài)或者 - 按鈕
是虛擬世界隱喻現(xiàn)實世界的產(chǎn)物，是對現(xiàn)實世界的按鈕和開關(guān)的模擬耿芹。而現(xiàn)實世界中的按鈕會對用戶的操作提供實實在在的物理反饋崭篡。
為了符合用戶的心智模式，界面中的按鈕也應(yīng)該為用戶的操作提供反饋吧秕，否則用戶不知道發(fā)生了什么琉闪。當(dāng)用戶在屏幕上按下一個按鈕或鏈接時，也需要有狀態(tài)的改變砸彬，讓用戶知道界面已經(jīng)接收到他的操作了- 小氣泡
- 多態(tài)按鈕
- 動畫
- 動畫能給用戶提供有意義的反饋颠毙，幫助用戶直觀了解操作的結(jié)果。并且不打擾用戶的操作砂碉，用戶體驗更流暢蛀蜜。而且精美有趣的動畫，能給用戶留下深刻印象增蹭，提升使用時的愉悅感滴某。
- 手機購物時將商品收入購物車時的動畫
- 聲音或震動
- 聲音或震動能帶給用戶更真實的物理反饋。聲音或震動的反饋給用戶的感覺也應(yīng)該是最真實和自然的沪铭。
- 虛擬鍵盤“啪啪”聲
- 短信壮池、郵件“嗖”聲
- 拍照時“咔嚓”聲
- 恰當(dāng)?shù)穆曇舴答佊挟孆堻c睛的效果，但過多地使用可能會變成一種打擾杀怠。所以椰憋，我們不能將聲音作為主要反饋，并且要給用戶關(guān)閉提示音的權(quán)利（因為用戶所處的環(huán)境多樣赔退，可能很吵而聽不見聲音橙依，也可能不適合打開聲音）证舟。
- 震動是一種更強烈的觸覺反饋，可以用來加強聲音的反饋窗骑。
- 聲音或震動能帶給用戶更真實的物理反饋。聲音或震動的反饋給用戶的感覺也應(yīng)該是最真實和自然的沪铭。
- 過度反饋
- 濫用女责，反而打擾了用戶的體驗流程，體驗糟糕
- 情感是人對客觀事物是否滿足自己的需要而產(chǎn)生的態(tài)度體驗创译〉种——《心理學(xué)大辭典》
人性和情感是緊密相連、不可分割的软族，我們在思考人性化的時候敦冬，一定不能忘了用戶的情感需求删豺。用戶的需求和期望得到滿足時會產(chǎn)生愉快雹锣、喜愛的情感耳高；反之，就會苦惱颗祝、厭惡浊闪。所以，當(dāng)用戶受挫的時候螺戳，我們要及時地給予情感上的安撫和關(guān)懷搁宾；
- 安撫和關(guān)懷
- 正向強化
- 智能服務(wù)
等待、報錯倔幼、系統(tǒng)繁忙等場景都會使用戶產(chǎn)生挫敗感猛铅。長時間的等待會讓用戶感到煩躁；犯錯誤讓用戶感到苦惱凤藏；系統(tǒng)繁忙甚至讓用戶感到厭惡奸忽。巧妙地處理好這些場景，降低用戶的挫敗感揖庄，就能體現(xiàn)設(shè)計在產(chǎn)品中的價值栗菜。
賦予系統(tǒng)人格特征，用能俗易懂的語言和虔誠的口吻蹄梢，跟用戶展開“人與人”之間的對話疙筹。
強化正向情體驗，讓用戶有喜悅感禁炒，加深產(chǎn)品的正向情感而咆，強化自我認同感。
一些信息幕袱，系統(tǒng)可以用戶記住暴备，不需要用戶二次輸入，提升操作效率们豌。
如輸入銀行卡號涯捻，系統(tǒng)自動判斷是哪家銀行浅妆。
- 對話框
品牌意識
反映品牌個性與共性，從而建立品牌知名度障癌、美譽度凌外、忠誠度及品牌聯(lián)想度。
處理好設(shè)計元素之間完美配合涛浙，才能達到理想的效果康辑。
品牌色在界面設(shè)計中的使用應(yīng)同時具備品牌識別性以及界面設(shè)計功能性，色彩的運用應(yīng)達到信息傳遞轿亮、動作指引晾捏、交互反饋，或是強化和凸顯某一個元素的目的哀托。
人們的大腦記憶過程主要分為3個階段：識記、保存劳秋、重現(xiàn)仓手。在實際設(shè)計中，我們可以利用這一特點玻淑，更好地傳達品牌的視覺感知嗽冒。
- 極簡主義（MinimaIism）
- 設(shè)計從功能出發(fā)
- 形式以滿足功能而存在，沒有功能性的修飾全部去掉
- 感官上簡約整潔补履，品位和思想上更為優(yōu)雅
- 極簡主義設(shè)計時添坊，
- 顏色
- 字體及大小
- 線條
- icon風(fēng)格
- 留白
留白是一門想象的藝術(shù)。沒有過多的元素去干擾箫锤，用戶更容易擁有想象的空間去發(fā)揮贬蛙。為了讓頁面飽滿而去做一些沒意義的信息補充是不可取的方式，留白也是有講究的谚攒。
移動端通過視覺感官來增強品牌色的引用主要有3種途徑
1.當(dāng)前選中項
2.主操作按鈕
3.操作類文案信息
字體
字體如果做個性設(shè)計阳准，會產(chǎn)生3個方面的影響：
增加了App的安裝包的大小
用戶在使用該App時，增加額外的學(xué)習(xí)和適用成本
個性字體與系統(tǒng)字體沒有統(tǒng)一性
建議大家采用系統(tǒng)字體做設(shè)計方案的產(chǎn)出馏臭。下面介紹一下大家經(jīng)常接觸的兩大系統(tǒng)字體及屬性野蝇。-
iOS
- 2015開發(fā)者大會，蘋方字體括儒，其字體具有現(xiàn)代感的外觀绕沈、清晰易讀的屏幕顯示效果，并同時支持簡體中文（PingFangSC）帮寻、繁體中文（PingFangTC）乍狐、香港中文（PingFangHK），蘋果公司還是很注重中國人的用戶體驗
-
Android
- 2011年4.0版本固逗，Ice Cream Sandwich發(fā)布以來澜躺，Roboto就是Android系統(tǒng)的默認英文及數(shù)字體蝉稳。寬度和圓度都輕微提高，從而提升了清晰度掘鄙，并且看起來讓人更加愉悅耘戚。
進階知識
思源宋體：是 Google 的一個開放原始碼自由字型專桉，與 Adobe 公司合作操漠，旨在提供一個可以涵蓋 Unicode 全部字符的多語言收津、全方位字型，用「Noto」這名稱來代表「No more Tofu（沒有豆腐）」浊伙，試圖消滅電腦中無法顯示罕見文字時的那些空白方塊（豆腐形狀）撞秋。
字號的大小也會降低可讀性和易讀性，
設(shè)計師應(yīng)站在用戶角度去思考嚣鄙，
他們在閱讀時是否會覺得困難吻贿？如果你無法確定，可以多進行一些測試和對比哑子。
在做設(shè)計時舅列，可能我們能順利讀懂內(nèi)容，對于大部分的用戶來說卻是很困難的事情卧蜓。
有目的地進行層次結(jié)構(gòu)劃分是非常重要的步驟帐要。
在設(shè)計領(lǐng)域，層次涉及的是一些表示重要度的視覺元素排列弥奸。
要通過規(guī)模榨惠、顏色、類型等盛霎，將一些重要元素和不重要的元素類型區(qū)分開來赠橙。
不同的元素在設(shè)計中表現(xiàn)不同的重要性。
中文字在國際GB 2312—1980（漢字國際碼）中采用全角字符愤炸，輸入中文時简烤，所使用標(biāo)點同時應(yīng)采用全角字符。這樣就與中文字占的字節(jié)數(shù)保持一致摇幻，展示出來的中文字與標(biāo)點所占的間距保持統(tǒng)一横侦。
半角
- 英文
-
數(shù)字
特殊字符采用半角輸入模式，其內(nèi)容所使用的標(biāo)點也采用半角標(biāo)點绰姻。
幻燈片28.jpeg
“空格”是鍵盤里最大的一個按鍵枉侧。
如何把“空格”應(yīng)用到實際的設(shè)計中，下3點經(jīng)驗：
1. 中英文混排時中文與英文之間加半角空格狂芋，方便用戶在閱讀時進行區(qū)分
2. 數(shù)字與單位之間需要增加空格榨馁，方便用戶精確查閱數(shù)字（財務(wù)類軟件中，用戶對數(shù)字非常關(guān)注帜矾，數(shù)字等同于金額）翼虫。但度屑柔、百分比與數(shù)字之間無須增加空格
3. 中文之間鏈接文字需增加空格。在技術(shù)上實現(xiàn)鏈接時珍剑，可增大可點區(qū)域掸宛，同時給用戶傳遞可點擊感
根據(jù)消息的強弱進行消息通知的設(shè)計。
強消息通知
可以使用客戶端推送招拙，用戶可以在手機屏幕或者手機的通知欄預(yù)覽到內(nèi)容唧瘾。用戶可以通過通知的新消息直達到詳情頁面或通知列表。用戶未讀的信息可以標(biāo)記出未讀數(shù)字别凤。
弱消息通知
可以在用戶打開應(yīng)用后饰序，在內(nèi)容層上統(tǒng)一提示，告訴共有××條新消息规哪。點擊后可查看所有消息內(nèi)容求豫。
iOS
- 在設(shè)計過程中，采用默認的字行高產(chǎn)出設(shè)計稿诉稍，但在視覺驗收階段蝠嘉，卻發(fā)現(xiàn)技術(shù)開發(fā)的頁面與設(shè)計稿不一致。例如：文字與圖片的間距均唉、文字與文字間距、文字與邊框間距等都不同肚菠。
-
解決此類問題其實很簡單舔箭，文字行高采用與技術(shù)開發(fā)對等的參數(shù)產(chǎn)出設(shè)計稿幻燈片30.jpeg
Y=2×ceiI（X/10）+X式中：X 為字號（sketch里的字號）; Y為行高；ceiI（）為向上取整數(shù)
- 此公式方便我們在產(chǎn)出設(shè)計稿時蚊逢，按照文字大小层扶，對應(yīng)地設(shè)置文字行高，便可以確保設(shè)計稿與技術(shù)開發(fā)的頁面中的文字行高一致了烙荷。
Android - Android由于各機型的字體不同镜会，字體庫對手機廠商的開放，文字行高就很難找統(tǒng)一的規(guī)則终抽。在實際產(chǎn)出設(shè)計稿時戳表，采用字體Droid Sans FaIIback、Roboto昼伴，文字行高為系統(tǒng)默認匾旭，不做設(shè)置
風(fēng)格
圖標(biāo)風(fēng)格
使用圖標(biāo)網(wǎng)格可確保圖標(biāo)設(shè)計的一致性，從而建立一套明確的圖形元素定位規(guī)則圃郊。
關(guān)鍵線的形狀
關(guān)鍵線的形狀是網(wǎng)格的基礎(chǔ)价涝。利用這些核心形狀作為向?qū)В纯墒拐麄€相關(guān)產(chǎn)品的圖標(biāo)保持一致的視覺比例持舆。
產(chǎn)品圖標(biāo)
色彩鮮明色瘩，精致伪窖，傳遞產(chǎn)品的核心理念與內(nèi)涵。
一致性的原則要求居兆，系統(tǒng)中同樣功能的元素覆山、控件、界面應(yīng)該在樣式史辙、交互行為上都保持一致汹买。
控件以及組件的標(biāo)準(zhǔn)
建立控件以及組件的標(biāo)準(zhǔn)，整個規(guī)范才能完整地發(fā)揮作用聊倔。
- 系統(tǒng)層
- 框架層
- 臨時層
- 內(nèi)容層
系統(tǒng)層——完全調(diào)用系統(tǒng)原生的控件和組件晦毙，不做任何額外的定義和設(shè)計。所有產(chǎn)品和頁面都應(yīng)該是一致的耙蔑，最大限度符合系統(tǒng)特性见妒，隨著系統(tǒng)更新變化而變化。系統(tǒng)層包括狀態(tài)欄甸陌、系統(tǒng)通知须揣、控制控件、系統(tǒng)鍵盤钱豁、手勢
框架層——用于組織頁面信息耻卡，并且起到導(dǎo)航作用的控件。這部分控件在符合系統(tǒng)體驗原則的基礎(chǔ)上牲尺，應(yīng)該反映支付寶的品牌特點卵酪。所以框架層需要根據(jù)支付寶自身的特點定制和開發(fā)，但是它在內(nèi)部應(yīng)該是一致的谤碳。這部分控件包括導(dǎo)航欄溃卡、Tab欄、分段控件蜒简、工具欄
臨時層——頁面中臨時出現(xiàn)的浮層和內(nèi)容瘸羡，在調(diào)整符合系統(tǒng)交互特性的基礎(chǔ)上，樣式根據(jù)特點定制和開發(fā)搓茬。內(nèi)部需要保持體驗的一致性犹赖。臨時層包括活動視圖、活動菜單卷仑、POP菜單冷尉、彈框、Toast系枪、選擇器雀哨、臨時公告等
內(nèi)容層——頁面中剩下的內(nèi)容，跟頁面內(nèi)容的特點相關(guān)，每個頁面可能都不同雾棺，是設(shè)計師發(fā)揮空間最大的部分膊夹。但是一些具有共性的控件，如列表項捌浩、按鈕放刨、輸入框等可以抽離出來，做成標(biāo)準(zhǔn)化
一個基本思路如下：
- 選擇一種尺寸作為設(shè)計和開發(fā)基準(zhǔn)
- 定義一套適配規(guī)則尸饺，自動適配剩下尺寸
- 特殊適配效果給出設(shè)計效果
第一步：
視覺設(shè)計階段进统，按寬度750px（iPhone 6）做設(shè)計稿，除圖片外所有設(shè)計元素用矢量路徑來做浪听。設(shè)計定稿后在750px的設(shè)計稿上做標(biāo)注螟碎，輸出標(biāo)注圖。同時等比放大1.5倍生成寬度1125px的設(shè)計稿迹栓，在1125px的稿子里切圖掉分。
第二步：
輸出兩個交付物給開發(fā)工程師：一個是程序用到的@3X切圖資源，另一個是寬度750px的設(shè)計標(biāo)注
圖克伊。
第三步：
開發(fā)拿到750px標(biāo)注圖和@3X切圖資源酥郭，完成iPhone 6（375pt）的界面開發(fā)。此階段不能用固定寬度的方式開發(fā)界面愿吹，得用自動布局（auto layout）不从，方便后續(xù)適配到其他尺寸。
第四步：
適配調(diào)試階段犁跪，基于iPhone 6的界面效果椿息，分別向上、向下調(diào)試iPhone 6 plus（414pt）和iPhone 5S及以下（320pt）的界面效果耘拇。
由此完成大撵颊、中宇攻、小三屏適配惫叛。
iOS
第一步：
視覺設(shè)計階段，按寬度1080px做設(shè)計稿逞刷，除圖片外所有設(shè)計元素用矢量路徑來做嘉涌。設(shè)計定稿后在1080px的設(shè)計稿上做標(biāo)注，輸出標(biāo)注圖夸浅。同時等比放大4/3倍生成寬度1440px的設(shè)計稿仑最，在1440px的稿子里切圖。
第二步：
輸出兩個交付物給開發(fā)工程師：一個是程序用到的@4X切圖資源帆喇，另一個是寬度1080px的設(shè)計標(biāo)注圖警医。
第三步：
開發(fā)工程師拿到1080px標(biāo)注圖和@4X切圖資源，完成1080px的界面開發(fā)。此階段不能用固定寬度的方式開發(fā)界面预皇，得用自動布局（auto layout）侈玄，方便后續(xù)適配到其他寬度尺寸柱查。
第四步：
適配調(diào)試階段梯码，基于1080px的界面效果荠卷，分別向上偎痛、向下調(diào)試1440px和720px及以下的界面效果竿报。由此完成大航背、中庞萍、小三屏適配嗤栓。
Android
這套適配規(guī)則總結(jié)起來就是：文字流式爬橡，控件彈性治唤，圖片等比縮放，適配系數(shù)堤尾。
- 文字流式：
在不同的設(shè)備上肝劲，文字大小不變，文字顯示的區(qū)域產(chǎn)生變化郭宝。通常iOS5的文字顯示區(qū)域更長辞槐，一行可以展示更多的文字。
- 控件彈性：
navigation粘室、cell榄檬、bar等適配過程中垂直方向上高度不變、水平方向?qū)挾茸兓瘯r衔统，通過調(diào)整元素間距或元素右對齊的方式實現(xiàn)自適應(yīng)鹿榜。這樣屏幕越大，在垂直方向上可以顯示越多的內(nèi)容锦爵，發(fā)揮大屏幕的優(yōu)勢舱殿，如圖44所示。
- 圖片等比縮放：
當(dāng)涉及插圖险掀、banner等位圖時沪袭，這些圖片在不同設(shè)備中根據(jù)屏幕大小等比縮放，保證不變形樟氢，
- 適配系數(shù)：
同屏幕密度的適配冈绊，如6、5埠啃、4s死宣，用到前面3個規(guī)則就可以了；跨屏幕密度的適配碴开，如6+毅该、6博秫、3Gs，需要用一個適配系數(shù)進行換算以后再用前面3個規(guī)則
- 特殊適配：
有些界面通過以上規(guī)則進行適配以后眶掌，可能并不能達到設(shè)計師理想的效果台盯。這時候需要對這個頁面做各個屏幕的設(shè)計稿，進行特殊適配畏线。為了更好地展示效果静盅，工作量成倍地增長。
排版
人們的閱讀習(xí)慣一般是從左到右寝殴，人的兩眼是橫著排列的蒿叠，眼睛視線橫看比豎看要寬，橫看時眼和頭部轉(zhuǎn)動較小蚣常，自然省力市咽，不易疲勞。
在實際的文字排版中抵蚊，中文或英文均可以采用左對齊的方式施绎。
數(shù)字通常采用右對齊或小數(shù)點對齊，便于對個贞绳、十谷醉、百、千位上的數(shù)字進行對比冈闭。3個數(shù)字以上俱尼，使用千分符作為分隔，便于用戶識別萎攒。
左對齊類型是最常見的形式遇八，是指將每行文字的首字左對齊，與此同時耍休，右側(cè)則呈現(xiàn)出錯位的效果刃永。這是最容易被接受并且不太會出錯的方案，如果拿捏不定羊精，不妨選擇左對齊斯够。該類排列方式在結(jié)構(gòu)上與人們的閱讀習(xí)慣相符，因而能使讀者在瀏覽時覺得輕松與自然园匹。
右對齊類型是比較有自我風(fēng)格的一種對齊形式雳刺，是指將每行文字尾字右對齊排列劫灶，而左側(cè)則呈現(xiàn)出參差不齊的狀態(tài)裸违。左對齊和右對齊是兩組完全對立的排列方式，它們在結(jié)構(gòu)與形式上都各具特色本昏。由于右對齊排列有違人們的閱讀習(xí)慣供汛，因此該類排列在視覺上總會帶給人以不順?biāo)斓挠∠螅瑫r也為版面增添了幾分新穎的效果。右對齊用在平面排版以及一些裝飾類的設(shè)計上比較多怔昨。不建議大篇幅的文本采取右對齊排版方式雀久，因為右對齊在大篇幅的文章中很難起到良好的引導(dǎo)作用，也容易使文章的折行不自然趁舀。
居中的文本形式赖捌，是指版面中的文字要素以畫面的中心線為參照物，將段落與畫面的中心進行重合式排列矮烹。居中對齊擁有簡潔的排列結(jié)構(gòu)越庇，它也是版式設(shè)計中較常見的一種文字編排手法，
海報奉狈、請柬卤唉、品牌推廣使用居中對齊的頻率比較高。居中類型的文本可以很容易地平衡內(nèi)容仁期，并且顯得比較美觀桑驱。然而，并不建議對大篇幅的文本類型采用居中對齊的排版形式跛蛋。
許多正文以左右均齊的方式進行排版熬的，版面表現(xiàn)出整齊、干凈的視覺效果赊级。相關(guān)圖片分別放置在文案的左右兩側(cè)悦析，使版面更加具有平衡感。
在業(yè)務(wù)中此衅，為了方便用戶更好地瀏覽强戴，絕大多數(shù)都是左對齊。
通識性問題
1．時間
- 制定時間規(guī)范
根據(jù)產(chǎn)品設(shè)計需求挡鞍，在前期根據(jù)場景規(guī)劃時間顯示規(guī)則骑歹，如格式是“2016-3-16”還是“2016/03/16”等。用在列表頁面墨微、詳情頁面還是會話頁面都要提前規(guī)范好道媚。
- 不同場景下時間格式的選擇
用戶對于時間的感知根據(jù)場景的不同會有很大的差異。
平時問“什么時候開周會”翘县，會回答“周三”最域。
問“什么時候提交報告”，會回答“3月20日”锈麸。
從對話的場景中可以看出我們對時間維度的區(qū)分镀脂。因此在對時間進行設(shè)計時，一定是根據(jù)使用場景來進行時間的設(shè)計忘伞。
- 有效/失效時間
消息薄翅、卡券沙兰、紅包等都會有時效性，有的時效對用戶來說是有生效期的翘魄，與生效期相對的是失效期鼎天。
內(nèi)容失效后需要處理，可能由清除或者其他功能來支持暑竟。
有的內(nèi)容是沒有生效期的斋射，但是它會變成歷史內(nèi)容，歷史內(nèi)容與現(xiàn)有的內(nèi)容需要進行一定的區(qū)分但荤。
2．?dāng)?shù)量
規(guī)范數(shù)量規(guī)則時绩鸣，需考慮以下問題：
- 是否為零，為零時應(yīng)該顯示還是隱藏纱兑？
- 刷新是否影響數(shù)字變化呀闻？
- 數(shù)字是否會減少，當(dāng)數(shù)字減少為零時是否有反饋或界面變化潜慎？
適時友好反饋
（1）即時反饋
當(dāng)用戶操作后捡多，若有需要反饋的信息，在操作后立刻給出铐炫，反饋的區(qū)域不能距用戶的操作區(qū)域太遠垒手，否則就會被忽略。
如果是非阻塞式的反饋倒信，那反饋的方式要輕科贬，不要因反饋而干擾用戶當(dāng)前的任務(wù)，對用戶造成困擾鳖悠。
（2）反饋效果
所有的點擊都要有明確的反饋狀態(tài)榜掌，點擊后會出現(xiàn)一系列的狀態(tài)變化。如有的按鈕只可以被點擊一次乘综，用戶點擊后首先按鈕狀態(tài)會改變憎账，其次會產(chǎn)生一個與點擊相關(guān)的操作結(jié)果反饋。
- 點擊狀態(tài)
- 發(fā)送狀態(tài)
按鈕點擊狀態(tài)包括開始卡辰、結(jié)束胞皱、不可點、失效九妈、已領(lǐng)完反砌、已過期等
發(fā)送狀態(tài)分兩種：
一是發(fā)送后需要較長時間返回結(jié)果的，此時發(fā)送后直接到結(jié)果頁面萌朱，結(jié)果頁面上顯示當(dāng)前進度和最終結(jié)果及其時間宴树；
二是發(fā)送后較短時間就返回結(jié)果的，此時發(fā)送后到過渡頁面嚷兔，有幾秒的等待時間森渐，然后跳轉(zhuǎn)到最終結(jié)果頁面。 - 輸入
- 音效
（1）減少輸入
在移動端輸入的成本比較高冒晰，可以通過表單同衣、選項卡、默認填入值來減少輸入壶运。
在社交會話中則可以通過更多的語音耐齐、圖片、視頻來減少輸入蒋情，讓用戶溝通得更輕松埠况。
（2）輸入限制
在內(nèi)容不確定多寡的輸入框內(nèi)，可以采用暗文或數(shù)字的方式來幫助用戶確認當(dāng)前的輸入內(nèi)容有沒有超過限制棵癣。
輸入的內(nèi)容一定要做長度限制辕翰，因為不只是在輸入過程中會遇到顯示的問題，在發(fā)布后也會有顯示問題狈谊。
（3）中斷時保存內(nèi)容
移動環(huán)境不穩(wěn)定喜命，經(jīng)常會出現(xiàn)中斷退出的情況。
當(dāng)遇到異常情況時河劝，可以保存用戶在中斷前輸入的內(nèi)容壁榕，待環(huán)境穩(wěn)定后用戶可以繼續(xù)操作。
__應(yīng)用音效需要考慮其大小赎瞎，配合操作使用時是否有延遲牌里。特別需要考慮用戶當(dāng)前的使用場景出現(xiàn)聲音是否合適。 __
設(shè)計务甥，專注目標(biāo)
::設(shè)計牡辽，就是設(shè)計生活，設(shè)計人生敞临。::
需要用感性的右腦加理性的左腦去分析問題催享、解決問題，
::讓設(shè)計哟绊、生活因妙、人生變得更加美好。::
面向目標(biāo)的設(shè)計”方法票髓。如果設(shè)計師專注于人們的目標(biāo)（即人們一開始使用一種產(chǎn)品的原因）攀涵，以及期望、態(tài)度洽沟、天 資以故，就能設(shè)計出讓人用起來既有效又愉快的解決方案。
人有許多特征裆操，讓自己變得體貼怒详。人們或多或少地也將這些特征賦予了具有交互性質(zhì)的產(chǎn)品炉媒，
體貼的交互性質(zhì)的軟件產(chǎn)品/(和人）所具有的特點：
- 關(guān)心用戶喜好
- 是恭順的
- 樂于助人的
- 具有常識
- 有判斷力
- 預(yù)見需求
- 盡責(zé)的
- 不會因為自己的問題增加你的負擔(dān)
- 會及時通知我們
- 是敏銳的
- 是自信的
- 不問過多的問題
- 即使失敗也不失風(fēng)度
- 知道什么時候調(diào)整規(guī)則
- 承擔(dān)責(zé)任
- 能夠幫助你避免犯低級錯誤
檢查機制
設(shè)計走查表
-
場景可能包含了移動App使用的軟件系統(tǒng)、硬件載體昆烁、移動環(huán)境下的網(wǎng)絡(luò)狀態(tài)以及App實現(xiàn)的技術(shù)框架吊骤、版本兼容、使用時間静尼、地點等內(nèi)容白粉。這些場景中遇到的問題是我們設(shè)計走查表里的核心骨架。
- 網(wǎng)絡(luò)特性
網(wǎng)絡(luò)環(huán)境對移動應(yīng)用設(shè)計有較大的影響鼠渺，如快速啟動鸭巴、合理緩存、弱網(wǎng)環(huán)境拦盹、中斷/超時鹃祖，都與網(wǎng)絡(luò)狀態(tài)密不可分。通過設(shè)計策略可以避免網(wǎng)絡(luò)環(huán)境的各種狀態(tài)對用戶體驗造成的影響普舆。
快速啟動
應(yīng)用在啟動時需要一個加載時間惯豆，為避免用戶在等待時間感到枯燥、乏味奔害，
可采用以下3種方式楷兽。
（1）讓用戶感知到應(yīng)用的啟動速度比較快
使用一張與應(yīng)用相同的圖片，在用戶點擊應(yīng)用時华临，這張圖片就顯示出來芯杀，用戶會認為這個時候應(yīng)用已啟動，雖然用戶會在啟動頁面停留幾秒雅潭，但是會覺得應(yīng)用加載速度比較快揭厚。
（2）作為一個產(chǎn)品品牌展示區(qū)
啟動頁面展示的是產(chǎn)品的廣告語，如支付寶的“我有我的方式”或者如犀牛的故事“犀牛故事扶供，在故事里相遇”筛圆。
（3）作為一個廣告展示區(qū)
啟動頁面可以是產(chǎn)品代言人或者某個時間段的活動。如手機淘寶就經(jīng)常會有這樣的啟動頁面椿浓。合理緩存
●頁面合理緩存可以讓用戶感受到應(yīng)用的速度更快太援，不浪費流量。但是緩存不能過量扳碍，不能任何頁面內(nèi)容都做緩存提岔，那哪些頁面需要做緩存呢？一般應(yīng)用首頁有比較固定的內(nèi)容時需要做緩存或已有內(nèi)容的頁面不需要全頁面加載笋敞，可以先展示較舊的內(nèi)容然后加載出較新的內(nèi)容碱蒙。相比每次進入都重新加載，緩存會讓用戶有更好的體驗。-
弱網(wǎng)環(huán)境
（1）弱網(wǎng)環(huán)境下加載失敗
網(wǎng)絡(luò)環(huán)境不穩(wěn)定容易導(dǎo)致加載失敗赛惩，加載時間控制在8秒內(nèi)（8秒是用戶最長的等待時間哀墓，用戶在等待8秒左右時開始感到不耐煩并且想離開當(dāng)前頁面），并且盡可能地采用有趣的加載來降低用戶的等待時間喷兼，加載失敗后篮绰，要給予用戶重試的機會，并且告知加載失敗的原因褒搔。
（2）弱網(wǎng)環(huán)境下內(nèi)容展示不全
弱網(wǎng)環(huán)境下可能只能顯示部分內(nèi)容阶牍，經(jīng)常遇到的情況是文字內(nèi)容顯示喷面，而圖片無法加載出來星瘾，只出現(xiàn)占位圖或者是空白圖片，圖9所示為2016年新春紅包出現(xiàn)的占位圖惧辈。
（3）弱網(wǎng)無網(wǎng)狀態(tài)下數(shù)據(jù)傳輸/設(shè)置生效機制
如果網(wǎng)絡(luò)環(huán)境不穩(wěn)定或者斷網(wǎng)琳状，但用戶需要將內(nèi)容發(fā)布出去，可以支持用戶本地發(fā)出去盒齿，本地可見念逞。當(dāng)有網(wǎng)絡(luò)請求時届案，再將內(nèi)容上傳到服務(wù)端摆碉，并且讓其他用戶可見。這樣可以有效提升用戶體驗衙伶，讓用戶不受網(wǎng)絡(luò)環(huán)境的限制符匾。如美拍可以在斷網(wǎng)的環(huán)境下緩存視頻叨咖，當(dāng)有網(wǎng)絡(luò)時可以手動將視頻上傳上去。Facebook自動檢測網(wǎng)絡(luò)啊胶，有網(wǎng)絡(luò)后立即上傳失敗內(nèi)容的設(shè)計
- 中斷甸各、超時
●在網(wǎng)絡(luò)中斷時，幫助用戶保存當(dāng)前的輸入內(nèi)容或者瀏覽內(nèi)容焰坪，當(dāng)重新連接到網(wǎng)絡(luò)時用戶可以繼續(xù)當(dāng)前的任務(wù)趣倾。若超時則給用戶提示，讓用戶停止等待某饰，重新請求網(wǎng)絡(luò)或退出儒恋。
○頁面狀態(tài)
○可以用生命周期來描述一個頁面的狀態(tài)。用戶進入這個頁面黔漂，首先會看到頁面的初始化碧浊；閱讀內(nèi)容的過程中會涉及頁面的刷新、加載瘟仿；當(dāng)同時訪問頁面的用戶數(shù)量過多時箱锐，頁面內(nèi)容會被限流，用戶會在不同的時間進入頁面查看內(nèi)容劳较；當(dāng)前頁面內(nèi)容可能過了某個時間節(jié)點會失效驹止，用戶不能再訪問浩聋；當(dāng)一個新用戶進入這個頁面，可能當(dāng)前的頁面內(nèi)容為空臊恋。頁面的這些狀態(tài)需要設(shè)計師提前考慮并提出解決方案衣洁。 - 頁面初始化
啟動應(yīng)用進入首頁時，可以在啟動過程中預(yù)加載首頁內(nèi)容抖仅，讓用戶快速進入且有內(nèi)容可預(yù)覽坊夫。頁面初始化需要配合加載策略進行。 - 頁面刷新
通過刷新可以更新當(dāng)前頁面的數(shù)據(jù)撤卢。一般情況下采用用戶手動下拉刷新环凿，下拉刷新不需要對整體頁面進行刷新，只需要拉取最新的狀態(tài)放吩，顯示出來即可智听。但是如果當(dāng)前頁面涉及一些數(shù)字的提醒或通知，則不需要刷新也可以展示給用戶渡紫，當(dāng)用戶點擊查看時觸發(fā)刷新到推，則將頁面內(nèi)容更新到最新的狀態(tài)。 - 頁面加載
（1）分步加載
分步加載是全頁面加載的一種方式惕澎，為了盡快地顯示頁面內(nèi)容莉测，可先加載文字內(nèi)容，再加載圖片等內(nèi)容唧喉。讓用戶在網(wǎng)速不夠快的情況下可以盡快預(yù)覽到內(nèi)容捣卤。這種加載方式通常應(yīng)用在用戶首次進入頁面時。
（2）懶加載
懶加載也稱為延遲加載欣喧，即在需要的時候才加載腌零，這種加載效率低，但占用內(nèi)存小唆阿。一般在頁面瀏覽過程中加載新內(nèi)容時采用這種方式進行加載益涧。
（3）智能加載
第一種策略是在產(chǎn)品中增加網(wǎng)絡(luò)判斷的機制，如果在弱網(wǎng)環(huán)境下驯鳖，提前壓縮圖片并顯示小圖片闲询，使其能盡量展示預(yù)覽出的內(nèi)容，點擊小圖浅辙，可查看大圖扭弧。最好是可以讓用戶點擊未加載的內(nèi)容后繼續(xù)加載，不需要重新刷新頁面（只針對客戶端頁面）记舆。第二種策略是降低圖片視頻質(zhì)量鸽捻，點擊后可以加載高清圖片或者點擊播放視頻選擇高清模式。而在網(wǎng)絡(luò)環(huán)境不佳的情況下，則默認幫助用戶降低質(zhì)量御蒲，減少流量的耗損衣赶。 - 頁面內(nèi)容被限流
一般產(chǎn)品頁面是不會遇到限流的問題的，只有在活動頁面可能因為訪問量太大而遇到限流厚满。如在支付寶的春晚發(fā)紅包過程中府瞄，預(yù)測到活動中人流量會比較大，我們提前設(shè)計了限流頁面碘箍，讓用戶有較好的體驗遵馆。 - 頁面內(nèi)容為空
一般與用戶相關(guān)的頁面可能為空，如我的動態(tài)丰榴、評論等货邓。這些頁面為空時不能不顯示，但可以在顯示上用調(diào)皮一點的文案避免空頁面顯得過于枯燥多艇。 - 頁面內(nèi)容失效
一般固定入口不會有頁面失效的狀態(tài)逻恐。非固定入口的頁面失效后像吻，可以將入口下掉或者在用戶進入后重新刷新出可用內(nèi)容峻黍。頁面內(nèi)也需要考慮信息的時效性、延時拨匆、過期等問題姆涩。
頁面流程完整性
除了用抽象的流程圖來確保流程的完整性，設(shè)計師還可以通過快速回到首頁/主要頁面惭每、讓用戶始終知道自己在哪兒骨饿、返回到原來的瀏覽位置、任務(wù)完成后跳轉(zhuǎn)這幾項設(shè)計原則來確保完整性上的體驗台腥。
■快速回到首頁/主要頁面
用戶不管在應(yīng)用的什么地方宏赘，都可以快速返回到首頁/主要頁面。這要求我們在搭建整體信息架構(gòu)的時候黎侈，結(jié)構(gòu)足夠扁平察署。并且所有的頁面流程都必須形成一個有效的閉環(huán)。
■讓用戶始終知道自己在哪兒
通過頁面標(biāo)題來讓用戶確認當(dāng)前的位置峻汉。
通過頁面之間跳轉(zhuǎn)的轉(zhuǎn)場動效讓用戶確認當(dāng)前的位置贴汪。
用戶可以沿原路返回。
返回到原來的瀏覽位置
明確任何一個可點擊的去向休吠，且去向是可返回的扳埂。返回問題連帶定位，從哪里去返回到哪里瘤礁。特殊路徑需要定制阳懂，可能會出現(xiàn)連跳幾個頁面的情況，在驗收過程中需要重點注意。
■任務(wù)完成后跳轉(zhuǎn)
任務(wù)成功后岩调，頁面跳轉(zhuǎn)后可返回到來源頁面克饶。
任務(wù)失敗后，需提示當(dāng)前狀態(tài)誊辉，并引導(dǎo)用戶如何查看最新的狀態(tài)矾湃。在有新結(jié)果時，通知用戶堕澄。
硬件特性
硬件特性從制定適配原則邀跃、賬戶在設(shè)備上的切換、橫豎屏顯示效果等方面來描述蛙紫，看看在設(shè)計前期我們需要注意哪些問題拍屑。
■制定適配原則
■任何產(chǎn)品都會涉及適配問題。首先是制訂native適配方案坑傅，如顯示的文字或圖片的適配僵驰。
1）數(shù)量不變進行同比放大適配，如圖2所示唁毒，支付寶首頁適配的時候就是進行同比放大蒜茴，一行數(shù)量不變。
2）同行數(shù)量增多浆西，圖片字號大小不變粉私。
3）避免不規(guī)則背景。在圖片的適配過程中近零，若圖片底部有不規(guī)則花紋诺核，如圖3所示，因為要切一張大圖久信，則可能會使紅包增大窖杀，用戶打開加載時也會增加流量的耗費。
■避免不規(guī)則背景
4）不同設(shè)備適配時遮擋裙士。通常入客，操作時的適配問題容易被忽略。頁面顯示的內(nèi)容在喚起鍵盤時是否有遮擋的問題潮售，怎樣解決遮擋問題痊项？如圖4所示，在iPhone4/4s上酥诽，無論怎樣進行適配鞍泉，由于頁面承載的信息過多，下面的支付渠道（用黃色框框住的地方）仍然顯示不全肮帐。但在iPhone5/5s咖驮、iPhone6/6pIus上則可以通過調(diào)整間距使內(nèi)容顯示完整边器。
■賬戶在設(shè)備上的切換
●同一設(shè)備，不同賬戶切換
切換的新賬戶若曾經(jīng)在本設(shè)備上登錄過托修，則幫助用戶加載展示客戶端存儲的本地內(nèi)容忘巧，并且標(biāo)記用戶未處理的新信息。在加載的過程中給出明確的加載狀態(tài)睦刃、內(nèi)容展示砚嘴。
●不同設(shè)備，同一賬戶iOS切換
同一個賬戶在不同設(shè)備上登錄時涩拙，先確定該賬戶是否支持多設(shè)備同時登錄（多點登錄）际长；如只支持單點登錄，則在登錄B設(shè)備時兴泥，A設(shè)備的賬戶自動被擠下線（單點登錄的安全限制）工育，并提示用戶，設(shè)備是在何時何地登錄的搓彻，所以退出了當(dāng)前的登錄狀態(tài)如绸，圖5所示為支付寶賬戶在其他設(shè)備上登錄時出現(xiàn)的提示。
●若支持多點登錄旭贬，則注意內(nèi)容的同步怔接，且內(nèi)容被操作后的狀態(tài)也需要同步到各個設(shè)備上。特別是同時登錄時push通知下發(fā)及同步骑篙，不能讓用戶操作重復(fù)閱讀的工作蜕提。
●如果設(shè)計的產(chǎn)品與優(yōu)惠森书、紅包等相關(guān)靶端，則要判斷設(shè)備ID，避免用戶刷優(yōu)惠或紅包凛膏，對產(chǎn)品或活動造成影響杨名。
●橫豎屏顯示效果
應(yīng)用是否支持橫豎屏顯示先確定，如果不支持則鎖定豎向或橫向的單一方向猖毫。如果支持則要在設(shè)計的過程中考慮豎屏和橫屏兩種模式下的顯示效果台谍。
軟件特性
軟件系統(tǒng)本身是很復(fù)雜的，設(shè)計師需要掌握一些與設(shè)計相關(guān)的軟件特性來幫助設(shè)計吁断，如操作系統(tǒng)特性趁蕊、制定多平臺的設(shè)計規(guī)范、版本兼容仔役。
操作系統(tǒng)特性
進行新產(chǎn)品規(guī)劃初期掷伙，需要確定新產(chǎn)品覆蓋的系統(tǒng)及系統(tǒng)版本號。如iOS系統(tǒng)支持很多手勢操作又兵，故iPhone的用戶更容易接受手勢操作任柜。而Android因為硬件設(shè)備的差異比較大卒废，對手勢的支持也有較大的差異，因此較為隱藏的手勢操作不適合使用宙地。
■制定多平臺的設(shè)計規(guī)范
系統(tǒng)是不斷更新和進步的摔认，一個產(chǎn)品如果是多平臺設(shè)計，需要制定平臺規(guī)范宅粥。比如統(tǒng)一的表單操作参袱、選項卡、浮層提示秽梅、加載蓖柔、刷新等，這些組控件的統(tǒng)一风纠，可以有效地提高產(chǎn)品優(yōu)化的效率况鸣，降低開發(fā)成本，同時能保證用戶體驗的一致性竹观。圖7所示為支付寶制定的標(biāo)簽統(tǒng)一規(guī)范镐捧。
■版本兼容
●版本覆蓋時間
版本上線后要確認一下版本在多久的時間范圍內(nèi)可以覆蓋80%以上的用戶。當(dāng)新版本的某些功能要配合H5活動時臭增，這個時間顯得尤為重要懂酱。如果版本沒有發(fā)布，而活動的時間已經(jīng)迫在眉睫誊抛，那這個活動可能將會面臨失敗列牺。在跨部門合作過程中，可能因為溝通不到位產(chǎn)生這樣的結(jié)果拗窃。因此當(dāng)有大型活動進行時瞎领，需要全力去配合。
●更新提示強弱
一般來說随夸，用戶可以選擇不去更新版本繼續(xù)使用九默，但是當(dāng)App產(chǎn)生較大BUG或存在安全隱患時，可通過不可取消更新進行強制升級
●兼容性展示
新版本的內(nèi)容是可以展示在舊版本上的宾毒。用戶在低版本客戶端的會話頁面仍然能收到會話消息提示驼修，點擊此消息，可以有效地引導(dǎo)用戶更新App诈铛。更新后可查看來往的具體會話內(nèi)容乙各。
愿景
交互不是單個人，單一崗位的事情幢竹，需要大家通力協(xié)作耳峦，產(chǎn)品經(jīng)理是源頭，大家一起走妨退，就有了康莊大道妇萄。
