1、移動互聯網終端操作界面與交互設計研究梅雪目錄1移動設備界面尺寸移動設備界面尺寸和基本組成元素和基本組成元素2移動設備小屏幕移動設備小屏幕與終端特與終端特殊性殊性對界面與交互設計的對界面與交互設計的影響影響3移動互聯網終端文移動互聯網終端文字的字體與編排字的字體與編排4移動互聯網終端界移動互聯網終端界面與交互設計模式面與交互設計模式概括概括與創新與創新1.移動設備界面尺寸和基本組成元素移動設備界面尺寸 VS.移動設備基本組成元素1.移動設備界面尺寸和基本組成元素移動設備界面尺寸iPhone的APP界面一般由四個元素組成，分別是：狀態欄、導航欄、主菜單欄、內容區域狀態欄：就是我們經常說的信號、運營

2、商、電量等顯示手機狀態的區域導航欄：顯示當前界面的名稱，包含相應的功能或者頁面間跳轉的按鈕主菜單欄：類似于頁面的主菜單，提供整個應用的分類內容的快速跳轉內容區域：展示應用提供的相應內容，整個應用中布局變更最為頻繁的P.S. 在最新的 iOS7 的風格中，蘋果已經開始慢慢弱化狀態欄的存在，將狀態欄和導航欄合在了一起1.移動設備界面尺寸和基本組成元素移動設備界面尺寸iphone6 plus UI物理版是iphone6 plus實際的屏幕像素。iphone6 plus UI設計版是我們截屏iphone6 plus的界面在ps中去量，發現的尺寸。iphone6 plus UI放大版是iphone6 p

3、lus的尺寸等比放大1.5倍得出的分辨率。1.移動設備界面尺寸和基本組成元素移動設備界面尺寸1.移動設備界面尺寸和基本組成元素1.移動設備界面尺寸和基本組成元素Iphone圖標尺寸1.移動設備界面尺寸和基本組成元素Android手機尺寸1.移動設備界面尺寸和基本組成元素Android手機尺寸1.移動設備界面尺寸和基本組成元素Android手機圖標尺寸1.移動設備界面尺寸和基本組成元素Android手機系統分辨率占有率1.移動設備界面尺寸和基本組成元素Android1、尺寸及分辨率Android 界面尺寸：480 x800、720 x1280、1080 x1920. Android 比 iPho

4、ne 的尺寸多了很多套，建議取用720 x1280 這個尺寸，這個尺寸 720 x1280中顯示完美，在 1080 x1920 中看起來也比較清晰；切圖后的圖片文件大小也適中，應用的內存消耗也不會過高。 這樣的手機屏幕尺寸是：5寸 即屏幕對角線是5英寸。2、界面基本組成元素Android 的 APP 界面和 iPhone 的基本相同：狀態欄，導航欄、主菜單欄以及中間的內容區域.1.移動設備界面尺寸和基本組成元素AndroidHOLO風格將下方的主菜單移動到了導航欄下面，這樣的方式解決了現在很多手機去除實體按鍵后在屏幕中顯示而出現的雙底欄的尷尬情景。1.移動設備界面尺寸和基本組成元素移動設備界面

5、尺寸iPhone的APP界面一般由四個元素組成，分別是：狀態欄、導航欄、主菜單欄、內容區域狀態欄：就是我們經常說的信號、運營商、電量等顯示手機狀態的區域導航欄：顯示當前界面的名稱，包含相應的功能或者頁面間跳轉的按鈕主菜單欄：類似于頁面的主菜單，提供整個應用的分類內容的快速跳轉內容區域：展示應用提供的相應內容，整個應用中布局變更最為頻繁的P.S. 在最新的 iOS7 的風格中，蘋果已經開始慢慢弱化狀態欄的存在，將狀態欄和導航欄合在了一起2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角與界面元素的布局手機的移動特征對設計的影響F式布局式布局用戶瀏覽網頁的一

6、般模式：先看看頁面的左上角，了解一下這是什么網站（因此此處適合放置Logo)“知道是什么”然后掃描一下頁面的頂部（導航欄，搜索欄）“了解用法”下一步，用戶的視線下移，開始閱讀下一行的內容。用戶進入“掃描模式”，一旦找到感興趣的內容便會打開。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響WEB端界面元素的布局F式布局式布局2.移動設備小屏幕與終端特殊性對界面與交互設計的影響WEB端界面元素的布局F式布局式布局-眼動熱點圖眼動熱點圖熱區（途中紅色、黃色、橙色部分）代表用戶注意力最集中的地方。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響WEB端界面元素的布局F式布局式布局- 從上到下從

