移動UI設計

不一樣的應用市場對於應用的文字描述作了信息架構的梳理。例如，iOS6的應用市場把文字內容分爲「內容提要」、「最新動態」、「信息」、「開發商信息」、「更新歷史」幾個部分；Google Play中，把文字內容分爲「說明」、「新功能」、「評論」、「更多內容」、「開發者」、「用戶還查看了一下內容」、「」用戶還安裝瞭如下應用」、「Google Play內容」幾個部分。

1）基本功能描述

注意描述文字在應用市場中的排版形式，在版式上讓用戶更易讀

2）運營吸引描述

例如，在內容上爲本身標記5顆星，並在首句中強調「已有大量的用戶已經在使用本應用」

ii、其次是圖片

圖片是比文字描述更重要的展現方式。設計師能夠根據你的應用所處的環境以及背景來肯定如何設置內容。

使用期：製造第一眼的好感

（1）應用圖標

應用圖標是移動應用的名片，很是值得花大力氣來打造

（2）程序閃屏

點擊應用圖標後展現給用戶的第一個界面就是閃屏，通常傳遞的是應用的功能、應用的品牌特徵、應用的使用說明，或者最新狀況等。在設計時須要充分考慮閃屏以及應用內容的結合，使它們可以一脈相承。

迭代器：引導用戶跟着產品更新

通常認爲3周到一個月的更新週期比較合理。

轉變交互設計思惟

PC端與移動應用，二者在設計方法論上是相似的，要有以人爲中心的設計理念，從用戶的核心價值、目標和用戶的特徵出發來思考設計，有本身的設計原則，關注產品內容的組織，提供符合用戶指望的信息架構，使用用戶熟悉和高效的導航操做，以及進行有趣的細節設計。

移動應用多樣化的使用情景

通常考慮三種主要的情景：休閒中、等候中、忙碌中

移動設備與PC不同的物理和交互特徵

電量、展示的信息有限、網絡流量、傳感器技術、手勢精度

小而美的移動應用框架
海量屏幕尺寸下的用戶體驗
發掘意想不到的產品創意
決定應用品質與神韻的動效設計
尊重、保護好用戶隱私

特徵

人-機-環協同的交互系統

$說明: C:\Users\dell\Downloads\人-機-環協同的交互系統 (1).png$

應用的使用情景特徵

光線

同一個屏幕內容，在環境光低照度下，屏幕亮度過亮，長時間閱讀會損傷視力；而在環境光照度較高，屏幕亮度太低時，用戶則會看不清屏幕內容。

環境噪音

網絡狀態

用戶的使用姿態

躺着、坐着、站着

單雙手

橫豎屏

持續時間

干擾任務

點錯了別的地方、車晃動……

移動網絡的特性

網絡載入速度對比

網絡類型	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	點擊、長按、滑動、輕掃、雙指縮放、雙指旋轉

各類手勢具備如下特徵：

Ø 延時

Ø 運動

Ø 壓力

Ø 方位

Ø 觸點數

Ø 序列

爲手勢設計時避免犯的錯

良好的手勢交互設計，要遵循的設計特性：

² 天然性

手勢自己是從人的基本行爲中延伸出來的交互技術，若是手勢自己符合用戶天然的操做特徵，那麼用戶既容易學會，也天然覺着有趣。

² 可發現型

如何在界面上給用戶提示，使用戶能快速上手，是衡量手勢是否足夠好的一個重要特徵。

² 反饋

人通常認爲100ms之內的反饋時間是瞬時的。

² 有趣的

² 合適的

設計時也須要考慮用戶的不一樣文化背景。

原則

主流移動操做系統的基本原則

Android	iOS	Windows Phone
使人陶醉	美學完整性	時尚
簡化個人生活	一致性	可以隨時隨地使用
讓我驚歎	直接操做	整潔
	反饋	動態效果
	隱喻	簡單、可讀、簡約
	用戶控制	保持一致
		真實
		創新

a) iOS做爲新一代智能手機平臺的鼻祖，強調直接的交互操做，鼓勵設計師們使用隱喻和擬物化的設計手法，在圖標和界面上使用高質感的特性，以此給用戶帶來了全新的體驗。

b) Android在全平臺的統一上作了不少努力，每一板的設計都在追求系統操做的流暢性、界面的簡潔性，而且在視覺上進一步突出了與其餘平臺的差別。

c) Windows Phone則獨闢蹊徑地使用了Metro的視覺風格，配以簡潔、流暢的用戶界面，給用戶留下了深入的印象。

移動設計八原則

內容優先

Ø 重組內容，使內容符合移動的特徵

Ø 優先突出用戶須要的信息，而簡化界面的導航

Ø 適時提升屏幕空間的利用率

應該把屏幕資源更多地給內容而不是導航；只在適當的時候，可讓用戶呼出導航便可。

爲觸摸而設計

Ø 以信息架構爲基礎，創建手勢交互規範

讓用戶在應用的任何界面中都知道怎麼使用手勢，並達到預期的結果。這須要設計師提供一套基於應用信息架構的手勢規範，它將是導航與交互的基礎。

Ø 優先設計天然的手勢交互，而不僅是Tap點擊

Ø 引導用戶在情景中學習手勢操做

