移動(dòng)界面交互設(shè)計(jì)素材PPT學(xué)習(xí)教案

1、會(huì)計(jì)學(xué)1移動(dòng)界面交互設(shè)計(jì)素材移動(dòng)界面交互設(shè)計(jì)素材目錄1移動(dòng)設(shè)備界面尺寸移動(dòng)設(shè)備界面尺寸和基本組成元素和基本組成元素2移動(dòng)設(shè)備小屏幕移動(dòng)設(shè)備小屏幕與終端特與終端特殊性殊性對(duì)界面與交互設(shè)計(jì)的對(duì)界面與交互設(shè)計(jì)的影響影響3移動(dòng)互聯(lián)網(wǎng)終端文移動(dòng)互聯(lián)網(wǎng)終端文字的字體與編排字的字體與編排4移動(dòng)互聯(lián)網(wǎng)終端界移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式面與交互設(shè)計(jì)模式概括概括與創(chuàng)新與創(chuàng)新第1頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素移動(dòng)設(shè)備界面尺寸 VS.移動(dòng)設(shè)備基本組成元素第2頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素移動(dòng)設(shè)備界面尺寸iPhone的APP界面一般由四個(gè)元素組成，分別是：狀態(tài)欄、導(dǎo)航欄、主菜單欄、內(nèi)

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

3、iphone6 plus UI放大版是iphone6 plus的尺寸等比放大1.5倍得出的分辨率。第4頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素移動(dòng)設(shè)備界面尺寸第5頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素第6頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素Iphone圖標(biāo)尺寸第7頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素Android手機(jī)尺寸第8頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素Android手機(jī)尺寸第9頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素Android手機(jī)圖標(biāo)尺寸第10頁(yè)/共61頁(yè)1.移動(dòng)設(shè)備界面尺寸和基本組成元素Android手機(jī)系統(tǒng)分辨率占有率第11頁(yè)/

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

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

6、，蘋果已經(jīng)開始慢慢弱化狀態(tài)欄的存在，將狀態(tài)欄和導(dǎo)航欄合在了一起第14頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確率問(wèn)題、熱區(qū)和死角與界面元素的布局手機(jī)的移動(dòng)特征對(duì)設(shè)計(jì)的影響第15頁(yè)/共61頁(yè)F式布局式布局用戶瀏覽網(wǎng)頁(yè)的一般模式：先看看頁(yè)面的左上角，了解一下這是什么網(wǎng)站（因此此處適合放置Logo)“知道是什么”然后掃描一下頁(yè)面的頂部（導(dǎo)航欄，搜索欄）“了解用法”下一步，用戶的視線下移，開始閱讀下一行的內(nèi)容。用戶進(jìn)入“掃描模式”，一旦找到感興趣的內(nèi)容便會(huì)打開。2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響WEB端界面元素的布局第16頁(yè)/共61頁(yè)F式布局

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

8、9頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響手機(jī)本身的物理特征受限對(duì)設(shè)計(jì)的影響用戶體驗(yàn)。UX指用戶體驗(yàn)，UX設(shè)計(jì)指以用戶體驗(yàn)為中心的設(shè)計(jì)。人與系統(tǒng)交互時(shí)的感覺就是用戶體驗(yàn)。UX設(shè)計(jì)師研究和評(píng)估一個(gè)系統(tǒng)的用戶體驗(yàn)，關(guān)注與該系統(tǒng)的易用性，價(jià)值體現(xiàn)，實(shí)用性，高效性等。例如，研究一個(gè)電子商務(wù)站點(diǎn)的結(jié)賬（checkout）流程，看看流程是否對(duì)用戶友好易用；研究子系統(tǒng)的組件，比如研究用戶在填寫Web表單的時(shí)候如何更加高效和舒服。第20頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確率問(wèn)題、熱區(qū)和死角熱區(qū)：點(diǎn)擊區(qū)域的成功率比較高的區(qū)域。死角：點(diǎn)擊區(qū)域

9、的成功率很低的區(qū)域。所以在設(shè)計(jì)當(dāng)中，要盡量將最重要的界面交互元素放置在熱區(qū)范圍當(dāng)中。第21頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確率問(wèn)題、熱區(qū)和死角淘寶UED針對(duì)中國(guó)人的實(shí)驗(yàn)第22頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確率問(wèn)題、熱區(qū)和死角淘寶UED針對(duì)中國(guó)人的實(shí)驗(yàn)第23頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確率問(wèn)題、熱區(qū)和死角在右手持機(jī)的狀況下，有效觸控區(qū)域位于屏幕的左下方。第24頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確

