移動界面交互設(shè)計素材學(xué)習(xí)教案

1、會計學(xué)1移動界面交互移動界面交互(jioh)設(shè)計素材設(shè)計素材第一頁，共61頁。目錄(ml)1移動設(shè)備移動設(shè)備(shbi)界面尺寸和基本組界面尺寸和基本組成元素成元素2移動設(shè)備小屏幕與終端特移動設(shè)備小屏幕與終端特殊性對界面殊性對界面(jimin)與交與交互設(shè)計的影響互設(shè)計的影響3移動互聯(lián)網(wǎng)終端文字移動互聯(lián)網(wǎng)終端文字的字體與編排的字體與編排4移動互聯(lián)網(wǎng)終端界移動互聯(lián)網(wǎng)終端界面與交互設(shè)計模式面與交互設(shè)計模式概括概括與創(chuàng)新與創(chuàng)新第1頁/共61頁第二頁，共61頁。1.移動設(shè)備界面尺寸(ch cun)和基本組成元素移動設(shè)備界面(jimin)尺寸 VS.移動設(shè)備基本組成元素第2頁/共61頁第三頁，共61頁。

2、1.移動設(shè)備(shbi)界面尺寸和基本組成元素移動設(shè)備(shbi)界面尺寸iPhone的APP界面(jimin)一般由四個元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄、內(nèi)容區(qū)域狀態(tài)欄：就是我們經(jīng)常說的信號、運營商、電量等顯示手機狀態(tài)的區(qū)域?qū)Ш綑冢猴@示當(dāng)前界面(jimin)的名稱，包含相應(yīng)的功能或者頁面間跳轉(zhuǎn)的按鈕主菜單欄：類似于頁面的主菜單，提供整個應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個應(yīng)用中布局變更最為頻繁的P.S. 在最新的 iOS7 的風(fēng)格中，蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航欄合在了一起第3頁/共61頁第四頁，共61頁。1.移動設(shè)備界面(jimin)

3、尺寸和基本組成元素移動(ydng)設(shè)備界面尺寸iphone6 plus UI物理(wl)版是iphone6 plus實際的屏幕像素。iphone6 plus UI設(shè)計版是我們截屏iphone6 plus的界面在ps中去量，發(fā)現(xiàn)的尺寸。iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。第4頁/共61頁第五頁，共61頁。1.移動設(shè)備(shbi)界面尺寸和基本組成元素移動(ydng)設(shè)備界面尺寸第5頁/共61頁第六頁，共61頁。1.移動設(shè)備界面(jimin)尺寸和基本組成元素第6頁/共61頁第七頁，共61頁。1.移動設(shè)備界面尺寸(ch cun)和基本組

4、成元素Iphone圖標(biāo)尺寸(ch cun)第7頁/共61頁第八頁，共61頁。1.移動設(shè)備(shbi)界面尺寸和基本組成元素Android手機(shu j)尺寸第8頁/共61頁第九頁，共61頁。1.移動設(shè)備界面尺寸和基本組成(z chn)元素Android手機(shu j)尺寸第9頁/共61頁第十頁，共61頁。1.移動設(shè)備(shbi)界面尺寸和基本組成元素Android手機(shu j)圖標(biāo)尺寸第10頁/共61頁第十一頁，共61頁。1.移動設(shè)備界面尺寸(ch cun)和基本組成元素Android手機(shu j)系統(tǒng)分辨率占有率第11頁/共61頁第十二頁，共61頁。1.移動設(shè)備界面尺寸(ch c

5、un)和基本組成元素Android1、尺寸及分辨率Android 界面尺寸：480 x800、720 x1280、1080 x1920. Android 比 iPhone 的尺寸多了很多套，建議取用 720 x1280 這個尺寸，這個尺寸 720 x1280中顯示完美，在 1080 x1920 中看起來也比較清晰；切圖后的圖片文件大小也適中，應(yīng)用(yngyng)的內(nèi)存消耗也不會過高。 這樣的手機屏幕尺寸是：5寸 即屏幕對角線是5英寸。2、界面基本組成元素Android 的 APP 界面和 iPhone 的基本相同：狀態(tài)欄，導(dǎo)航欄、主菜單欄以及中間的內(nèi)容區(qū)域.第12頁/共61頁第十三頁，共61頁

