早在2011年設(shè)計(jì)大牛Luke W就提出了“Mobile First”的設(shè)計(jì)理念，也就是現(xiàn)在幾乎每個(gè)人都掛在嘴邊的“移動(dòng)優(yōu)先”。

移動(dòng)優(yōu)先的設(shè)計(jì)策略將使產(chǎn)品擁有高度任務(wù)驅(qū)動(dòng)的體驗(yàn)。用戶可以將注意力聚焦在需要完成關(guān)鍵任務(wù)上，而不會(huì)被傳統(tǒng)桌面產(chǎn)品中過(guò)多的無(wú)關(guān)因素所干擾。

而行業(yè)里似乎也有個(gè)趨勢(shì)，設(shè)計(jì)師對(duì)移動(dòng)端的設(shè)計(jì)工作趨之若鶩，認(rèn)為只有做好移動(dòng)端的設(shè)計(jì)才能有好的發(fā)展。雖然我不完全認(rèn)同這個(gè)觀點(diǎn)，但這也從側(cè)面說(shuō)明了移動(dòng)平臺(tái)在設(shè)計(jì)領(lǐng)域中的重要地位。中國(guó)的互聯(lián)網(wǎng)市場(chǎng)幾乎已經(jīng)成為移動(dòng)獨(dú)占的市場(chǎng)，如何做好移動(dòng)平臺(tái)的設(shè)計(jì)已經(jīng)成為大家最為關(guān)心的話題。

結(jié)合多年的移動(dòng)端設(shè)計(jì)經(jīng)驗(yàn)，一些閱讀以及翻譯獲得的干貨，我總結(jié)了以下幾點(diǎn)設(shè)計(jì)要點(diǎn)，希望能對(duì)大家有幫助，其實(shí)這個(gè)Topic在業(yè)內(nèi)也做過(guò)分享，就權(quán)當(dāng)是官方版的筆記節(jié)選吧：

屏幕尺寸

屏幕尺寸的大小是移動(dòng)端相較桌面端最為顯著的不同，也直接影響了設(shè)計(jì)中內(nèi)容的展現(xiàn)。相同的內(nèi)容在桌面端可以完全展示出來(lái)，但在移動(dòng)端也許就需要滾屏多次。在設(shè)計(jì)時(shí)如果只是簡(jiǎn)單地進(jìn)行圖片的縮放和界面的重排，是完全不可取的。而如何進(jìn)行內(nèi)容的重組、刪減，并且合理利用屏幕的每一寸空間就成為了移動(dòng)端設(shè)計(jì)的最基礎(chǔ)技法。

手機(jī)界面無(wú)外乎可以歸類為兩種——列表頁(yè)與內(nèi)容頁(yè)。

列表頁(yè)

我們先來(lái)看一看列表頁(yè)的設(shè)計(jì)中如何利用手機(jī)屏幕里有限的空間，參看一些主流的設(shè)計(jì)可以發(fā)現(xiàn)，列表有以下幾種排列方式：

橫向列表與縱向列表相當(dāng)常見(jiàn)，也是最為基本的列表排布方式。

橫向列表與縱向列表

橫排縱向列表在照片的設(shè)計(jì)，電商商品的設(shè)計(jì)中也很常用，橫縱雙向列表以APP Store為代表。這樣的設(shè)計(jì)思路也可以滿足任何相似信息在同一頁(yè)面中的排列的需求，例如，橫向列表的交互方式也常用在頂部Tab上。

橫排縱向列表及橫縱雙向列表

手機(jī)屏幕是一個(gè)平面空間，而這樣的二維空間始終是有限的。有一些APP也另辟蹊徑，打起了第三維度的主意。Safari以及某韓國(guó)瀏覽器的網(wǎng)頁(yè)Tab設(shè)計(jì)，在有限的平面中讓用戶產(chǎn)生了空間感，雖然并沒(méi)有產(chǎn)生了額外的空間，但是這樣的設(shè)計(jì)讓信息在垂直面上的展示可以更有層次，突出了需要展現(xiàn)的內(nèi)容，如途中案例用戶除了網(wǎng)頁(yè)的標(biāo)題外也不會(huì)再期待其余的預(yù)覽了。

三維空間的巧妙利用

內(nèi)容頁(yè)