10、率問(wèn)題、熱區(qū)和死角底部原則：移動(dòng)系統(tǒng)或應(yīng)用中一些重要的工具欄或?qū)Ш浇Y(jié)構(gòu)通常被放置在界面底部.底部原則不僅與拇指的作用范圍有關(guān)。當(dāng)我們使用拇指在屏幕上進(jìn)行操作的時(shí)候，手指下方的內(nèi)容部分將會(huì)被遮擋住；只有將交互控制元素放在內(nèi)容區(qū)域的下方，才能讓這種負(fù)面效應(yīng)降至最低。其實(shí)這是一條具有廣泛適用性的設(shè)計(jì)原則，我們可以在很多其他類型的設(shè)備中看到這種原理的體現(xiàn)，例如iPod、計(jì)算器、帶有實(shí)體鍵盤的普通手機(jī)、電子秤等，無(wú)不是內(nèi)容在上，控制在下。第25頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確率問(wèn)題、熱區(qū)和死角淘寶UED針對(duì)中國(guó)人的實(shí)驗(yàn)第26頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏

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

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

13、性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確率問(wèn)題、熱區(qū)和死角平板電腦的熱區(qū)和死角 盡量避免將交互元素放在屏幕頂端正中間的位置，否則用戶在進(jìn)行操作的時(shí)候，手掌會(huì)將很大一部分內(nèi)容遮住。 實(shí)際上，任何會(huì)對(duì)下方內(nèi)容產(chǎn)生直接控制作用的交互元素都不應(yīng)該被放在這個(gè)位置。第30頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)設(shè)備小屏幕的準(zhǔn)確率問(wèn)題、熱區(qū)和死角平板電腦的熱區(qū)和死角 盡對(duì)于那些起到界面導(dǎo)航作用的交互元素(例如“菜單”、“返回”、“關(guān)閉”等)，以及用來(lái)完成分享、收藏、編輯、刪除等功能的按鈕，通?？梢詫⑺鼈兎胖迷诮缑骓敳俊?duì)于那些用于瀏覽或預(yù)覽內(nèi)容的控制元素來(lái)說(shuō)，界面底部是最佳位

14、置。第31頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)互聯(lián)網(wǎng)終端界面元素的布局（1）由于手機(jī)用戶大多數(shù)情景下是單手操作手機(jī)，所以要考慮到產(chǎn)品的重要功有是否能單手完成，并且要注意在同一個(gè)產(chǎn)品中，手勢(shì)操作種類不要太多，不要用同一個(gè)手勢(shì)實(shí)現(xiàn)不同操作。例如現(xiàn)在流行的側(cè)邊滑出欄導(dǎo)航。如果設(shè)計(jì)了左滑可呼出側(cè)邊欄導(dǎo)航那么左側(cè)滑動(dòng)就不能返回上一級(jí)，否則會(huì)引引起用戶的混亂。第32頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)互聯(lián)網(wǎng)終端界面元素的布局（2）由于移動(dòng)終端用戶使用場(chǎng)景復(fù)雜，往往有很多干擾，要盡量減輕用戶的記憶負(fù)荷和學(xué)習(xí)成本。在設(shè)計(jì)客戶端的過(guò)程中，要求邏輯簡(jiǎn)

15、單統(tǒng)一，達(dá)成目標(biāo)的操作步驟要盡量少。第33頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)互聯(lián)網(wǎng)終端界面元素的布局（3） 移動(dòng)應(yīng)用客戶端的界面層次最好不要超過(guò)3級(jí)，否則網(wǎng)站信息架構(gòu)容易混亂。第34頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)互聯(lián)網(wǎng)終端界面元素的布局（4）要善于利用移動(dòng)終端除了視覺以外的的其他感覺通道信息，例如聽覺、觸覺，用戶也許會(huì)一邊使用手機(jī)，一邊做其它事，并非一直盯著屏幕看，所以要使用聲音和振動(dòng)等方式提示用戶。第35頁(yè)/共61頁(yè)2.移動(dòng)設(shè)備小屏幕與終端特殊性對(duì)界面與交互設(shè)計(jì)的影響移動(dòng)互聯(lián)網(wǎng)終端界面元素的布局（5）由于移動(dòng)設(shè)備常常處于

16、不同的網(wǎng)速中，所以要對(duì)交互速度和緩慢的下載速度做出有針對(duì)性的設(shè)計(jì)解決方案。特別要注意不要在移動(dòng)應(yīng)用中濫用圖片，圖片下載速度比文字要慢的多，而且很費(fèi)流量。 另一方面，要給用戶提供反饋。需要讓用戶知道下載進(jìn)行到一個(gè)什么樣的階段，還需要多長(zhǎng)時(shí)間等，在等待時(shí)間里展示些小動(dòng)畫等有趣的東西，這樣做雖然不能加快他們的瀏覽速度，但可以使用戶不至于在無(wú)聊中等待。第36頁(yè)/共61頁(yè)3.移動(dòng)互聯(lián)網(wǎng)終端文字的字體與編排字體的選擇文字的編排文字的層級(jí)關(guān)系設(shè)計(jì)第37頁(yè)/共61頁(yè)3.移動(dòng)互聯(lián)網(wǎng)終端文字的字體與編排字體的選擇與大小iPhone 上的字體英文為： HelveticaNeue 至于中文，Mac下用的是黑體-簡(jiǎn)，W