6、。1.移動設(shè)備界面尺寸和基本(jbn)組成元素AndroidHOLO風(fēng)格(fngg)將下方的主菜單移動到了導(dǎo)航欄下面，這樣(zhyng)的方式解決了現(xiàn)在很多手機去除實體按鍵后在屏幕中顯示而出現(xiàn)的雙底欄的尷尬情景。第13頁/共61頁第十四頁，共61頁。1.移動設(shè)備(shbi)界面尺寸和基本組成元素移動(ydng)設(shè)備界面尺寸iPhone的APP界面一般由四個元素組成，分別是：狀態(tài)欄、導(dǎo)航(dohng)欄、主菜單欄、內(nèi)容區(qū)域狀態(tài)欄：就是我們經(jīng)常說的信號、運營商、電量等顯示手機狀態(tài)的區(qū)域?qū)Ш?dohng)欄：顯示當(dāng)前界面的名稱，包含相應(yīng)的功能或者頁面間跳轉(zhuǎn)的按鈕主菜單欄：類似于頁面的主菜單，提供整個

7、應(yīng)用的分類內(nèi)容的快速跳轉(zhuǎn)內(nèi)容區(qū)域：展示應(yīng)用提供的相應(yīng)內(nèi)容，整個應(yīng)用中布局變更最為頻繁的P.S. 在最新的 iOS7 的風(fēng)格中，蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航(dohng)欄合在了一起第14頁/共61頁第十五頁，共61頁。2.移動設(shè)備小屏幕(pngm)與終端特殊性對界面與交互設(shè)計的影響移動設(shè)備小屏幕的準(zhǔn)確率問題、熱區(qū)和死角與界面元素的布局手機的移動特征(tzhng)對設(shè)計的影響第15頁/共61頁第十六頁，共61頁。F式布局式布局用戶瀏覽用戶瀏覽(li ln)網(wǎng)頁的一般模式：網(wǎng)頁的一般模式：先看看頁面的左上角，了解一下這是什么網(wǎng)站（因此此處適先看看頁面的左上角，了解一下這是什么網(wǎng)

8、站（因此此處適合放置合放置Logo)“知道是什么知道是什么”然后掃描一下頁面的頂部（導(dǎo)航欄，搜索欄）然后掃描一下頁面的頂部（導(dǎo)航欄，搜索欄）“了解用了解用法法”下一步，用戶的視線下移，開始閱讀下一行的內(nèi)容。下一步，用戶的視線下移，開始閱讀下一行的內(nèi)容。用戶進入用戶進入“掃描模式掃描模式”，一旦找到感興趣的內(nèi)容便會打開。，一旦找到感興趣的內(nèi)容便會打開。2.移動設(shè)備小屏幕與終端特殊性對界面(jimin)與交互設(shè)計的影響WEB端界面(jimin)元素的布局第16頁/共61頁第十七頁，共61頁。F式布局式布局(bj)2.移動設(shè)備小屏幕與終端特殊性對界面與交互(jioh)設(shè)計的影響WEB端界面元素(yu

9、n s)的布局第17頁/共61頁第十八頁，共61頁。F式布局式布局(bj)-眼動熱點圖眼動熱點圖熱區(qū)（途中紅色、黃色、橙色部分）代表(dibio)用戶注意力最集中的地方。2.移動設(shè)備(shbi)小屏幕與終端特殊性對界面與交互設(shè)計的影響WEB端界面元素的布局第18頁/共61頁第十九頁，共61頁。F式布局式布局(bj)- 從上到下從上到下 從左到從左到右右按照邏輯，我們得出以下結(jié)論：品牌標(biāo)志和導(dǎo)航應(yīng)該放在頁面的頂部，這是用戶對網(wǎng)站的第一印象。在內(nèi)容結(jié)構(gòu)中，圖片更容易獲得關(guān)注。用戶瀏覽完圖片后，下一個關(guān)注點便是標(biāo)題(biot)。用戶會大致的瀏覽文本，但是往往不會通讀。2.移動設(shè)備小屏幕(pngm)與

