移动UI设计
移動設計
目錄
概述... 4
讓用戶一見鐘情的移動應用
什么是用戶一見鐘情的移動應用？
怎樣做到讓用戶一見鐘情？
移動應用的生命周期
轉變交互設計思維
特征... 6
人-機-環協同的交互系統
應用的使用情景特征
光線
環境噪音
網絡狀態
用戶的使用姿態
單雙手
橫豎屏
持續時間
干擾任務
移動網絡的特性
設備的物理特性
小而繁多的屏幕尺寸
因平臺而異的手機按鍵
豐富的傳感器體驗
觸摸手勢交互特性
用戶的手指喜歡往哪點
手勢交互不只是點擊
為手勢設計時避免犯的錯
原則... 11
主流移動操作系統的基本原則
移動設計八原則
內容優先
為觸摸而設計
轉換輸入方式
流暢性
多通道設計
易學性
為中斷而設計
智能有愛
框架... 13
框架的深度和廣度
廣度框架&深度框架
移動應用的框架分析
產品框架的移動型
移動應用導航的設計模式
標簽式
輻射式
列表式
平鋪式
抽屜式
點聚式
模式之外的因素
用戶持機和拇指使用
擴展屏幕之外的導航
移動平臺特性
細節... 19
讓人機交互更多樣
將界面可視化
用隱喻引導用戶
聲音的互動
動效... 20
動效有什么作用？
適合動效的應用場景
分類
轉場
引導
反饋
加載
啟動畫面
如何描述一段動效效果
運動動效的基本規范
形變動效的基本規范
還需要事先考慮技術的可行性
動效設計方法
適配... 23
客戶端產品的適配設計
移動設備的屏幕特點
各種屏幕尺寸的界面適配
橫豎屏狀態下的界面設計
多設備的響應式設計
響應式布局模式
導航的響應式組織
圖片的響應式變化
文字的響應式展現
理性地看待響應式
創新... 28
創新技法詳解
評估創新的價值
影響的范圍
用戶成本
用戶收益
工具... 29
適合移動設計的工具
一份好的移動交互原型
項目概要
流程圖
交互原型
交互說明
可以觸摸的交互文檔
將設計輸出到實機上體驗
建立移動產品組件庫
高效的紙面原型
?
?
?
?
?
?
?
?
?
?
?
?
?
?
概述
讓用戶一見鐘情的移動應用
什么是用戶一見鐘情的移動應用？
功能實用、簡單易學、操作高校、界面炫麗、轉場流暢
- 給用戶最想要的
對于移動應用，首要的是能給用戶帶來的核心價值是什么？
- 讓用戶一眼就能明白
簡單易懂、符合用戶心理模型的信息架構是非常重要的，要能讓用戶一眼就明白應用的核心功能和使用方法
- 簡單易用才受歡迎
簡單、易學、易用、同時操作負荷要低
i、先以手勢交互為基礎來考慮完成任務的可能性，建立以手勢為基礎的交互模式。用戶在完成任務時，要保持操作手勢的軌跡的流暢性，更多地滿足單手操作的要求。單手操作手指可觸及的范圍與雙手的區域有較大的不同。
ii、可以將點擊操作替代為其他的交互形式，如劃動屏幕解鎖，搖動手機找好友，上下擺動手機翻頁等。
iii、利用多種傳感器，識別出應用的操作情景，基于對情景的判斷來智能地幫助用戶完成操作，提供更人性化的交互操作。
- 節省用戶的費用支持
i、特別對于國內用戶，讓用戶試用、預覽部分內容和進階收費等都是非常重要的策略。提供一些免費的版本，通過其他的業務模式來獲得收入也是需要考慮的途徑。
ii、流量
?
怎樣做到讓用戶一見鐘情？
- 在設計上抓住用戶的眼球
i、??????????多研究用戶的行為/動機/情景，思考用戶的顯示需求和潛在需求
ii、?????????在視覺設計上，要有符合產品特質的視覺表現，要能表現產品的品牌特征，要有能使目標用戶群產生共鳴的視覺風格，要有識別性很好的應用圖標。
iii、????????在交互上的創新，會給用戶留下更深刻的印象。交互上的創新主要有兩個維度：一是交互架構上的創新，即整個應用都有一套統一的交互方式，且這套方式是具有一定的創新型的，統一的交互方式會加深用戶對新交互的理解。二是交互細節上的創新，一般來說是在某個設計點上給用戶新奇的感受，從而讓用戶記住這個應用。
- 在交互上讓應用比競品多走一步
交互設計師、視覺設計師、開發工程師
移動應用的生命周期
- 準備期：應用的設計、開發
- 發布期：吸引用戶為你的產品買單
（1）???關注應用市場本身的設計和市場策略
（2）???應用詳情頁面對于用戶的下載決策起著比較重要的作用
i、???????????????首先是文字描述
不同的應用市場對于應用的文字描述做了信息架構的梳理。例如，iOS6的應用市場把文字內容分為“內容提要”、“最新動態”、“信息”、“開發商信息”、“更新歷史”幾個部分；Google Play中，把文字內容分為“說明”、“新功能”、“評論”、“更多內容”、“開發者”、“用戶還查看了一下內容”、“”用戶還安裝了以下應用”、“Google Play內容”幾個部分。
1）? 基本功能描述
注意描述文字在應用市場中的排版形式，在版式上讓用戶更易讀
2）? 運營吸引描述
例如，在內容上為自己標記5顆星，并在首句中強調“已有大量的用戶已經在使用本應用”
ii、?????????????其次是圖片
圖片是比文字描述更重要的展示方式。設計師可以根據你的應用所處的環境以及背景來確定如何設置內容。
- 使用期：制造第一眼的好感
（1）???應用圖標
應用圖標是移動應用的名片，非常值得花大力氣來打造
（2）???程序閃屏
點擊應用圖標后展示給用戶的第一個界面就是閃屏，一般傳遞的是應用的功能、應用的品牌特征、應用的使用說明，或者最新情況等。在設計時需要充分考慮閃屏以及應用內容的結合，使它們能夠一脈相承。
- 迭代器：引導用戶跟著產品更新
一般認為3周到一個月的更新周期比較合理。
轉變交互設計思維
PC端與移動應用，兩者在設計方法論上是類似的，要有以人為中心的設計理念，從用戶的核心價值、目標和用戶的特征出發來思考設計，有自己的設計原則，關注產品內容的組織，提供符合用戶期望的信息架構，使用用戶熟悉和高效的導航操作，以及進行有趣的細節設計。
- 移動應用多樣化的使用情景
一般考慮三種主要的情景：休閑中、等候中、忙碌中
- 移動設備與PC不一樣的物理和交互特征
電量、展現的信息有限、網絡流量、傳感器技術、手勢精度
- 小而美的移動應用框架
- 海量屏幕尺寸下的用戶體驗
- 發掘意想不到的產品創意
- 決定應用品質與神韻的動效設計
- 尊重、保護好用戶隱私
特征
人-機-環協同的交互系統
應用的使用情景特征
光線
同一個屏幕內容，在環境光低照度下，屏幕亮度過亮，長時間閱讀會損傷視力；而在環境光照度較高，屏幕亮度過低時，用戶則會看不清屏幕內容。
環境噪音
網絡狀態
用戶的使用姿態
躺著、坐著、站著
單雙手
橫豎屏
持續時間
干擾任務
點錯了別的地方、車晃動……
移動網絡的特性
網絡載入速度對比
| 網絡類型 | 2G | 3G | Wi-Fi | 無網絡 |
| 網速（kbit/s） | 9-30 | 20-250 | >125 | - |
- 全頁面加載
整個頁面一起下載的，頁面會處于全空白，或者只有一個加載動畫在動的狀態。一般適用于一屏只有一個元素的載入情形。
- 分布加載
先進行全頁面加載，而后頁面的元素可以分布加載，讓用戶先看到部分內容，其他內容再逐步加載。一般見于圖文的排列界面。
- 懶加載
經常使用在無盡列表中。懶加載一般由用戶的瀏覽行為來喚起內容的加載，當滾動到頁面的頂部或者底部盡頭時，會自動加載內容。
需要注意的是一次加載的內容的數量，一般是根據內容的大小和高度來決定，既能較快載入內容，又能讓用戶更順暢地查看而不用一直等到加載；另一方面是加載的時間，好的懶加載會根據用戶的瀏覽速度去自動調節加載的時間點，而不是在瀏覽加載完的內容后才開始繼續加載。
- 智能加載
智能加載則根據不同的網絡來加載內容。對于2G網絡，給用戶提供最核心的少量內容，更多內容允許用戶主動加載；對于wifi網絡，則可以給用戶載入更多地內容，減少用戶的點擊次數。
另外，在智能加載中，根據網絡的特性，也會采用對圖片降級的策略。
- 離線加載
設計師們在處理重復使用的內容時，可以更多地考慮使用離線存儲的方式來提升用戶的體驗。
在設計離線功能時，還需要根據產品的需求，設計一些離線存儲的測試，適當地減少存儲的開銷，使好鋼用在刀刃上。
設備的物理特性
小而繁多的屏幕尺寸
因平臺而異的手機按鍵
- 功能鍵
被指派為特定的功能，用戶按了后觸發對應的功能，一般與屏幕內容關系不大。
- 導航鍵
被賦予了特定的邏輯規則，其操作與屏幕有一個邏輯映射的關系，但操作與操作對象分離。用戶按鍵后，在屏幕中得到對應的反饋，例如Back鍵。
各個平臺的功能鍵
| 平臺 | 導航鍵 | 功能鍵 |
| iOS | Home | Power、Volume…… |
| Android | Home、Back | Power、Search…… |
| Windows Phone | Start、Back | Power、Search…… |
?????? 許多公司在開發移動全平臺應用時，由于時間和資源的限制，都會在各個平臺上沿用一套設計，一般來說都會根據iOS的風格設計。因為iOS上硬鍵較少，如果能夠支持iOS平臺，則Android平臺上能見較容易地遷移。但是，對于Android的應用主要進行Back鍵的適配，使習慣使用Android的Back鍵的用戶也能順暢地使用。
?????? 手機硬鍵功能設計需要注意：
?? 應用的交互導航設計應該支持平臺的導航按鍵操作。
?? 應用用到了平臺功能鍵對應的功能，應該支持功能鍵的操作。
?? 所有應用對按鍵的操作都必須保持一致，不要隨意互用。
豐富的傳感器體驗
觸摸手勢交互特性
用戶的手指喜歡往哪點
屏幕的不同區域用戶的最小點擊區域是不一樣的，如上圖。
ü? 對于拇指的操作，建議使用11mm的最小對象
ü? 對于食指的操作，建議使用8-9mm的最小對象
ü? 各個不同區域的位置，可以根據上圖進行適當的選擇
從上圖可以看出：
ü? 手機的所有屏幕區域不是同樣程度地易于操作的，這跟拇指與手指的劃動弧度正相關
ü? 食指在操作時，也有一些難于操作的區域，就是在屏幕的右側空間
ü? 對于食指與拇指都是易于操作的區域（右側圖的紅色區域）是值得關注的，對于（右側圖的藍色區域）也應該在設計上進行一定的思考，應該把對應的觸摸對象設計得更大些
手勢交互不只是點擊
各個平臺支持的手勢
| 平臺 | 支持的手勢 |
| iOS | 點擊、拖曳、滑動、輕掃、雙擊、雙指縮放、長按、搖動 |
| Android | 點擊、長按、滑動、拖曳、雙擊、雙指縮放 |
| Windows Phone | 點擊、長按、滑動、輕掃、雙指縮放、雙指旋轉 |
各種手勢具有以下特征：
?? 延時
?? 運動
?? 壓力
?? 方位
?? 觸點數
?? 序列
為手勢設計時避免犯的錯
良好的手勢交互設計，要遵循的設計特性：
2? 自然性
手勢本身是從人的基本行為中延伸出來的交互技術，如果手勢本身符合用戶自然的操作特征，那么用戶既容易學會，也自然覺著有趣。
2? 可發現型
如何在界面上給用戶提示，使用戶能快速上手，是衡量手勢是否足夠好的一個重要特征。
2? 反饋
人一般認為100ms以內的反饋時間是瞬時的。
2? 有趣的
2? 合適的
設計時也需要考慮用戶的不同文化背景。
原則
主流移動操作系統的基本原則
| Android | iOS | Windows Phone |
| 令人陶醉 | 美學完整性 | 時尚 |
| 簡化我的生活 | 一致性 | 能夠隨時隨地使用 |
| 讓我驚嘆 | 直接操作 | 整潔 |
| ? | 反饋 | 動態效果 |
| ? | 隱喻 | 簡單、可讀、簡約 |
| ? | 用戶控制 | 保持一致 |
| ? | ? | 真實 |
| ? | ? | 創新 |
a)????????iOS作為新一代智能手機平臺的鼻祖，強調直接的交互操作，鼓勵設計師們使用隱喻和擬物化的設計手法，在圖標和界面上使用高質感的特性，以此給用戶帶來了全新的體驗。
b)????????Android在全平臺的統一上做了很多努力，每一板的設計都在追求系統操作的流暢性、界面的簡潔性，并且在視覺上進一步突出了與其他平臺的差異。
c)????????Windows Phone則獨辟蹊徑地使用了Metro的視覺風格，配以簡潔、流暢的用戶界面，給用戶留下了深刻的印象。
移動設計八原則
內容優先
?? 重組內容，使內容符合移動的特征
?? 優先突出用戶需要的信息，而簡化界面的導航
?? 適時提高屏幕空間的利用率
應該把屏幕資源更多地給內容而不是導航；只在適當的時候，可以讓用戶呼出導航即可。
為觸摸而設計
?? 以信息架構為基礎，建立手勢交互規范
讓用戶在應用的任何界面中都知道怎么使用手勢，并達到預期的結果。這需要設計師提供一套基于應用信息架構的手勢規范，它將是導航與交互的基礎。
?? 優先設計自然的手勢交互，而不只是Tap點擊
?? 引導用戶在情景中學習手勢操作
除了基本的用戶都熟知的手勢外，其他手勢在使用時都需要給出提示和引導。
?? 特殊手勢不是必須的
?? 可觸區域必須大于7x7mm，盡量大于9x9mm
?? 手勢操作要提供過程反饋提示
轉換輸入方式
?? 減少文本輸入，轉換輸入方式
?? 簡化輸入選項，變填空為選擇
?? 使用手機已有的傳感器輸入
語音、掃描識別（二維碼、條碼、文字等）、LBS技術等
流暢性
?? 手指及手勢的操作流
操作路徑短能在一定程度上被認為是操作效率更高，流暢性更好。
?? 用戶的注意流
用戶在操作界面時，注視點轉移形成的焦點流連起來就是注意流，注意流是否圓滑也是判斷界面是否流暢的重要標志。
?? 界面反饋的轉場流暢性
讓應用的界面轉場過渡以及反饋都是流暢的。
多通道設計
多通道設計是指系統的輸入輸出都可以由視覺、聽覺、觸覺等來協作完成。
易學性
使用前引導界面，其實完全沒有必要。如果實在需要，也建議最好不要超過3屏內容，要有快速退出的操作。
對于功能性引導設計，更好地幫助設計是把新功能的提示與產品本身做更完美的結合，這樣用戶在他剛好要使用的情境下獲得提示，讓用戶感到友好而不突兀，這樣的設計更合理。
在用戶需要的時候才提供對應的幫助。
為中斷而設計
?? 保存用戶的操作，減少重復勞動
a)??????網絡中斷操作
b)??????編輯中斷操作
?? 銜接用戶的記憶而不是讓用戶重頭開始
智能有愛
評價一個移動應用體驗的好壞，除了要看它是否滿足用戶需求和是否具有友好的可用性外，能夠讓用戶感受到驚喜是在移動應用設計中最為推崇的。
驚喜有趣、智能高效、貼心
貼心的設計往往會幫助用戶提前想到一些事情，并滿足用戶還未意識到的需求，在用戶在犯錯誤的時候能自動彌補、糾正用戶的操作，并提出溫馨的提醒。
框架
產品的框架設計是將信息合理組織、有效展示的一種方式，這種方式將影響到整個產品的穩定和擴展。
框架的深度和廣度
一個好的框架設計是建立優秀的等級式系統，將信息按用戶熟悉易理解的方式進行分類，并建立等級層次關系。
廣度框架&深度框架
廣度越大，同一層及的入口越多，用戶在搜索入口時，需要更多的識別時間，也會占用更多地屏幕空間。但多入口的方式，也容易讓用戶知道產品主要是用來做什么的。同時由于是展開式的入口，用戶可以更快捷、更容易獲取到自己需要的信息。無限制的廣度，會讓用戶對產品提供的核心價值迷惑。
而深度越深，內容的層級越多，用戶獲取信息的路徑就越長，操作起來更繁瑣。由于相關入口較深，對于新手會有搜索目標難度的增加。深度型的框架，必然也給屏幕更多地空間，留給用戶最關心的內容，讓用戶能更快地獲取信息。
在進行框架設計的時候，權衡好深度和廣度，要考慮的因素很多，包括產品的核心價值、內容的數量、用戶的熟練程度、內容組織的有效性、目標內容的使用頻率、內容之間的語義相關性、使用情景特征，甚至是手機的反應時間等。
最簡單和流程的產品框架，是淺而窄的方式。
移動應用的框架分析
?? 從應用場景角度來看，產品框架可以更淺一點
手機場景碎片化時間的特性以及情境的復雜性
?? 從硬件設備來看，產品框架可以更窄一點
小屏幕，應該突出對用戶來說重要的內容
產品框架的移動型
怎樣設計淺而窄的產品框架？
?? 移動化
根據業務功能，分析移動特征，提供給用戶最合適的基于情境的設計。在交互設計階段，更是要應用信息組織方式，敢于再簡潔功能，組合同類信息，隱藏次要功能，轉移一些功能到系統平臺中。
?? 路徑扁平化
甄別出用戶需要的核心內容，使核心內容的路徑扁平化，可以使用戶的連續性和效率得到提升。
?? 層及信息合并
?? 隱藏
移動應用導航的設計模式
從立體空間的維度來看，導航元素可以在頁面中，也可以在界面前后。從同一平面的維度來看，導航元素可以在頁面中，也可以在上下左右四個方位擴展。
標簽式
一般信息被明確分為幾類，此分類根據邏輯和重要性一般控制在5個以內，其他部分匯聚到一個分類標簽中。
?
適用項：入口選項數目不多，且用戶需要在選項間頻繁切換來執行多任務。
注意項：這種模式不適合太過復雜和不穩定的結構。
輻射式
將全應用信息進行獨立分類，做到信息互斥，類別各自有獨立入口，內容間基本并列。這些入口聚合在中心頁面，此頁面一般是首頁。
這種方式比較清晰，每個格子的位置都是固定的，用戶通過對方位的記憶可以很快找到所要內容的位置并進行操作。缺點是切換功能時，必須返回首頁，增加了操作的步驟。
?
適用項：分類清晰，入口獨立且固定。
注意項：不適合在交叉類別中使用。
列表式
將信息梳理為多個條目，條目直接沒有概念上的交集，一般數量保持在15個以內，超過15個最好另分一級（例如，樹狀列表）。如果不想再分一級，可以將條目分組分塊，在視覺上加以處理區分，最好再給每一組定義一個名詞。
除了在主框架使用外，列表式結構在移動應用中主要在局部位置使用較多。它以文字描述為主，內容較多且相對不是太重要，會以列表的形式布局。
?
適用項：較適合展示層次分明的等級結構。
注意項：控制好列表的個數和分組方式。
平鋪式
簡單的層級框架，適用于整體性比較強的內容，在一個界面中能完全展現一塊內容，且多個內容直接是并列關系。一般界面控制在5個以內。有頁面指示器，顯示總共有幾個界面，當前是第幾個。
?
適用項：平鋪頁面適用于少而精的內容和隨意瀏覽的頁面，易于實用滑動即可，界面占用空間少。
注意項：無法立即跳到非相鄰頁面，不適合較多頁面的加載。
抽屜式
抽屜式導航是將層級框架中的分類內容進行隱藏。現在使用最多的是屏幕的左右兩側，擴展了屏幕的平面大小。
?
適用項：以當前內容為核心展示的應用。
注意項：隱藏的導航內容，需要更好的方式調出，比如手勢。
點聚式
當層級框架比較復雜，幾個并列的模塊中都有用戶頻繁使用的核心內容時，會考慮使用點聚式導航。通過一個點的方式，匯聚和這些入口，這個點可以以更有趣的方式來展現，且不受個數的限制，更靈活，也讓界面空間更開闊。
?
適用項：需要提取最核心的幾個點來展示產品的特性。
注意項：匯聚后將使部分導航隱藏，需要良好的引導。
模式之外的因素
用戶持機和拇指使用
在設計產品框架時，必須考慮到拇指的最佳操作區域，同時也要考慮到操作時的視線干擾。可以考慮將最核心的功能點放在屏幕底部，即易于用戶操作，并能減少操作時的視線干擾。
擴展屏幕之外的導航
???????? 邊緣的合理利用，可以將點擊效率和誤操作得到更好的改善。
移動平臺特性
???????? 需要去了解相應平臺的設計原則和規范，以及硬件的配置。
細節
讓人機交互更多樣
?? 指尖與界面的互動
ü? 點擊
在移動界面設計時要保證讓用戶感覺到可以直接操控的元素，而且還需要一眼就能讓用戶認得它們。
ü? 拖曳和撥動
被拖曳的元素始終跟隨著屏幕的指尖，而被波動的元素在指尖離開屏幕后還會因為慣性繼續運動。
?
對于可拖曳、波動的界面元素，應該將其跟按鈕等可以點擊的控件區分開，在設計上強化其可拖動的感覺。
ü? 多指手勢
如果你設計的多指手勢缺少與現實的聯系，那它們應該是為專家用戶而創造的快捷操作，對于普通的使用者，最好能提供其他可以完成同樣功能的交互方式。
?? 虛擬鍵盤中的設計
ü? 要分析界面在使用場景中的需求，再合理選擇使用何種鍵盤。
ü? 一般鍵盤右下角的功能鍵也是可以配置的，例如Go、Join、Next、Route、Search、Send、Done等。
ü? 注意項：
a)??????輸入項的相關內容在鍵盤浮起后不能被遮擋
b)??????需要安排足夠的空間來顯示動態內容，如反饋信息
c)??????在輸入項較多的表單中，要注意多個輸入框之間切換的便利性
d)??????既然移動設備中的軟鍵盤需要根據場景呼出，那自然也要在適當的時候將其隱藏
?? 讓設備產生存在感
?? 用聲音與界面交流
?? 打開攝像頭看世界
?? 創造虛擬現實的界面
?
傳感器能夠實現的功能
| 陀螺儀 | 重力感應 | 光線感應 | 麥克風 | 攝像頭 | GPS |
| 記錄移動軌跡 | 搖晃手機 | 亮度變化 | 語音輸入 | 拍攝視頻 | 地點定位 |
| 水平旋轉角度 | 傾斜手機 | ? | 聲音輸入 | 捕獲圖片 | ? |
| 加速度 | ? | ? | ? | 抓取顏色 | ? |
?
將界面可視化
?? 可視化的信息結構
信息結構的可視化就像繪制一張地圖，用戶可以方便地看到哪里是自己需要的，可以從哪里走從哪里回。
?? 內容信息的圖形化
?? 可感知的操作線索
操作可視化是讓用戶在界面中能夠更直觀地感受到所能操控元素，可以通過視覺上的強化或者動畫上的引導達到這樣的目的。
?? 看得見的反饋
用隱喻引導用戶
隱喻設計存在著多種設計形態——擬物、線索、環境——這幾種形態給用戶的直觀感受度是不一樣的，它們對于用戶的引導依次降低。但相反，越低的引導提示越是能讓用戶沉浸在使用環境中，專注于自己的任務。
?? 擬物化降低用戶認知
在擬物的界面中，用戶能通過一些熟悉的元素產生相應的通感，他們在生活中是怎樣的感受，就會在界面中有所映射。
形狀、材質、顏色……
?? 用線索搭建隱喻系統
通常應用了線索式設計的功能并非主流程的操作，更多的是可以讓部分用戶更方便地完成快捷操作。
?? 營造環境的隱喻
通過營造一個使用環境甚至可以讓用戶在不知不覺中被引導到我們所希望的狀態。
在移動界面的設計中，屏幕內的空間只是設計的一部分，我們常常會將屏幕外的空間利用起來，以擴展屏幕內的內容。
另外一種隱喻可以想象在內容塊的下方還隱藏著一些界面元素。
聲音的互動
?? 降低用戶注意力
聲音在移動設計中最基本的應用就是像在物理世界中一樣，及時反饋用戶的操作結果。
?? 制造產品的使用氛圍
?? 樹立品牌認知
?? 機器間的交流
動效
動效有什么作用？
?? 告訴用戶應該做什么
?? 提醒用戶將要去哪里
?? 幫助用戶減少焦慮
?? 引導用戶經歷故事
?? 引導用戶觸碰感知
?? 營造應用獨有氣質
適合動效的應用場景
分類
按照動效類型：運動、形變
按照動效場景：轉場、引導、反饋、加載、啟動畫面
轉場
需要從目的、場合、產品整體特點、實現性能等多方面考慮。
a)??????形變
翻頁：模擬現實生活中的翻頁，適合在擬物化較強的應用中使用。
開關門效果：有進入、出來的隱喻。適合在一級頁面和二級頁面之間使用。
縮小放大效果：體現了空間感，在平級、父子級頁面間可以使用。
折疊效果：適合對同一個對象進行變化或者兩個關聯的場景。
翻轉效果：在iOS平臺中相當常見。變化幅度大、節奏緊湊明快，適合大場景的轉換，要求翻轉前后的兩個界面存在一定的聯系。
b)??????運動
運動動效的設計主要考慮的是運動方式，從方向上入手，可以是左右、上下、前后；從形態上看，可以是直線、曲線、旋轉，此外還有更多形式的組合。在此基礎上，還可以根據運動的目的使用淡入淡出、亮度的變化、緩動的效果等使運動更自然，更引人注目，或者更貼近現實。
運動的方向最好在整個應用中保持單純和一致，過多的變化反而會讓用戶覺得疑惑。
運動的形態、特效，也需要根據界面的元素特點，或者在場景轉換中要達到的目的進行設計，而不是隨意使用。
在運動的形態、效果中，緩動以其貼近現實的質感和靈動變化的節奏，獲得眾多設計師的青睞。
一方面要控制運動的時間，另一方面，運動的節奏很重要。
c)??????無技巧轉場
無技巧專場是指場面的過渡不依靠后期的特效制作，而是在前一個場景里埋入一些線索，使兩個場面實現視覺、心理上的流程轉換。
利用相似因素轉場，即通過兩個場景間的相似因素作為轉換的紐帶，它可以不需要前后兩個場景間具有相同的主體，只需從中尋找相似的因素就可以完成這一連接。
引導
包括兩個方面：（1）對于隱藏內容、操作的引導；（2）新手幫助
ü? 適時出現和離開
·????????不要中斷用戶的操作
·????????當用戶可能觸發這一操作時在進行提醒
·????????如果提醒不會對進一步的操作造成影響，最好出現一下（建議3秒）就離開
ü? 突出主要功能
ü? 新手幫助的亮點
反饋
分為過程反饋和結果反饋——過程反饋是在操作過程中，界面對操作進行的反饋，告知用戶操作上的狀態變化；結果反饋是完成操作后，根據結果給出的反饋。
ü? 輕量、具有生命感的反饋
ü? 連貫、有一定過渡的形變
ü? 模擬現實、情感體驗
ü? 不要忽略過程反饋
加載
ü? 對于等待時間，有0.1秒、1秒、10秒3個關鍵點。
·????????當等待時間小于0.1秒時，我們可以不用作任何處理，否則會有畫蛇添足之感
·????????當等待時間在0.1秒到1秒之間時，可以使用動效為用戶提供等待提示，但此時的動效應盡量簡單，否則還未播放完畢就已經到達了操作結果。
·????????當等待時間超過1秒，就會打斷用戶原來的思路，從而降低效率。
·????????當等待時間超過10秒，就會有大量用戶失去耐心轉而去做其他的事情。
ü? 加載動效的方式有兩種，一種是將自己的品牌顏色質感等附加到期抽象的形狀中，然后讓這些抽象的形狀進行變化；另外一種是直接利用自己品牌的Logo進行動作或者形狀的變化，比如填充、旋轉等，甚至可以利用形象特點編出一個“迷你故事”。
ü? 一般需要提供等待時間，即呈現動效的同時帶有剩余時間的提示，最簡單的就是出現進度條的同時顯示還剩余多少時間。
啟動畫面
ü? 通過動效的輔助做出與眾不同、凸顯應用特質、貼近內心情感的設計
ü? 在設計中主要不要過于復雜、過于慢、過于繁瑣，否則不僅加重系統的負載，而且給人拖沓之感
ü? 可以是一個“小而美的故事”——比較適合特殊的場合，比如新版本上線、大的活動、節日等。在平時的啟動時可以簡化為單幅的圖片。
如何描述一段動效效果
運動動效的基本規范
ü? 位置
起始位置和終止位置
ü? 運動方式
過程是怎樣的，例如直線、曲線、旋轉
ü? 觸發行為
ü? 速度和節奏
ü? 明確各個運動對象的關系
形變動效的基本規范
ü? 大小
ü? 形狀
ü? 透明度
ü? 明暗
ü? 顏色的改變
ü? 組合效果
還需要事先考慮技術的可行性
動效設計方法
?? 運動形變，萬變不離其宗
?? 節奏速度，掌控曲線時長
?? 情感故事，擬物、隱喻、品牌
?? 結合操作，關聯輕量自然
?? 點到為止，切忌過猶不及
?? 尊重習慣，謹慎進行創新
?? 快速原型，多方溝通權衡
適配
客戶端產品的適配設計
適配的核心就是在多樣性的設備環境中追求體驗的一致，但這里的體驗并非交互、視覺上的一致，而是心理感受的一致。
移動設備的屏幕特點
每塊屏幕都是由屏幕尺寸、分辨率、屏幕密度三者相互組合而成。
分辨率：表示移動設備顯示屏上點的數量，單位是像素px
物理尺寸：在屏幕中，每個像素都有一定的尺寸，因此這么多的像素點組成的屏幕就會有長度和寬度，這個長寬就是我們時機感受到的屏幕物理尺寸大小。物理尺寸一般以屏幕的對角線長度表示，一般用英寸表示。
屏幕密度：每平方英寸中含有的像素點數量就是屏幕密度，屏幕密度其實是由每個像素點的大小決定。像素點的尺寸越小，屏幕密度越大。
各種屏幕尺寸的界面適配
?? 整體縮放：首頁
?? 間距增加：九宮格導航
?? 單向拉伸：列表
?? 智能調控：柵格列表
?? 擴展性：啟動畫面
橫豎屏狀態下的界面設計
如果沒有足夠的資源，可以考慮直接鎖定屏幕的旋轉，只提供給用戶橫屏/豎屏的使用模式。否則可以考慮單獨為其設計橫屏和豎屏的界面，以達到更好的效果。
橫屏相對豎屏更適合雙手持機操作。在設計橫屏時，應該充分利用屏幕寬度，創造更有利于橫向雙手操作的界面。
多設備的響應式設計
響應式設計倡導用一種全新的的方式去思考設計。它的理念是頁面的設計與開發應當根據用戶行為以及設備環境（系統平臺、屏幕尺寸、屏幕定向等）進行相當的響應與調整。無論用戶正在使用PC，平板還是手機，頁面應該都能夠自動調整布局、自動切換分辨率、圖片尺寸以及相關腳本功能等，以適應不同設備。
響應式設計首先考慮的是產品要兼容的設備類型和屏幕尺寸。并且要具體考慮到布局結構、導航、圖片、文字。
響應式布局模式
?? 左右雙列布局模式
?
?? 左右三列布局模式
內容多、層級多的網頁并不適合這種布局模式。
?? 綜合布局模式
適合于導航比較重要、內容層次比較多的大型復雜的網頁。
這種結構現在在網頁中應用的比較少，在客戶端中比較常見。
?? 封面式布局模式
?? 標題布局模式
?
適當地遵循用戶的認知和使用習慣是響應式設計要遵循的潛在規則。
首先通過對交互架構整體的組織，可以使菜單欄、工具欄、導航欄不管在哪些設備上，都可以滿足用戶使用相同或相似的規則進行操作，可以說給用戶一個各處皆適用的操作方式；其次可以通過對各個設備內容的組織，對內容的優先級做出判斷并給予適當的位置，減少用戶的記憶負擔。
隱藏可以有效地整合空間，讓小屏幕上的內容不擁擠，內容優先。但是隱藏必須遵循用戶的使用慣性和認知，讓用戶可以輕易地找到隱藏后的內容并進行操作。如隱藏的圖片總會依靠露出的缺圖來告訴用戶的內容還沒有瀏覽完，或者通過視覺元素的左右按鍵告訴用戶可以查看上下內容。
導航的響應式組織
?? 導航響應多種隱藏模式
?? 復雜網站的分布式導航響應設計模式
這樣的導航形式顯得復雜，有些條目被隱藏后，用戶很難確切地知道從哪里去找到它。需要與搜索緊密結合來彌補這種方式帶來的缺陷。
?? 精簡導航元素的響應模式
圖片的響應式變化
?? 圖片的響應可以結合前面講到的布局結構，屏幕由大到小，結構由多列到單列，這是圖片響應設計的基礎形式。
?? 在PC上頁面可以展示較多圖片，屏幕尺寸逐漸變小后，還可以采用隱喻的技術來實現在不同頁面大小下對圖片組的響應。隱藏的意義在于顯示主題信息，同時在需要的時候顯示被隱藏的內容。
?? 由文字信息是否比圖片重要來決定是否要刪除圖片。
文字的響應式展現
文字的組織形式包括響應后大篇幅文字內容的展示。文字的大小、長度、顯示形式（是否折行）、顯示位置、交互方式都是響應時需要處理的問題。
理性地看待響應式
?? 優勢
l? 開發、維護、運營成本優勢
l? 兼容性優勢
l? 改動靈活
?? 劣勢
l? 用戶需求
l? 開發成本
l? 加載速度
創新
創新技法詳解
?? 逆反法
打破習慣的思維方式
?? 離散法
將研究對象予以分離，創造出新概念新產品
?? 移植法
將一個研究對象的概念原理方法應用于另一個研究對象
?? 還原法
抓住事物的本質，回到根本，抓住關鍵，將最主要的功能抽出來
?? 強化法
強化事物屬性的某一個或某幾個方面
?? 組合法
將兩種或兩種以上的學說、技術、產品的一部分或全部進行適當結合，形成新原理、新技術、新產品的創造法則
?? 對應法
模擬相似、仿形仿生設計、類比聯想
評估創新的價值
影響的范圍
影響的人數越多，創新的風險就越大。因而在做創新嘗試的時候，應該避免在主流程上或者額用戶使用頻率高的地方，而應該在一些用戶量小，使用頻率低的功能上做嘗試。
用戶成本
用戶使用習慣的改變就是創新給用戶帶來的成本。如果是對原有功能的創新，就需要對比之前的設計，衡量變化給用戶帶來的影響；如果是全新的產品，應該對比常見或者主流應用的設計模式，尋找它們之間的差異。對操作有影響的常見因素包括各個功能的位置、操作流程、視覺風格等，可以從這些角度評估用戶為適應改變所付出的成本。
用戶收益
產品的創新是不是讓操作更便捷，界面是否更易懂、易記，是不是給用戶帶來了新體驗，一定要從用戶的場景衡量這些價值，而不僅僅是從設計師在產品上做出的創新設計來衡量。
工具
適合移動設計的工具
Axure、JustinMind、iPhone Mockup、Flash、POP、xScope、Skala Preview、Android DesignPreview、Balsamiq Mockups、DevRocket、iOS App Icon Template
一份好的移動交互原型
項目概要
項目名稱、項目背景、項目成員、項目目標、用戶體驗目標、版本歷史等
流程圖
整個產品的框架流程
交互原型
交互說明
在交互原型的界面基礎上，對界面的操作結果、異常流程做詳細說明。
可以觸摸的交互文檔
將設計輸出到實機上體驗
建立移動產品組件庫
高效的紙面原型
來自為知筆記(Wiz)
轉載于:https://www.cnblogs.com/Amandaliu/p/3724181.html
總結
- 上一篇： 前端工程师的修真秘籍（css、javas
- 下一篇： hadoop关闭安全模式