列表頁(yè)是導(dǎo)航方式的思考，而對(duì)于內(nèi)容頁(yè)，則是信息架構(gòu)的考驗(yàn)。內(nèi)容頁(yè)相對(duì)來(lái)說(shuō)在設(shè)計(jì)上可以考慮的點(diǎn)就要多得多了。最基本原則就是做減法，也可以套用《簡(jiǎn)約至上——交互設(shè)計(jì)四策略》中的刪除、組織、隱藏、轉(zhuǎn)移等四個(gè)簡(jiǎn)化法則。舉改版前的格瓦拉為例（今年年中的時(shí)候格瓦拉做了一次較大的改版，還沒(méi)有細(xì)細(xì)研究，既然是講設(shè)計(jì)法則，什么樣的界面都一樣）

格瓦拉客戶端的移動(dòng)版及桌面版（舊版）

在這個(gè)案例中，我進(jìn)行比較分析的是電影詳情頁(yè)面。上圖中左側(cè)為iPhone版設(shè)計(jì)，右側(cè)為Web版的部分截圖。Web中展示的信息很多，影片名、基礎(chǔ)信息、預(yù)告片劇照、介紹、評(píng)分、相關(guān)活動(dòng)影評(píng)資訊等等。我們來(lái)看看在移動(dòng)端上格瓦拉時(shí)如何處理的：

• 在影片評(píng)分的細(xì)節(jié)上，移動(dòng)端采用了“刪除”的策略，刪掉了不太重要的比例信息，只顯示了相對(duì)重要的總分。同樣，基于移動(dòng)端的使用場(chǎng)景，用戶進(jìn)行快速購(gòu)票的需求大大高于查看比較信息，所以也刪除了影評(píng)和資訊的部分，以及Web端用來(lái)導(dǎo)流的相關(guān)活動(dòng)模塊；
• 在影片基礎(chǔ)信息的部分，采用了“組織”策略，Web的展現(xiàn)為一個(gè)項(xiàng)目一列，在移動(dòng)端則進(jìn)行了同類項(xiàng)合并的整合。而導(dǎo)演和主演的信息根據(jù)相關(guān)性和重要程度，與劇情簡(jiǎn)介放在了一起。這個(gè)信息層級(jí)的處理移動(dòng)端優(yōu)于Web，不過(guò)這個(gè)問(wèn)題在新版的Web中得到了解決，導(dǎo)演和主演得到了更多篇幅。
• 在劇情簡(jiǎn)介的部分，則使用了“隱藏”策略，用戶需要點(diǎn)擊一個(gè)小箭頭才能夠展開(kāi)閱讀，同樣劇照也是如此處理，用戶可以直接看到預(yù)告片。
• 除了信息展示外，移動(dòng)端在設(shè)計(jì)上更加基于場(chǎng)景，本案例中界面內(nèi)的一切內(nèi)容都是為了Call for Action“選座購(gòu)票”服務(wù)的。這個(gè)設(shè)計(jì)在新版的Web中也得到了體現(xiàn)，畢竟這才是business嘛。

信息展現(xiàn)的簡(jiǎn)化原則

在屏幕空間的利用上，除了三維的物理空間，還有第四維——時(shí)間可以利用。通過(guò)用戶對(duì)界面的操作，根據(jù)相應(yīng)的狀態(tài)顯示或隱藏相應(yīng)的內(nèi)容，從而達(dá)到節(jié)約空間的目的。還是舉格瓦拉移動(dòng)端為例，當(dāng)用戶向下滾屏?xí)r，跟隨著界面動(dòng)畫，海報(bào)和購(gòu)票按鈕逐漸縮小上移，與評(píng)分形成一個(gè)固定的信息塊呈現(xiàn)在界面的頂部，這個(gè)設(shè)計(jì)很精巧。（新版的APP似乎少了許多亮點(diǎn)）

界面滾動(dòng)時(shí)的動(dòng)畫效果

觸屏操作

觸屏操作是智能機(jī)與用戶交互的全部，也是核心中的核心（就算是語(yǔ)音交互也大體需要和觸屏交互相結(jié)合）。除了基本的點(diǎn)、劃操作，許多手勢(shì)（Gesture）也給移動(dòng)端用戶體驗(yàn)增色不少。讓我們來(lái)先看看手勢(shì)設(shè)計(jì)有什么需要注意的。