10、終端特殊性對界面與交互設(shè)計的影響WEB端界面元素的布局第19頁/共61頁第二十頁，共61頁。2.移動(ydng)設(shè)備小屏幕與終端特殊性對界面與交互設(shè)計的影響手機本身的物理(wl)特征受限對設(shè)計的影響用戶體驗。UX指用戶體驗，UX設(shè)計指以用戶體驗為中心的設(shè)計。人與系統(tǒng)交互時的感覺就是用戶體驗。UX設(shè)計師研究和評估一個系統(tǒng)的用戶體驗，關(guān)注與該系統(tǒng)的易用性，價值體現(xiàn)，實用性，高效性等。例如，研究一個電子商務(wù)站點的結(jié)賬（checkout）流程，看看流程是否對用戶友好易用；研究子系統(tǒng)的組件(z jin)，比如研究用戶在填寫Web表單的時候如何更加高效和舒服。第20頁/共61頁第二十一頁，共61頁。2.移

11、動(ydng)設(shè)備小屏幕與終端特殊性對界面與交互設(shè)計的影響移動(ydng)設(shè)備小屏幕的準(zhǔn)確率問題、熱區(qū)和死角熱區(qū)：點擊區(qū)域的成功率比較高的區(qū)域。死角：點擊區(qū)域的成功率很低的區(qū)域。所以在設(shè)計當(dāng)中，要盡量(jnling)將最重要的界面交互元素放置在熱區(qū)范圍當(dāng)中。第21頁/共61頁第二十二頁，共61頁。2.移動設(shè)備(shbi)小屏幕與終端特殊性對界面與交互設(shè)計的影響移動(ydng)設(shè)備小屏幕的準(zhǔn)確率問題、熱區(qū)和死角淘寶UED針對(zhndu)中國人的實驗第22頁/共61頁第二十三頁，共61頁。2.移動設(shè)備(shbi)小屏幕與終端特殊性對界面與交互設(shè)計的影響移動設(shè)備小屏幕(pngm)的準(zhǔn)確率問題、熱區(qū)

12、和死角淘寶UED針對(zhndu)中國人的實驗第23頁/共61頁第二十四頁，共61頁。2.移動(ydng)設(shè)備小屏幕與終端特殊性對界面與交互設(shè)計的影響移動(ydng)設(shè)備小屏幕的準(zhǔn)確率問題、熱區(qū)和死角在右手持機的狀況下，有效觸控區(qū)域(qy)位于屏幕的左下方。第24頁/共61頁第二十五頁，共61頁。2.移動(ydng)設(shè)備小屏幕與終端特殊性對界面與交互設(shè)計的影響移動設(shè)備小屏幕(pngm)的準(zhǔn)確率問題、熱區(qū)和死角底部原則：移動(ydng)系統(tǒng)或應(yīng)用中一些重要的工具欄或?qū)Ш浇Y(jié)構(gòu)通常被放置在界面底部.底部原則不僅與拇指的作用范圍有關(guān)。當(dāng)我們使用拇指在屏幕上進行操作的時候，手指下方的內(nèi)容部分將會被遮擋住