17、in下則為華文黑體。下圖是百度用戶體驗(yàn)做過(guò)的一個(gè)小調(diào)查，可以看出用戶可接受的文字大小，像素為單位，也就是大家在PS里的文字像素大小。第38頁(yè)/共61頁(yè)3.移動(dòng)互聯(lián)網(wǎng)終端文字的字體與編排字體的選擇與大小Android 上的字體為： Droid sans fallback ，是谷歌自己的字體，與微軟雅黑很像。同樣，百度用戶體驗(yàn)的調(diào)查中，可以看出用戶可接受的文字相應(yīng)問(wèn)題。第39頁(yè)/共61頁(yè)3.移動(dòng)互聯(lián)網(wǎng)終端文字的字體與編排文字的編排（1） 留足空間字體之間的空間對(duì)字體的影響是非常巨大的，甚至超過(guò)了字母本身對(duì)字體的影響。如果字母間距過(guò)窄，將會(huì)導(dǎo)致文本閱讀困難。（2）行寬行寬是指一行文字的長(zhǎng)度。在上文我

18、們已經(jīng)討論過(guò)，一行顯示14個(gè)左右的中文字符比較恰當(dāng)。第40頁(yè)/共61頁(yè)3.移動(dòng)互聯(lián)網(wǎng)終端文字的字體與編排文字的編排（3）寬松行距、緊密行距行距是行與之間的空隙，如果行距太緊密，會(huì)讓視線難以從上一行的行尾過(guò)渡到下一行行首。但行距要是太寬松，字間距又會(huì)開始形成隊(duì)列。行距通常以1.4em為標(biāo)準(zhǔn)，但在電腦屏上顯示，這樣的距離顯得過(guò)于緊密。不過(guò)，在移動(dòng)端行寬變短相應(yīng)也該縮小行距，1.4em是一個(gè)恰當(dāng)?shù)倪x擇。第41頁(yè)/共61頁(yè)3.移動(dòng)互聯(lián)網(wǎng)終端文字的字體與編排文字的編排（4）不要忽視起伏邊起伏邊是指一段文字的邊緣?，F(xiàn)在大多數(shù)中文網(wǎng)站都是居左對(duì)齊，所以會(huì)導(dǎo)至每行右邊沿參差不齊。當(dāng)視線從上一行行尾掃視到下一行

19、行首時(shí)，最好要讓大腦可以估計(jì)下一次跳躍的距離和角度，假如文字左側(cè)邊緣是平的，那么間距保持一致，就能加快閱讀速度。由此有一條很重要的規(guī)則就是不應(yīng)當(dāng)將兩三行以上的文字居中對(duì)齊。兩端對(duì)齊的意思是把文字設(shè)置成每行文字所占空間是相等的，采用這種方式，兩側(cè)都不會(huì)產(chǎn)生起伏邊。但是兩端對(duì)齊也有缺點(diǎn)，那就是文字間產(chǎn)生的間隙不一樣寬。甚至有時(shí)一行中只有幾個(gè)字，而在下一行則填滿了，非常不協(xié)調(diào)。更窄的行寬會(huì)加重兩端對(duì)齊的問(wèn)題，因此兩端對(duì)齊的文字在移動(dòng)端是難以閱讀的，所以絕對(duì)不能在移動(dòng)端使用兩端對(duì)齊。第42頁(yè)/共61頁(yè)3.移動(dòng)互聯(lián)網(wǎng)終端文字的字體與編排文字的層級(jí)關(guān)系設(shè)計(jì) 文字間的層能夠告訴用戶哪些是主要信息，哪些是次要

20、信息，引導(dǎo)用戶的閱讀次序和主次。如果網(wǎng)頁(yè)中的文字層次不分明會(huì)讓用戶感到混亂厭煩、不知所措，沒(méi)有主次關(guān)系，使用戶沒(méi)有讀下云的欲望，用戶體驗(yàn)差。談到層級(jí)關(guān)系時(shí)，在HTML代碼語(yǔ)言中我們通常是指的H1到H6這六個(gè)層級(jí)。另外還有一種特殊的層次也會(huì)影響我們的閱讀，即字母間距應(yīng)當(dāng)小于字間距，字間距又得小于行間距，行間距要小于段落間距。要注意這些特殊層次才能在移動(dòng)端創(chuàng)造最佳閱讀體驗(yàn)。第43頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)的創(chuàng)新第44頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模