7、左到右按照邏輯，我們得出以下結論：品牌標志和導航應該放在頁面的頂部，這是用戶對網站的第一印象。在內容結構中，圖片更容易獲得關注。用戶瀏覽完圖片后，下一個關注點便是標題。用戶會大致的瀏覽文本，但是往往不會通讀。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響WEB端界面元素的布局2.移動設備小屏幕與終端特殊性對界面與交互設計的影響手機本身的物理特征受限對設計的影響用戶體驗。UX指用戶體驗，UX設計指以用戶體驗為中心的設計。人與系統交互時的感覺就是用戶體驗。UX設計師研究和評估一個系統的用戶體驗，關注與該系統的易用性，價值體現，實用性，高效性等。例如，研究一個電子商務站點的結賬（checkou

8、t）流程，看看流程是否對用戶友好易用；研究子系統的組件，比如研究用戶在填寫Web表單的時候如何更加高效和舒服。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角熱區：點擊區域的成功率比較高的區域。死角：點擊區域的成功率很低的區域。所以在設計當中，要盡量將最重要的界面交互元素放置在熱區范圍當中。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角淘寶UED針對中國人的實驗2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角淘寶UED針對中國人的實驗2.移動設備小屏幕與終端特殊性對界

9、面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角在右手持機的狀況下，有效觸控區域位于屏幕的左下方。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角底部原則：移動系統或應用中一些重要的工具欄或導航結構通常被放置在界面底部.底部原則不僅與拇指的作用范圍有關。當我們使用拇指在屏幕上進行操作的時候，手指下方的內容部分將會被遮擋住；只有將交互控制元素放在內容區域的下方，才能讓這種負面效應降至最低。其實這是一條具有廣泛適用性的設計原則，我們可以在很多其他類型的設備中看到這種原理的體現，例如iPod、計算器、帶有實體鍵盤的普通手機、電子秤等，無不是內容在上，

10、控制在下。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角淘寶UED針對中國人的實驗2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角對于iPhone中的客戶端應用，盡量將重要的交互對象及導航結構放在界面底部。對于Android中的客戶端應用，盡量將重要的交互對象及導航結構放在界面頂部2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角平板電腦的熱區和死角 由于平板電腦持機方式不同，熱區的位置也有所變化。iPad的拿法在很大程度上取決于整個人的姿態。我們在站著的時候，需要一手

11、持機一手操作；坐在桌前的時，我們往往會用一只手像支架一樣從側面架住iPad，而另外一只手用來戳戳點點 持機的那只手通常會握住機身的上半部分，因為這樣最符合杠桿原理；相應的，拇指熱區基本會位于屏幕的前三分之一部分，偏向左上角或右上角。其次，iPad的屏幕相對較大，用戶很難像使用iPhone那樣瞄上一眼就能看到界面當中的幾乎全部內容。用戶通常會首先將目光聚焦于iPad界面的頂部區域，所以我們的設計方案也要相應的在這一點上符合用戶習慣。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角平板電腦的熱區和死角在iPad及同類平板設備的應用當中，主要的交互控制對象應

12、該被放置在界面的左上角或右上角，以便拇指可以很容易的觸摸到。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角平板電腦的熱區和死角 盡量避免將交互元素放在屏幕頂端正中間的位置，否則用戶在進行操作的時候，手掌會將很大一部分內容遮住。 實際上，任何會對下方內容產生直接控制作用的交互元素都不應該被放在這個位置。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動設備小屏幕的準確率問題、熱區和死角平板電腦的熱區和死角 盡對于那些起到界面導航作用的交互元素(例如“菜單”、“返回”、“關閉”等)，以及用來完成分享、收藏、編輯、刪除等功能的按鈕，通常可以將它們放置

13、在界面頂部。對于那些用于瀏覽或預覽內容的控制元素來說，界面底部是最佳位置。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動互聯網終端界面元素的布局（1）由于手機用戶大多數情景下是單手操作手機，所以要考慮到產品的重要功有是否能單手完成，并且要注意在同一個產品中，手勢操作種類不要太多，不要用同一個手勢實現不同操作。例如現在流行的側邊滑出欄導航。如果設計了左滑可呼出側邊欄導航那么左側滑動就不能返回上一級，否則會引引起用戶的混亂。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動互聯網終端界面元素的布局（2）由于移動終端用戶使用場景復雜，往往有很多干擾，要盡量減輕用戶的記憶負荷和學習成本