13、；只有將交互控制元素放在內(nèi)容區(qū)域的下方，才能讓這種負(fù)面效應(yīng)降至最低。其實這是一條具有廣泛適用性的設(shè)計原則，我們可以在很多其他類型的設(shè)備中看到這種原理的體現(xiàn)，例如iPod、計算器、帶有實體鍵盤的普通手機、電子秤等，無不是內(nèi)容在上，控制在下。第25頁/共61頁第二十六頁，共61頁。2.移動(ydng)設(shè)備小屏幕與終端特殊性對界面與交互設(shè)計的影響移動設(shè)備小屏幕的準(zhǔn)確率問題(wnt)、熱區(qū)和死角淘寶UED針對(zhndu)中國人的實驗第26頁/共61頁第二十七頁，共61頁。2.移動設(shè)備小屏幕(pngm)與終端特殊性對界面與交互設(shè)計的影響移動設(shè)備(shbi)小屏幕的準(zhǔn)確率問題、熱區(qū)和死角對于iPhone

14、中的客戶端應(yīng)用，盡量將重要的交互對象及導(dǎo)航結(jié)構(gòu)放在界面(jimin)底部。對于Android中的客戶端應(yīng)用，盡量將重要的交互對象及導(dǎo)航結(jié)構(gòu)放在界面(jimin)頂部第27頁/共61頁第二十八頁，共61頁。2.移動設(shè)備小屏幕(pngm)與終端特殊性對界面與交互設(shè)計的影響移動設(shè)備小屏幕的準(zhǔn)確率問題(wnt)、熱區(qū)和死角平板電腦(dinno)的熱區(qū)和死角 由于平板電腦持機方式不同，熱區(qū)的位置也有所變化。iPad的拿法在很大程度上取決于整個人的姿態(tài)。我們在站著的時候，需要一手持機一手操作；坐在桌前的時，我們往往會用一只手像支架一樣從側(cè)面架住iPad，而另外一只手用來戳戳點點 持機的那只手通常會握住機身

15、的上半部分，因為這樣最符合杠桿原理；相應(yīng)的，拇指熱區(qū)基本會位于屏幕的前三分之一部分，偏向左上角或右上角。其次，iPad的屏幕相對較大，用戶很難像使用iPhone那樣瞄上一眼就能看到界面當(dāng)中的幾乎全部內(nèi)容。用戶通常會首先將目光聚焦于iPad界面的頂部區(qū)域，所以我們的設(shè)計方案也要相應(yīng)的在這一點上符合用戶習(xí)慣。第28頁/共61頁第二十九頁，共61頁。2.移動(ydng)設(shè)備小屏幕與終端特殊性對界面與交互設(shè)計的影響移動設(shè)備小屏幕(pngm)的準(zhǔn)確率問題、熱區(qū)和死角平板電腦(dinno)的熱區(qū)和死角在iPad及同類平板設(shè)備的應(yīng)用當(dāng)中，主要的交互控制對象應(yīng)該被放置在界面的左上角或右上角，以便拇指可以很容易

16、的觸摸到。第29頁/共61頁第三十頁，共61頁。2.移動(ydng)設(shè)備小屏幕與終端特殊性對界面與交互設(shè)計的影響移動(ydng)設(shè)備小屏幕的準(zhǔn)確率問題、熱區(qū)和死角平板電腦(dinno)的熱區(qū)和死角 盡量避免將交互元素放在屏幕頂端正中間的位置，否則用戶在進行操作的時候，手掌會將很大一部分內(nèi)容遮住。 實際上，任何會對下方內(nèi)容產(chǎn)生直接控制作用的交互元素都不應(yīng)該被放在這個位置。第30頁/共61頁第三十一頁，共61頁。2.移動設(shè)備(shbi)小屏幕與終端特殊性對界面與交互設(shè)計的影響移動設(shè)備(shbi)小屏幕的準(zhǔn)確率問題、熱區(qū)和死角平板(pngbn)電腦的熱區(qū)和死角 盡對于那些起到界面導(dǎo)航作用的交互元素(

17、例如“菜單”、“返回”、“關(guān)閉”等)，以及用來完成分享、收藏、編輯、刪除等功能的按鈕，通常可以將它們放置在界面頂部。對于那些用于瀏覽或預(yù)覽內(nèi)容的控制元素來說，界面底部是最佳位置。第31頁/共61頁第三十二頁，共61頁。2.移動設(shè)備小屏幕與終端特殊性對界面(jimin)與交互設(shè)計的影響移動(ydng)互聯(lián)網(wǎng)終端界面元素的布局（1）由于手機(shu j)用戶大多數(shù)情景下是單手操作手機(shu j)，所以要考慮到產(chǎn)品的重要功有是否能單手完成，并且要注意在同一個產(chǎn)品中，手勢操作種類不要太多，不要用同一個手勢實現(xiàn)不同操作。例如現(xiàn)在流行的側(cè)邊滑出欄導(dǎo)航。如果設(shè)計了左滑可呼出側(cè)邊欄導(dǎo)航那么左側(cè)滑動就不能返回