21、式概括內(nèi)容優(yōu)先：界面布局應(yīng)以內(nèi)容為核心，提供符合用戶期望的內(nèi)容。為觸摸而設(shè)計(jì)：界面的交互系統(tǒng)以自然手勢(shì)為基礎(chǔ)建構(gòu)，符合人體工學(xué)并保持一致性。轉(zhuǎn)換輸入方式：使用各種手機(jī)的設(shè)備特性和設(shè)計(jì)手段，減少在應(yīng)用內(nèi)的文字輸入。流暢性：保持應(yīng)用交互的手指及手勢(shì)的操作流、用戶的注意流和界面反饋轉(zhuǎn)場(chǎng)的流暢性。第45頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括多通道設(shè)計(jì)：發(fā)揮設(shè)備的多通道特性、協(xié)同的多通道界面和交互，讓用戶更有真實(shí)感和沉浸感。（多通道設(shè)計(jì)是指系統(tǒng)的輸入和輸出都可以由視覺、聽覺、觸覺等來(lái)協(xié)作完成）易學(xué)性：保持界面架構(gòu)簡(jiǎn)單、明了，導(dǎo)航設(shè)計(jì)清晰易理解，操作

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

23、端界面與交互設(shè)計(jì)模式概括與創(chuàng)新為觸摸而設(shè)計(jì)觸控目標(biāo)的尺寸大小觸控目標(biāo)的尺寸大小最小可用的UI目標(biāo)大小的手指元素是：食指常用操作應(yīng)有7 7毫米1毫米的間距拇指常用操作應(yīng)有8 8毫米2毫米的間距各類型的表單組件應(yīng)該有5毫米的最小間距可觸區(qū)域必須大于可觸區(qū)域必須大于77 mm盡量大于盡量大于 99mm第48頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新轉(zhuǎn)換輸入方式減少文本輸入，轉(zhuǎn)化輸入形式在數(shù)字輸入過(guò)程中，常常會(huì)把文字的輸入轉(zhuǎn)化為基本的手勢(shì)輸入。手勢(shì)操作會(huì)以更快的形式進(jìn)行輸入，提升了輸入的效率。如天貓客戶端的價(jià)格輸入轉(zhuǎn)化為手勢(shì)拔動(dòng)。簡(jiǎn)化輸入選項(xiàng)，變填空為選擇在設(shè)置輸入或者對(duì)于一些已知項(xiàng)目

24、的輸入中，盡量把用戶要輸入的內(nèi)容變成選擇。日期、地址等本身可以轉(zhuǎn)化為選擇項(xiàng)的內(nèi)容，盡量使用選擇輸入。使用手機(jī)已有的傳感器輸入使用語(yǔ)音、掃描識(shí)別（二維碼、條碼、文字等）減少用戶的輸入，給用戶提供便利。第49頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)的創(chuàng)新多通道更輕量的設(shè)計(jì)利用留白和卡片式設(shè)計(jì)只用一種字體使用更簡(jiǎn)潔的配色方案手勢(shì)分層的界面動(dòng)態(tài)效果第50頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新多通道更輕量的設(shè)計(jì)“扁平化設(shè)計(jì)” 去除了多余的傾斜和陰影，在 app 中采用一種更加輕量化的美學(xué)，界面更簡(jiǎn)單，只關(guān)注獲取核心信息，拋開所有無(wú)用的設(shè)計(jì)

25、元素。第51頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新利用留白和卡片式設(shè)計(jì) 以前，人們會(huì)使用線條和各種分隔符號(hào)來(lái)區(qū)分界面上的不同區(qū)域，但實(shí)際上這種方式現(xiàn)在看來(lái)會(huì)顯得過(guò)于擁擠。在設(shè)計(jì)中去掉線條通過(guò)留白和卡片的方式呈現(xiàn)內(nèi)容，可以創(chuàng)造出更干凈的界面。第52頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新只用一種字體 減少屏幕上字體的數(shù)量才能真正發(fā)現(xiàn)排版的力量。設(shè)計(jì)師不需要使用多種字體，只用一種字體，配上斜體、加粗、改變字號(hào)等手段，也可以分辨不同區(qū)域的內(nèi)容。使用單一字體有助于增強(qiáng)品牌的統(tǒng)一性，優(yōu)化全平臺(tái)的體驗(yàn)。此外，用戶也更喜歡單一字體所帶來(lái)的簡(jiǎn)潔性。第53頁(yè)/共61頁(yè)4.移動(dòng)互聯(lián)網(wǎng)終端界面與交互設(shè)計(jì)模式概括與創(chuàng)新使用更簡(jiǎn)潔的配色方案 自 2013年 扁平化設(shè)計(jì)開始普及以來(lái)，使用更簡(jiǎn)潔的配色方案就成為一種趨勢(shì)。設(shè)計(jì)師和用戶都