手勢(shì)設(shè)計(jì)

作為一名合格的設(shè)計(jì)師，常用的手勢(shì)操作設(shè)計(jì)必定爛熟于心，當(dāng)然這對(duì)于用戶來(lái)說(shuō)也是簡(jiǎn)單得如同生理反應(yīng)。傳統(tǒng)的應(yīng)用基于桌面端的體驗(yàn)，操作為主手勢(shì)為輔，提供了很多按鈕、鏈接；我個(gè)人認(rèn)為如果對(duì)界面影響不大的話這樣的設(shè)計(jì)比較保險(xiǎn)，但一定會(huì)相對(duì)枯燥?，F(xiàn)在，有越來(lái)越多純手勢(shì)應(yīng)用興起，他們的統(tǒng)一特點(diǎn)就是特別酷炫，因?yàn)榻缑嫔蠋缀鯖](méi)有什么按鈕，可能整個(gè)應(yīng)用只有“設(shè)置”是靠“點(diǎn)”出來(lái)的。

因?yàn)槌Ｓ檬謩?shì)操作不多，且用法皆已約定俗成。比如上下劃是瀏覽，雙擊或者pinch/spread用于縮放。純手勢(shì)驅(qū)動(dòng)的應(yīng)用在設(shè)計(jì)中需要注意如何降低用戶的學(xué)習(xí)成本，提高手勢(shì)的有效引導(dǎo)。例如下圖的Solar在用戶初次使用的時(shí)候就以Coach Mark進(jìn)行了引導(dǎo)。大家細(xì)細(xì)研究就會(huì)發(fā)現(xiàn)，Solar的手勢(shì)設(shè)計(jì)邏輯非常嚴(yán)謹(jǐn)，很符合常用操作的延伸，這樣用戶的學(xué)習(xí)成本很低。例如，“捏合或雙擊查看全部地點(diǎn)”，在常規(guī)手勢(shì)中捏合代表縮小視圖，等同于視角拉遠(yuǎn)從而可以看到更多的內(nèi)容；在Solar的設(shè)計(jì)中你完全可以想象為所有地點(diǎn)元素形成一張大的圖片；你當(dāng)前在查看的一個(gè)地點(diǎn)即為這個(gè)圖片中的一個(gè)元素，所以捏合時(shí)你自然會(huì)看到整張圖，這兩者在邏輯上可以無(wú)縫匹配，用戶學(xué)習(xí)與記住的成本大大降低。

Solar的手勢(shì)操作指引

此外，用戶有可能在手機(jī)上裝了許多純手勢(shì)交互的應(yīng)用，你無(wú)法保證第三方的定義都相似，而對(duì)于用戶來(lái)說(shuō)，非自然的手勢(shì)交互越多，用戶需要記住得就越多，那么容易忘掉得也就越多，除非頻繁使用。所以手勢(shì)的指引最好方便用戶可以隨時(shí)調(diào)出。

Beat Music中可調(diào)出的手勢(shì)指引

說(shuō)到手勢(shì)，就不得不提一下手勢(shì)流，這種新興的設(shè)計(jì)能夠一定程度優(yōu)化移動(dòng)交互流程，減少那些復(fù)雜的點(diǎn)擊操作。

用戶持機(jī)操作的研究數(shù)據(jù)

研究數(shù)據(jù)對(duì)于設(shè)計(jì)的重要性不言而喻，但往往許多設(shè)計(jì)師只知其然而不知其所以然。手機(jī)不同于電腦，你要操作就一定要持機(jī)，大部分設(shè)計(jì)師都會(huì)把注意力只放在界面上，完全忽略了這一點(diǎn)。希望這個(gè)章節(jié)能讓大家了解移動(dòng)端設(shè)計(jì)背后的故事以及數(shù)據(jù)對(duì)于設(shè)計(jì)的指引作用。

這些數(shù)據(jù)皆來(lái)自于一名叫Steven Hoober的研究大神，他分別做了兩項(xiàng)研究：第一項(xiàng)是在任何用戶可能使用手機(jī)的地方，觀察了1333名用戶，最后得出用戶使用手機(jī)的持機(jī)方式的數(shù)據(jù)。研究二是基于31名用戶的深訪，錄屏剪輯得出的用戶操作手機(jī)的熱圖。