18、上一級，否則會引引起用戶的混亂。第32頁/共61頁第三十三頁，共61頁。2.移動設(shè)備小屏幕與終端(zhn dun)特殊性對界面與交互設(shè)計的影響移動互聯(lián)網(wǎng)終端界面元素(yun s)的布局（2）由于移動(ydng)終端用戶使用場景復(fù)雜，往往有很多干擾，要盡量減輕用戶的記憶負(fù)荷和學(xué)習(xí)成本。在設(shè)計客戶端的過程中，要求邏輯簡單統(tǒng)一，達(dá)成目標(biāo)的操作步驟要盡量少。第33頁/共61頁第三十四頁，共61頁。2.移動設(shè)備小屏幕(pngm)與終端特殊性對界面與交互設(shè)計的影響移動互聯(lián)網(wǎng)終端界面元素(yun s)的布局（3） 移動應(yīng)用客戶端的界面層次最好不要超過3級，否則網(wǎng)站信息架構(gòu)(ji u)容易混亂。第34頁/共6

19、1頁第三十五頁，共61頁。2.移動設(shè)備小屏幕與終端特殊性對界面與交互設(shè)計(shj)的影響移動互聯(lián)網(wǎng)終端(zhn dun)界面元素的布局（4）要善于利用移動終端除了視覺以外的的其他感覺通道信息，例如聽覺、觸覺，用戶也許會一邊使用手機，一邊做其它(qt)事，并非一直盯著屏幕看，所以要使用聲音和振動等方式提示用戶。第35頁/共61頁第三十六頁，共61頁。2.移動設(shè)備小屏幕(pngm)與終端特殊性對界面與交互設(shè)計的影響移動互聯(lián)網(wǎng)終端界面元素(yun s)的布局（5）由于移動設(shè)備常常處于不同的網(wǎng)速中，所以要對交互速度和緩慢的下載速度做出有針對性的設(shè)計解決方案。特別要注意不要在移動應(yīng)用中濫用圖片，圖片下載

20、速度比文字要慢的多，而且很費流量。 另一方面，要給用戶提供反饋。需要讓用戶知道下載進行到一個什么樣的階段，還需要多長時間等，在等待時間里展示些小動畫等有趣的東西，這樣做雖然不能加快他們(t men)的瀏覽速度，但可以使用戶不至于在無聊中等待。第36頁/共61頁第三十七頁，共61頁。3.移動(ydng)互聯(lián)網(wǎng)終端文字的字體與編排字體的選擇(xunz)文字的編排文字的層級關(guān)系設(shè)計第37頁/共61頁第三十八頁，共61頁。3.移動互聯(lián)網(wǎng)終端文字的字體(zt)與編排字體(zt)的選擇與大小iPhone 上的字體英文為： HelveticaNeue 至于中文，Mac下用的是黑體-簡，Win下則為華文黑體。