14、。在設計客戶端的過程中，要求邏輯簡單統一，達成目標的操作步驟要盡量少。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動互聯網終端界面元素的布局（3） 移動應用客戶端的界面層次最好不要超過3級，否則網站信息架構容易混亂。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動互聯網終端界面元素的布局（4）要善于利用移動終端除了視覺以外的的其他感覺通道信息，例如聽覺、觸覺，用戶也許會一邊使用手機，一邊做其它事，并非一直盯著屏幕看，所以要使用聲音和振動等方式提示用戶。2.移動設備小屏幕與終端特殊性對界面與交互設計的影響移動互聯網終端界面元素的布局（5）由于移動設備常常處于不同的網速中，所以要

15、對交互速度和緩慢的下載速度做出有針對性的設計解決方案。特別要注意不要在移動應用中濫用圖片，圖片下載速度比文字要慢的多，而且很費流量。 另一方面，要給用戶提供反饋。需要讓用戶知道下載進行到一個什么樣的階段，還需要多長時間等，在等待時間里展示些小動畫等有趣的東西，這樣做雖然不能加快他們的瀏覽速度，但可以使用戶不至于在無聊中等待。3.移動互聯網終端文字的字體與編排字體的選擇文字的編排文字的層級關系設計3.移動互聯網終端文字的字體與編排字體的選擇與大小iPhone 上的字體英文為： HelveticaNeue 至于中文，Mac下用的是黑體-簡，Win下則為華文黑體。下圖是百度用戶體驗做過的一個小調查，

16、可以看出用戶可接受的文字大小，像素為單位，也就是大家在PS里的文字像素大小。3.移動互聯網終端文字的字體與編排字體的選擇與大小Android 上的字體為： Droid sans fallback ，是谷歌自己的字體，與微軟雅黑很像。同樣，百度用戶體驗的調查中，可以看出用戶可接受的文字相應問題。3.移動互聯網終端文字的字體與編排文字的編排（1） 留足空間字體之間的空間對字體的影響是非常巨大的，甚至超過了字母本身對字體的影響。如果字母間距過窄，將會導致文本閱讀困難。（2）行寬行寬是指一行文字的長度。在上文我們已經討論過，一行顯示14個左右的中文字符比較恰當。3.移動互聯網終端文字的字體與編排文字的

17、編排（3）寬松行距、緊密行距行距是行與之間的空隙，如果行距太緊密，會讓視線難以從上一行的行尾過渡到下一行行首。但行距要是太寬松，字間距又會開始形成隊列。行距通常以1.4em為標準，但在電腦屏上顯示，這樣的距離顯得過于緊密。不過，在移動端行寬變短相應也該縮小行距，1.4em是一個恰當的選擇。3.移動互聯網終端文字的字體與編排文字的編排（4）不要忽視起伏邊起伏邊是指一段文字的邊緣。現在大多數中文網站都是居左對齊，所以會導至每行右邊沿參差不齊。當視線從上一行行尾掃視到下一行行首時，最好要讓大腦可以估計下一次跳躍的距離和角度，假如文字左側邊緣是平的，那么間距保持一致，就能加快閱讀速度。由此有一條很重要

18、的規則就是不應當將兩三行以上的文字居中對齊。兩端對齊的意思是把文字設置成每行文字所占空間是相等的，采用這種方式，兩側都不會產生起伏邊。但是兩端對齊也有缺點，那就是文字間產生的間隙不一樣寬。甚至有時一行中只有幾個字，而在下一行則填滿了，非常不協調。更窄的行寬會加重兩端對齊的問題，因此兩端對齊的文字在移動端是難以閱讀的，所以絕對不能在移動端使用兩端對齊。3.移動互聯網終端文字的字體與編排文字的層級關系設計 文字間的層能夠告訴用戶哪些是主要信息，哪些是次要信息，引導用戶的閱讀次序和主次。如果網頁中的文字層次不分明會讓用戶感到混亂厭煩、不知所措，沒有主次關系，使用戶沒有讀下云的欲望，用戶體驗差。談到層