數(shù)據(jù)一，關(guān)于用戶持機(jī)，不出大家所料，單手持機(jī)的比例是最多的，其次是環(huán)握，最后是雙手，用戶會(huì)經(jīng)常在這些持握方式中切換。比如我在查看聊天內(nèi)容的時(shí)候是單手，然后快速上下劃動(dòng)尋找相關(guān)內(nèi)容的時(shí)候會(huì)用上另一只手幫忙形成環(huán)握持機(jī)，最后回復(fù)對(duì)方使用了雙手持機(jī)。同時(shí)手機(jī)屏幕中的綠黃紅三色分別代表了手指觸碰的難度，這些數(shù)據(jù)對(duì)于設(shè)計(jì)側(cè)重上都有相當(dāng)好的指引。

研究結(jié)果：各種持機(jī)情況的分布

另外這個(gè)圖有一個(gè)非常值得關(guān)注的數(shù)據(jù)，單手持機(jī)中左手持機(jī)的比例高達(dá)33%；相比世界上僅有10%的左撇子多了3倍。原因也很簡(jiǎn)單：用戶在使用手機(jī)的時(shí)候往往同時(shí)還在做別的事情，那么慣用手正被別的事情占用。例如在公交上，我就習(xí)慣用右手拉著扶手，左手拿著手機(jī)使用。這個(gè)數(shù)據(jù)讓你無(wú)法忽視左手持機(jī)的情況，因?yàn)楸壤稽c(diǎn)也不低。

數(shù)據(jù)二，關(guān)于用戶操作手機(jī)的熱點(diǎn)區(qū)域，如下圖所示，研究發(fā)現(xiàn)用戶的點(diǎn)擊都集中在中間到偏下2/3的區(qū)域。而且還有一個(gè)有趣的細(xì)節(jié)，這些熱點(diǎn)稍稍偏左一些，這似乎與人們從左到右的閱讀習(xí)慣有關(guān)系，而且人們都是傾向于將視線集中在這個(gè)區(qū)域，那么點(diǎn)擊自然就落在這個(gè)區(qū)域了。

研究結(jié)果：用戶點(diǎn)擊區(qū)域熱點(diǎn)

而對(duì)于手勢(shì)操作，有以下三種不同的情況：第一個(gè)是窗口類的短列表，右邊兩個(gè)都是全屏的長(zhǎng)列表，中間是文字信息較少，右邊是文字信息較多。不難發(fā)現(xiàn)第二張圖和第三張圖的差別，滑動(dòng)熱區(qū)往右側(cè)移動(dòng)了，說(shuō)明用戶不太在有內(nèi)容的地方進(jìn)行滑動(dòng)。有可能是因?yàn)橛脩粼陂喿x，也有可能用戶害怕有誤點(diǎn)擊的操作。

研究結(jié)果：用戶滾動(dòng)手勢(shì)的軌跡熱點(diǎn)

還有一個(gè)有趣的現(xiàn)象，在阿拉伯語(yǔ)系的國(guó)家中，由于從右至左的文字習(xí)慣，這些熱區(qū)恰恰相反了，這也從另一個(gè)側(cè)面驗(yàn)證了前面推斷的正確性。建議設(shè)計(jì)師們完成設(shè)計(jì)后，不妨做成紙膜，然后模擬的操作一下，看看是否符合持機(jī)于操作的習(xí)慣。

大屏設(shè)計(jì)

隨著智能機(jī)屏幕越做越大，屏幕左上角的區(qū)域越來(lái)越難以被點(diǎn)擊到，這要求設(shè)計(jì)師在界面設(shè)計(jì)中對(duì)核心交互元素的位置要給予充分的考慮。對(duì)于大屏趨勢(shì)，我個(gè)人的解讀是整個(gè)設(shè)計(jì)趨勢(shì)大體有以下三種影響，僅供參考：

1. 漢堡菜單的沒(méi)落，當(dāng)然和他固有的一些缺點(diǎn)也有關(guān)系。
2. 底部返回菜單的出現(xiàn)，越來(lái)越多應(yīng)用在嘗試這樣的自定義導(dǎo)航了，但是和系統(tǒng)自帶的底部Tab以及頂部導(dǎo)航有一定的沖突，目前并沒(méi)有見(jiàn)到什么應(yīng)用在這方面處理得十分優(yōu)秀。
3. 以蘋果為代表的無(wú)障礙觸摸設(shè)計(jì)，在iOS 8以上的系統(tǒng)中，雙擊Home鍵會(huì)將界面下拉一半，便與操作頂部的按鈕，其實(shí)這個(gè)是錘子先做出來(lái)的。