21、下圖是百度用戶體驗做過的一個小調(diào)查，可以看出用戶可接受(jishu)的文字大小，像素為單位，也就是大家在PS里的文字像素大小。第38頁/共61頁第三十九頁，共61頁。3.移動(ydng)互聯(lián)網(wǎng)終端文字的字體與編排字體的選擇(xunz)與大小Android 上的字體為： Droid sans fallback ，是谷歌自己的字體，與微軟雅黑很像。同樣，百度用戶體驗的調(diào)查中，可以看出(kn ch)用戶可接受的文字相應(yīng)問題。第39頁/共61頁第四十頁，共61頁。3.移動(ydng)互聯(lián)網(wǎng)終端文字的字體與編排文字(wnz)的編排（1） 留足空間字體之間的空間對字體的影響是非常(fichng)巨大的，甚

22、至超過了字母本身對字體的影響。如果字母間距過窄，將會導(dǎo)致文本閱讀困難。（2）行寬行寬是指一行文字的長度。在上文我們已經(jīng)討論過，一行顯示14個左右的中文字符比較恰當(dāng)。第40頁/共61頁第四十一頁，共61頁。3.移動互聯(lián)網(wǎng)終端文字(wnz)的字體與編排文字(wnz)的編排（3）寬松(kun sn)行距、緊密行距行距是行與之間的空隙，如果行距太緊密，會讓視線難以從上一行的行尾過渡到下一行行首。但行距要是太寬松(kun sn)，字間距又會開始形成隊列。行距通常以1.4em為標(biāo)準(zhǔn)，但在電腦屏上顯示，這樣的距離顯得過于緊密。不過，在移動端行寬變短相應(yīng)也該縮小行距，1.4em是一個恰當(dāng)?shù)倪x擇。第41頁/共6

23、1頁第四十二頁，共61頁。3.移動互聯(lián)網(wǎng)終端文字(wnz)的字體與編排文字(wnz)的編排（4）不要忽視起伏邊起伏邊是指一段文字的邊緣?，F(xiàn)在大多數(shù)中文網(wǎng)站都是居左對齊，所以會導(dǎo)至每行右邊沿參差不齊。當(dāng)視線從上一行行尾掃視到下一行行首時，最好要讓大腦可以估計下一次跳躍的距離和角度，假如文字左側(cè)邊緣是平的，那么間距保持一致，就能加快閱讀速度。由此有一條很重要的規(guī)則就是不應(yīng)當(dāng)將兩三行以上的文字居中對齊。兩端對齊的意思是把文字設(shè)置成每行文字所占空間是相等的，采用這種方式，兩側(cè)都不會產(chǎn)生起伏邊。但是兩端對齊也有缺點，那就是文字間產(chǎn)生的間隙不一樣寬。甚至有時(yush)一行中只有幾個字，而在下一行則填滿了

24、，非常不協(xié)調(diào)。更窄的行寬會加重兩端對齊的問題，因此兩端對齊的文字在移動端是難以閱讀的，所以絕對不能在移動端使用兩端對齊。第42頁/共61頁第四十三頁，共61頁。3.移動互聯(lián)網(wǎng)終端文字(wnz)的字體與編排文字(wnz)的層級關(guān)系設(shè)計 文字間的層能夠告訴用戶哪些是主要信息，哪些是次要信息，引導(dǎo)用戶的閱讀次序和主次。如果網(wǎng)頁(wn y)中的文字層次不分明會讓用戶感到混亂厭煩、不知所措，沒有主次關(guān)系，使用戶沒有讀下云的欲望，用戶體驗差。談到層級關(guān)系時，在HTML代碼語言中我們通常是指的H1到H6這六個層級。另外還有一種特殊的層次也會影響我們的閱讀，即字母間距應(yīng)當(dāng)小于字間距，字間距又得小于行間距，行間

