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

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

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

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

屏幕尺寸

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

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

列表頁

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

橫向列表與縱向列表相當常見，也是最為基本的列表排布方式。

橫向列表與縱向列表

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

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

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

三維空間的巧妙利用

內(nèi)容頁

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

格瓦拉客戶端的移動版及桌面版（舊版）

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

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

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

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

界面滾動時的動畫效果

觸屏操作

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

手勢設計

作為一名合格的設計師，常用的手勢操作設計必定爛熟于心，當然這對于用戶來說也是簡單得如同生理反應。傳統(tǒng)的應用基于桌面端的體驗，操作為主手勢為輔，提供了很多按鈕、鏈接；我個人認為如果對界面影響不大的話這樣的設計比較保險，但一定會相對枯燥?，F(xiàn)在，有越來越多純手勢應用興起，他們的統(tǒng)一特點就是特別酷炫，因為界面上幾乎沒有什么按鈕，可能整個應用只有“設置”是靠“點”出來的。

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

Solar的手勢操作指引

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

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

說到手勢，就不得不提一下手勢流，這種新興的設計能夠一定程度優(yōu)化移動交互流程，減少那些復雜的點擊操作。

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

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

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

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

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

另外這個圖有一個非常值得關注的數(shù)據(jù)，單手持機中左手持機的比例高達33%；相比世界上僅有10%的左撇子多了3倍。原因也很簡單：用戶在使用手機的時候往往同時還在做別的事情，那么慣用手正被別的事情占用。例如在公交上，我就習慣用右手拉著扶手，左手拿著手機使用。這個數(shù)據(jù)讓你無法忽視左手持機的情況，因為比例一點也不低。

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

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

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

研究結(jié)果：用戶滾動手勢的軌跡熱點

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

大屏設計

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

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

蘋果的無障礙觸摸設計

使用場景&設計規(guī)范

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

桌面端和移動端在使用場景上有著許多不同

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

移動創(chuàng)新

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

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

有趣的吹奏交互

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

#專欄作家#

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

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