蘋果的無(wú)障礙觸摸設(shè)計(jì)

使用場(chǎng)景&設(shè)計(jì)規(guī)范

所有的設(shè)計(jì)都離不開(kāi)場(chǎng)景，也就是大家常常說(shuō)的Scenario。而這里需要特意提一下，因?yàn)橐苿?dòng)端的使用場(chǎng)景于傳統(tǒng)桌面端有著極大的不同。大家在考慮設(shè)計(jì)和需求時(shí)應(yīng)該跳出傳統(tǒng)桌面端的思考。大體來(lái)講，在移動(dòng)端的設(shè)計(jì)你需要更多考慮碎片化的使用場(chǎng)景、嘈雜的環(huán)境、不穩(wěn)定的網(wǎng)絡(luò)和各種可能發(fā)生的意外。

桌面端和移動(dòng)端在使用場(chǎng)景上有著許多不同

對(duì)于設(shè)計(jì)規(guī)范，如何把一個(gè)iOS的應(yīng)用設(shè)計(jì)得像iOS，Android設(shè)計(jì)得像Android？這是設(shè)計(jì)的基本功，好歹也能做個(gè)拷貝不走樣吧？各種原文譯文的規(guī)范網(wǎng)上比比皆是，篇幅過(guò)長(zhǎng)就不細(xì)說(shuō)了，建議大家熟讀100遍！之前關(guān)于微信安卓版一度使用安卓規(guī)范最后又改成和iOS設(shè)計(jì)一模一樣的討論，知乎上有帖子，也可以去看看。我的解讀就是：一切以業(yè)務(wù)為出發(fā)，在遵循規(guī)范的基礎(chǔ)上做適合自己的調(diào)整。

移動(dòng)創(chuàng)新

移動(dòng)端較之桌面端，有許多有趣的交互方式和創(chuàng)新點(diǎn)。比如最早的定位，現(xiàn)在被廣泛應(yīng)用于導(dǎo)航、O2O餐飲拼車、社交等。再后來(lái)給微信帶來(lái)爆發(fā)式增長(zhǎng)的搖一搖。還有支付寶在使用的高頻聲波，就是咻咻咻當(dāng)面付，這個(gè)音效只是給用戶的一個(gè)反饋而已，實(shí)際上高頻聲波人耳是聽(tīng)不到的。

其實(shí)上述這些都不是什么高精尖的技術(shù)，關(guān)鍵是產(chǎn)品設(shè)計(jì)中合理地利用了這些交互方式給用戶帶來(lái)了全新體驗(yàn)。接下來(lái)這個(gè)案例，看似高大上實(shí)則毫無(wú)技術(shù)含量，這種創(chuàng)新很討巧，無(wú)需大量開(kāi)發(fā)成本，但與用戶的交互感很強(qiáng)。實(shí)際上就是最基本的麥克風(fēng)技術(shù)，配合觸屏，達(dá)到吹奏樂(lè)器的體驗(yàn)感。

有趣的吹奏交互

此外，還有許多例如iBeacon室內(nèi)為定位技術(shù)，NFC近距離無(wú)線通訊技術(shù)等。設(shè)計(jì)師也需要多下些功夫去了解這些移動(dòng)技術(shù)，再結(jié)合場(chǎng)景開(kāi)開(kāi)腦洞，方能創(chuàng)新出有趣的體驗(yàn)。

#專欄作家#

Terryfan，人人都是產(chǎn)品經(jīng)理專欄作家。目前在點(diǎn)融網(wǎng)擔(dān)任用戶體驗(yàn)總監(jiān)，喜歡設(shè)計(jì)、推理、邏輯分析搞腦子。目前持續(xù)緩慢更新微信公眾號(hào)開(kāi)卷有譯（terryfan_ux），進(jìn)行翻譯分享。

本文系作者授權(quán)發(fā)布，未經(jīng)許可，不得轉(zhuǎn)載。