25、距要小于段落間距。要注意這些特殊層次才能在移動端創(chuàng)造最佳閱讀體驗。第43頁/共61頁第四十四頁，共61頁。4.移動互聯(lián)網(wǎng)終端界面(jimin)與交互設(shè)計模式概括與創(chuàng)新移動(ydng)互聯(lián)網(wǎng)終端界面與交互設(shè)計模式概括移動(ydng)互聯(lián)網(wǎng)終端界面與交互設(shè)計的創(chuàng)新第44頁/共61頁第四十五頁，共61頁。4.移動互聯(lián)網(wǎng)終端界面與交互(jioh)設(shè)計模式概括與創(chuàng)新移動(ydng)互聯(lián)網(wǎng)終端界面與交互設(shè)計模式概括內(nèi)容優(yōu)先：界面布局應(yīng)以內(nèi)容為核心，提供符合用戶期望的內(nèi)容。為觸摸而設(shè)計：界面的交互系統(tǒng)以自然手勢為基礎(chǔ)建構(gòu)，符合人體工學(xué)并保持一致性。轉(zhuǎn)換輸入方式：使用各種手機的設(shè)備特性和設(shè)計手段，減少在應(yīng)用內(nèi)

26、的文字輸入。流暢性：保持應(yīng)用交互的手指及手勢的操作流、用戶的注意(zh y)流和界面反饋轉(zhuǎn)場的流暢性。第45頁/共61頁第四十六頁，共61頁。4.移動互聯(lián)網(wǎng)終端界面與交互設(shè)計模式概括(giku)與創(chuàng)新移動互聯(lián)網(wǎng)終端(zhn dun)界面與交互設(shè)計模式概括多通道設(shè)計：發(fā)揮設(shè)備的多通道特性(txng)、協(xié)同的多通道界面和交互，讓用戶更有真實感和沉浸感。（多通道設(shè)計是指系統(tǒng)的輸入和輸出都可以由視覺、聽覺、觸覺等來協(xié)作完成）易學(xué)性：保持界面架構(gòu)簡單、明了，導(dǎo)航設(shè)計清晰易理解，操作簡單可見，通過界面元素的表意的和界面提供的線索就能讓用戶清楚地知道其操作方式。為中斷而設(shè)計：考慮應(yīng)用的使用情境，確保在各個產(chǎn)

27、出中斷的情境下，讓用戶恢復(fù)之前的操作，保持用戶的勞動付出。智能有愛：給用戶提供讓他感到驚喜有趣的、智能高效的、貼心的設(shè)計。第46頁/共61頁第四十七頁，共61頁。4.移動互聯(lián)網(wǎng)終端(zhn dun)界面與交互設(shè)計模式概括與創(chuàng)新為觸摸(ch m)而設(shè)計建立手勢交互建立手勢交互(jioh)規(guī)范規(guī)范在一個移動應(yīng)用中，手勢的統(tǒng)一性非常重要。同一頁面內(nèi)，盡量不要多用幾個手勢操作。讓用戶在應(yīng)用的任何界面中都知道怎么使用手勢，并達(dá)到預(yù)期的結(jié)果。這需要設(shè)計師提供一套基于應(yīng)用信息架構(gòu)的手勢規(guī)范，它將是導(dǎo)航與交互在一個移動應(yīng)用中，手勢的統(tǒng)一性非常重要。同一頁面內(nèi)，盡量不要多用幾個手勢操作。讓用戶在應(yīng)用的任何界面中

28、都知道怎么使用手勢，并達(dá)到預(yù)期的結(jié)果。這需要設(shè)計師提供一套基于應(yīng)用信息架構(gòu)的手勢規(guī)范，它將是導(dǎo)航與交互(jioh)的基礎(chǔ)。的基礎(chǔ)。第47頁/共61頁第四十八頁，共61頁。4.移動互聯(lián)網(wǎng)終端界面與交互設(shè)計模式概括(giku)與創(chuàng)新為觸摸(ch m)而設(shè)計觸控目標(biāo)的尺寸大小觸控目標(biāo)的尺寸大小最小可用的最小可用的UI目標(biāo)大小的手指元素是：目標(biāo)大小的手指元素是：食指常用操作應(yīng)有食指常用操作應(yīng)有(yn yu)7 7毫米毫米1毫米的間距毫米的間距拇指常用操作應(yīng)有拇指常用操作應(yīng)有(yn yu)8 8毫米毫米2毫米的間距毫米的間距各類型的表單組件應(yīng)該有各類型的表單組件應(yīng)該有5毫米的最小間距毫米的最小間距可觸區(qū)