19、級關系時，在HTML代碼語言中我們通常是指的H1到H6這六個層級。另外還有一種特殊的層次也會影響我們的閱讀，即字母間距應當小于字間距，字間距又得小于行間距，行間距要小于段落間距。要注意這些特殊層次才能在移動端創造最佳閱讀體驗。4.移動互聯網終端界面與交互設計模式概括與創新移動互聯網終端界面與交互設計模式概括移動互聯網終端界面與交互設計的創新4.移動互聯網終端界面與交互設計模式概括與創新移動互聯網終端界面與交互設計模式概括內容優先：界面布局應以內容為核心，提供符合用戶期望的內容。為觸摸而設計：界面的交互系統以自然手勢為基礎建構，符合人體工學并保持一致性。轉換輸入方式：使用各種手機的設備特性和設計

20、手段，減少在應用內的文字輸入。流暢性：保持應用交互的手指及手勢的操作流、用戶的注意流和界面反饋轉場的流暢性。4.移動互聯網終端界面與交互設計模式概括與創新移動互聯網終端界面與交互設計模式概括多通道設計：發揮設備的多通道特性、協同的多通道界面和交互，讓用戶更有真實感和沉浸感。（多通道設計是指系統的輸入和輸出都可以由視覺、聽覺、觸覺等來協作完成）易學性：保持界面架構簡單、明了，導航設計清晰易理解，操作簡單可見，通過界面元素的表意的和界面提供的線索就能讓用戶清楚地知道其操作方式。為中斷而設計：考慮應用的使用情境，確保在各個產出中斷的情境下，讓用戶恢復之前的操作，保持用戶的勞動付出。智能有愛：給用戶提

21、供讓他感到驚喜有趣的、智能高效的、貼心的設計。4.移動互聯網終端界面與交互設計模式概括與創新為觸摸而設計建立手勢交互規范建立手勢交互規范在一個移動應用中，手勢的統一性非常重要。同一頁面內，盡量不要多用幾個手勢操作。讓用戶在應用的任何界面中都知道怎么使用手勢，并達到預期的結果。這需要設計師提供一套基于應用信息架構的手勢規范，它將是導航與交互的基礎。4.移動互聯網終端界面與交互設計模式概括與創新為觸摸而設計觸控目標的尺寸大小觸控目標的尺寸大小最小可用的UI目標大小的手指元素是：食指常用操作應有7 7毫米1毫米的間距拇指常用操作應有8 8毫米2毫米的間距各類型的表單組件應該有5毫米的最小間距可觸區域

22、必須大于可觸區域必須大于77 mm盡量大于盡量大于 99mm4.移動互聯網終端界面與交互設計模式概括與創新轉換輸入方式減少文本輸入，轉化輸入形式在數字輸入過程中，常常會把文字的輸入轉化為基本的手勢輸入。手勢操作會以更快的形式進行輸入，提升了輸入的效率。如天貓客戶端的價格輸入轉化為手勢拔動。簡化輸入選項，變填空為選擇在設置輸入或者對于一些已知項目的輸入中，盡量把用戶要輸入的內容變成選擇。日期、地址等本身可以轉化為選擇項的內容，盡量使用選擇輸入。使用手機已有的傳感器輸入使用語音、掃描識別（二維碼、條碼、文字等）減少用戶的輸入，給用戶提供便利。4.移動互聯網終端界面與交互設計模式概括與創新移動互聯網

23、終端界面與交互設計的創新多通道更輕量的設計利用留白和卡片式設計只用一種字體使用更簡潔的配色方案手勢分層的界面動態效果4.移動互聯網終端界面與交互設計模式概括與創新多通道更輕量的設計“扁平化設計” 去除了多余的傾斜和陰影，在 app 中采用一種更加輕量化的美學，界面更簡單，只關注獲取核心信息，拋開所有無用的設計元素。4.移動互聯網終端界面與交互設計模式概括與創新利用留白和卡片式設計 以前，人們會使用線條和各種分隔符號來區分界面上的不同區域，但實際上這種方式現在看來會顯得過于擁擠。在設計中去掉線條通過留白和卡片的方式呈現內容，可以創造出更干凈的界面。4.移動互聯網終端界面與交互設計模式概括與創新只用一種字體 減少屏幕上字體的數量才能真正發現排版的力量。設計師不需要使用多種字體，只用一種