除了基本的用戶都熟知的手勢外，其餘手勢在使用時都須要給出提示和引導。

Ø 特殊手勢不是必須的

Ø 可觸區域必須大於7x7mm，儘可能大於9x9mm

Ø 手勢操做要提供過程反饋提示

轉換輸入方式

Ø 減小文本輸入，轉換輸入方式

Ø 簡化輸入選項，變填空爲選擇

Ø 使用手機已有的傳感器輸入

語音、掃描識別（二維碼、條碼、文字等）、LBS技術等

流暢性

Ø 手指及手勢的操做流

操做路徑短能在必定程度上被認爲是操做效率更高，流暢性更好。

Ø 用戶的注意流

用戶在操做界面時，注視點轉移造成的焦點流連起來就是注意流，注意流是否圓滑也是判斷界面是否流暢的重要標誌。

Ø 界面反饋的轉場流暢性

讓應用的界面轉場過渡以及反饋都是流暢的。

多通道設計

多通道設計是指系統的輸入輸出均可以由視覺、聽覺、觸覺等來協做完成。

易學性

使用前引導界面，其實徹底沒有必要。若是實在須要，也建議最好不要超過3屏內容，要有快速退出的操做。

對於功能性引導設計，更好地幫助設計是把新功能的提示與產品自己作更完美的結合，這樣用戶在他恰好要使用的情境下得到提示，讓用戶感到友好而不突兀，這樣的設計更合理。

在用戶須要的時候才提供對應的幫助。

爲中斷而設計

Ø 保存用戶的操做，減小重複勞動

a) 網絡中斷操做

b) 編輯中斷操做

Ø 銜接用戶的記憶而不是讓用戶重頭開始

智能有愛

評價一個移動應用體驗的好壞，除了要看它是否知足用戶需求和是否具備友好的可用性外，可以讓用戶感覺到驚喜是在移動應用設計中最爲推崇的。

驚喜有趣、智能高效、貼心

貼心的設計每每會幫助用戶提早想到一些事情，並知足用戶還未意識到的需求，在用戶在犯錯誤的時候能自動彌補、糾正用戶的操做，並提出舒適的提醒。

框架

產品的框架設計是將信息合理組織、有效展現的一種方式，這種方式將影響到整個產品的穩定和擴展。

框架的深度和廣度

一個好的框架設計是創建優秀的等級式系統，將信息按用戶熟悉易理解的方式進行分類，並創建等級層次關係。

廣度框架&深度框架

$說明: C:\Users\dell\Downloads\移動產品UI架構.png$

廣度越大，同一層及的入口越多，用戶在搜索入口時，須要更多的識別時間，也會佔用更多地屏幕空間。但多入口的方式，也容易讓用戶知道產品主要是用來作什麼的。同時因爲是展開式的入口，用戶能夠更快捷、更容易獲取到本身須要的信息。無限制的廣度，會讓用戶對產品提供的核心價值迷惑。

而深度越深，內容的層級越多，用戶獲取信息的路徑就越長，操做起來更繁瑣。因爲相關入口較深，對於新手會有搜索目標難度的增長。深度型的框架，必然也給屏幕更多地空間，留給用戶最關心的內容，讓用戶能更快地獲取信息。

在進行框架設計的時候，權衡好深度和廣度，要考慮的因素不少，包括產品的核心價值、內容的數量、用戶的熟練程度、內容組織的有效性、目標內容的使用頻率、內容之間的語義相關性、使用情景特徵，甚至是手機的反應時間等。

最簡單和流程的產品框架，是淺而窄的方式。

移動應用的框架分析

Ø 從應用場景角度來看，產品框架能夠更淺一點

手機場景碎片化時間的特性以及情境的複雜性

Ø 從硬件設備來看，產品框架能夠更窄一點

小屏幕，應該突出對用戶來講重要的內容

產品框架的移動型

怎樣設計淺而窄的產品框架？

Ø 移動化

根據業務功能，分析移動特徵，提供給用戶最合適的基於情境的設計。在交互設計階段，更是要應用信息組織方式，勇於再簡潔功能，組合同類信息，隱藏次要功能，轉移一些功能到系統平臺中。

Ø 路徑扁平化

甄別出用戶須要的核心內容，使核心內容的路徑扁平化，可使用戶的連續性和效率獲得提高。

Ø 層及信息合併

Ø 隱藏

移動應用導航的設計模式

從立體空間的維度來看，導航元素能夠在頁面中，也能夠在界面先後。從同一平面的維度來看，導航元素能夠在頁面中，也能夠在上下左右四個方位擴展。

標籤式

通常信息被明確分爲幾類，此分類根據邏輯和重要性通常控制在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 加載速度

創新

創新技法詳解

Ø 逆反法

打破習慣的思惟方式

Ø 離散法

將研究對象予以分離，創造出新概念新產品

Ø 移植法

將一個研究對象的概念原理方法應用於另外一個研究對象

Ø 還原法

抓住事物的本質，回到根本，抓住關鍵，將最主要的功能抽出來

Ø 強化法

強化事物屬性的某一個或某幾個方面

Ø 組合法

將兩種或兩種以上的學說、技術、產品的一部分或所有進行適當結合，造成新原理、新技術、新產品的創造法則

Ø 對應法

模擬類似、仿形仿生設計、類比聯想

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。