29、域必須大于可觸區(qū)域必須大于77 mm盡量大于盡量大于 99mm第48頁/共61頁第四十九頁，共61頁。4.移動(ydng)互聯(lián)網(wǎng)終端界面與交互設(shè)計模式概括與創(chuàng)新轉(zhuǎn)換輸入(shr)方式減少文本輸入，轉(zhuǎn)化輸入形式在數(shù)字輸入過程中，常常會把文字的輸入轉(zhuǎn)化為基本的手勢輸入。手勢操作會以更快的形式進行輸入，提升了輸入的效率。如天貓客戶端的價格輸入轉(zhuǎn)化為手勢拔動。簡化輸入選項，變填空為選擇在設(shè)置輸入或者對于一些已知項目的輸入中，盡量(jnling)把用戶要輸入的內(nèi)容變成選擇。日期、地址等本身可以轉(zhuǎn)化為選擇項的內(nèi)容，盡量(jnling)使用選擇輸入。使用手機已有的傳感器輸入使用語音、掃描識別（二維碼、條碼、

30、文字等）減少用戶的輸入，給用戶提供便利。第49頁/共61頁第五十頁，共61頁。4.移動互聯(lián)網(wǎng)終端界面與交互設(shè)計模式概括(giku)與創(chuàng)新移動互聯(lián)網(wǎng)終端界面與交互(jioh)設(shè)計的創(chuàng)新多通道更輕量(qn lin)的設(shè)計利用留白和卡片式設(shè)計只用一種字體使用更簡潔的配色方案手勢分層的界面動態(tài)效果第50頁/共61頁第五十一頁，共61頁。4.移動互聯(lián)網(wǎng)終端界面與交互設(shè)計模式概括(giku)與創(chuàng)新多通道更輕量(qn lin)的設(shè)計“扁平化設(shè)計” 去除了多余的傾斜和陰影，在 app 中采用一種更加輕量化的美學(xué)，界面更簡單，只關(guān)注獲取核心信息，拋開所有(suyu)無用的設(shè)計元素。第51頁/共61頁第五十二頁，

31、共61頁。4.移動互聯(lián)網(wǎng)終端界面與交互(jioh)設(shè)計模式概括與創(chuàng)新利用留白(li bi)和卡片式設(shè)計 以前，人們會使用線條和各種分隔符號來區(qū)分界面上的不同區(qū)域，但實際上這種方式現(xiàn)在看來會顯得(xin de)過于擁擠。在設(shè)計中去掉線條通過留白和卡片的方式呈現(xiàn)內(nèi)容，可以創(chuàng)造出更干凈的界面。第52頁/共61頁第五十三頁，共61頁。4.移動互聯(lián)網(wǎng)終端界面(jimin)與交互設(shè)計模式概括與創(chuàng)新只用一種(y zhn)字體 減少屏幕上字體的數(shù)量才能真正發(fā)現(xiàn)排版的力量。設(shè)計師不需要(xyo)使用多種字體，只用一種字體，配上斜體、加粗、改變字號等手段，也可以分辨不同區(qū)域的內(nèi)容。使用單一字體有助于增強品牌的統(tǒng)一性，優(yōu)化全平臺的體驗。此外，用戶也更喜歡單一字體所帶來的簡潔性。第53頁/共61頁第五十四頁，共61頁。4.移動互聯(lián)網(wǎng)終端(zhn dun)界面與交互設(shè)計模式概括與創(chuàng)新使用更