《移動端設計的思維模式》

原文地址：Thinking Like An App Designer

http://www.smashingmagazine.com/2015/04/thinking-like-an-app-designer/

作者：Javier Cuello ? ?譯者：Iris(周婷)

Javier Cuello是專注于移動端的用戶體驗設計師。目前居住于巴塞羅那，為Zara、Telefónica(西班牙電信公司)和雅虎做設計。他也是《設計移動App》一書的作者之一。

設計移動端app遠不止于視覺上美觀。它要求你深層了解設備，經(jīng)常要跳出之前的思維模式——即使這意味著要“摒棄”網(wǎng)頁設計所積累的經(jīng)驗。跟許多設計師一樣，我也是從出版業(yè)設計開始。之后沒多久，我涉足了網(wǎng)頁的世界，我為此著迷，其一度成為我工作的重心。在此期間，我學習了交互設計和用戶體驗相關的一些概念，之前這些方面我基本是張白紙。有些時候，我覺得自己陷入一種重復的工作循環(huán)：我找到了一種幾乎不會出錯的設計方法，借此每個新項目，相比之前我更能輕松快速完成，但所有的設計看起來多多少少都有些像。那時正是ios和Android系統(tǒng)剛剛出現(xiàn)的時候。

之后，我的生活有了出乎意料的轉(zhuǎn)變，為了尋找耳目一新的東西，我專注于一個完全不同的領域：移動app設計。真實的挑戰(zhàn)正是我需要的。我不僅要學新的知識，而且要拋棄我之前一直用的網(wǎng)頁設計的”神奇秘方“。此次頓悟后，又過了幾年，其實就是幾天前，設計部落心情復雜地見證了蘋果智能手表上的新app。一方面，這個設備帶來了一個新的設計空間，令人興奮不已，另一方面，這個設備上擁有前所未有的交互和用例，摸透這些是個十足的挑戰(zhàn)，也讓人感到膽怯。這不是我第一次在市面上見到類似的設備。但是新穎的技術頻繁呼喚新的設計方法，我們不得不加快步伐。

圖1：新的設備類別，如智能手表，迫使設計者不停地研究新的設計范例。

當然，第一次大浪潮約在20年前，因特網(wǎng)隨著首批網(wǎng)站涌現(xiàn)，無所不在。在此之前，許多像我一樣的設計者，專注于外觀，而因特網(wǎng)要求我們學習如何為一個交互媒介做設計。用戶不再僅僅是個旁觀者。這個轉(zhuǎn)變對有些人來說很難，這也說明了為什么那時不少網(wǎng)站上看起來就像堆疊著按【鈕形式的指示牌】——設計師不能立即吃透新型設備的特點。

圖2：BBC(左)和Hertz (右)的app界面看起來更像是網(wǎng)站，而不是app，它們忽視了一些移動端設計的習慣。

相同的情況也存在于今日的app中。應用程序看起來就像是迷你網(wǎng)站：它們就是在智能手機上“翻譯”了網(wǎng)頁，因而，在差異化、字體大小、觸屏目標和手勢上，都很失敗。至于誰會使用這個app、在哪里使用以及在什么設備上使用，這些也未考慮。做移動設計時，必定要脫離網(wǎng)站結構，因為它會干擾我們。我們得用不同的心態(tài)面對項目，并且深層了解移動設備，才能充分發(fā)揮職能設備的優(yōu)勢，形成良好的體驗。

所以，要成為app設計師，你需要具備什么呢？除了掌握必要知識，熟練使用工具外，你必須改變你的思維方式。下面是一些適用于app設計的建議。

改變你的工作方式

此時此刻，幾百個app正涌進市場——你沒有時間去浪費。作為專業(yè)人員，我們發(fā)布產(chǎn)品之前，不再耗費幾周或者幾個月在精美詳盡的設計上，否則會發(fā)現(xiàn)其他產(chǎn)品已經(jīng)解決了同樣的問題（而且很可能用的是類似的方法）。正在此時，lean UX出現(xiàn)了，一種短時間內(nèi)快速迭代的工作方法。該方法意味著產(chǎn)品設計和研發(fā)過程中需要持續(xù)地迭代，牢記一點：用戶測試之前，沒有什么是確定的。

圖3：Lean UX是一個持續(xù)迭代的無止境的環(huán)。

因此，app設計不能一開始就在Photoshop或Illustrator里設計。必須在界面設計之前，從線框原型和基礎設計著手。這樣，若有變動，花一點時間就可以改好，無需太久。從視覺設計入手是設計師的一個正常模式：通常這個階段是最有意思的。某種程度上說，我們也習慣了這種工作方式，因為這是唯一可行的方法。

最近，與一些設計師聊了聊，當我提到“項目開始時，只在紙上畫，不用電腦”時，大部分都滿臉驚訝。聽起來太自然，我們常常忘記了這也是一種方法。這樣設計有效避免了一些變量（如設計文檔的大小、顏色、使用的字體等）干擾我們——項目設計中，變量和細節(jié)會阻礙我們的創(chuàng)造力。個人覺得，紙上設計更有效，因為此時我們專注于這個想法，以及要解決的問題，不會陷入設計細節(jié)中，至少在初期不會這樣。

“移動優(yōu)先”或者從小屏幕開始設計，也是一個很好的策略。即使你的app在手機和平板上都可以用，從較小的手機上開始設計也會更有效。小屏幕上設計，強迫我們區(qū)分優(yōu)先級，去嚴格挑選，最終會改變我們的思維框架，之前的思維模式順應了電腦的大屏幕。

圖4：“移動優(yōu)先”是先基于智能手機設計，之后移入較大的屏幕。

我第一次按這樣的方法做項目時，很頭疼。可能這類似于你第一次去健身房：久未運動的肌肉開始酸痛，因為努力方法不同了。如果你從未試過這種方法，一定要試下。你會發(fā)現(xiàn)你的優(yōu)先級變了，很快會發(fā)現(xiàn)你的app中哪些功能是真正重要的、必不可少的。

你也可以將這想象成帶著行李旅行。如果你有一個小箱子，你會帶什么？你當然會帶最重要的東西，旅行中的必備物品，其他東西可以不帶。信不信由你，這個最平常的例子跟智能手機的設計是類似的。

從另一半中學習

一個app的成功依靠設計師和開發(fā)，他們互相協(xié)作、創(chuàng)新，保證app品質(zhì)一流。保證效率前提下，要達到這個目的，你們可以平行工作，以減少迭代次數(shù)。要達到這個目的，你必須知道設計和實際實現(xiàn)的復雜性。做這個的一個辦法是去使用開發(fā)工具，不需要開發(fā)一個完整的app，但至少做出速度快、可靠的界面，可準確傳達設計師的意圖。

圖5：我是唯一的設計，開發(fā)們都在等我完成，這就造成了瓶頸。

到巴塞羅那后沒多久，我在一家技術創(chuàng)始公司里工作。我驚訝地發(fā)現(xiàn)我是這里唯一的設計師——我被開發(fā)們包圍，一開始我遇到了很多瓶頸，因為每個人都在等我完成我的設計，這樣他們才能繼續(xù)他們的工作。漸漸，我知道如何使用類似Xcode的工具，以及一些基礎的編程語言。借助它們，我做了更復雜的提案，有時會跟項目其他成員步調(diào)一致。我在公司工作了數(shù)月后，開發(fā)也學會了我的工作方法。他們會直接打開我的設計文檔，不需要我解釋，就能知道如何導出設計內(nèi)容。（譯者注：跟不同部門的人互相學習。）

最后，我要教你一個小竅門：學習并使用其他項目成員相同的術語。這樣做后，你會發(fā)現(xiàn)辦公室每個人都在說同種語言。設計師和開發(fā)經(jīng)常提及相同的事情，但是表達方法不一樣，導致雙方溝通更加困難。

意識到團隊協(xié)作的重要性

回到之前的話題，團隊合作不僅僅是坐在同個辦公空間。它包含了角色間的合作、持續(xù)溝通。Lean app設計意味著拋棄瀑布流程（上個人工作完成之后，下個人才開始）。但實際上，大多團隊已經(jīng)形成了有效的混合流程，開發(fā)遵循敏捷方法（指定期限之前完成某個項目目標），設計遵循lean方法（快速迭代、通常沒有指定的截止日期）。

然而，此處依然遺留了瀑布流程的痕跡，設計師經(jīng)常比其他項目成員的工作提前一點，開發(fā)者當然也可以在每個設計都完備之前就介入開發(fā)。這就是為什么一個app設計師必須將他們的合作成員——特別是開發(fā)者——當做同盟，而非敵人。理解每個人，習慣于相互協(xié)作會帶來更好的結果。

我們常會害怕分享工作內(nèi)容，我們都有點抗拒可能引起的評論，特別是同為設計師的同事。事實是，對我們的方案來說，別人的評價很重要，包括來自沒有設計背景的人的反饋。一般他們會更側重于實際，可以起到很好的平衡作用。

前段時間我造訪了一個公司，他們告訴我設計師和開發(fā)者在不同的樓層工作，靠不同的即時通訊工具交流。我建議他們做點嘗試：參與同個項目的設計師和開發(fā)坐在一起。幾個月后，他們告訴我他們產(chǎn)品的質(zhì)量飛速提升，團隊成員之間的關系也融洽很多。

使用不同的操作系統(tǒng)

當你在設計一款app時，你不能只參照你自己的手機。如果你的目標是全球的手機市場，你至少得有Android、iOS、Windows系統(tǒng)的手機，并要習慣于不同手機系統(tǒng)，以充分了解如何在每個平臺上解決不同的設計場景。事實是，這個世界不只有iPhone。太多設計師限制于ios系統(tǒng)，遇到了Android系統(tǒng)后，他們僅僅翻譯了原始的app——常常幾乎完全依葫蘆畫瓢。

圖6：一個簡單的導航類型如tab，在iOS、安卓和win Phone上使用方法不同。

交互模式（如設計問題的固定解決方案）在不同的操作系統(tǒng)上是不一樣的。同樣，設計師要經(jīng)常使用不同的操作系統(tǒng)，以便吸收長處，使用正確。舉幾個例子，tab的位置、如何展示菜單、何時及什么方式展示主要操作和二級操作，這些在不同的手機操作系統(tǒng)上是不一樣的。為了學習不同手機操作系統(tǒng)的模式，給你提供一個實用的練習方法：在不同的操作系統(tǒng)上下載安裝相同的app，分析他們的差異和相似之處，他們的交互模式一定不同。所以呢，如果你發(fā)現(xiàn)在ios和Android上某個app長得一樣，操作起來也一樣，有可能是其中某個系統(tǒng)上做的不對。

圖7：Instagram 在ios（左）和Android（右）上看起來幾乎一樣。開發(fā)人員開發(fā)Android時，沒有遵循一些基本的交互模式。例如，Android上的tab應該在屏幕的上方。

而且，堅持觀察和嘗試其他的應用是一個好方法，有助于你找到解決你自己交互問題的答案。例如，當我感覺沒有靈感、不知如何解決某個問題的時候，我會去玩手機，仔細分析不同的Apps，尋找解決問題的方法。如果你手邊沒有手機，你可以去看看網(wǎng)站，像 Pttrns (iPhone), Android App Patterns 和 Windows Phone UI Design Patterns，這些網(wǎng)站上有大量的例子，可能對你有幫助。

為每件東西做一個原型

敏捷方法論意味著理解外觀和功能比實現(xiàn)更重要。類似地，原型能夠幫助我們衡量（通過用戶測試）一個app的可用性。理想情況下，我們出第一版原型并不需要太久。

圖8：原型可以很簡單，一塊木板加上一張紙，就像這個掌上通的原型一樣。

可能沒多少人記得掌上通：它第一版的原型就很簡單——一塊木板上貼著一張紙，紙上畫著打印好的設計界面。員工們會把這個原型放在口袋里，隨身攜帶，就好像是真的設備一樣。對于這項測試的重點——大小、重量、使用舒適度——這個原型足夠了。由此決定要設計到哪個程度，這樣可以測試你所想的，接著就可以開始下一步了！

畫原型的工具不勝枚舉，甚至可以在智能手機上運行，就好像是已經(jīng)做好的產(chǎn)品。一個原型，不僅要展示靜態(tài)的頁面，必須包含圖像、跳轉(zhuǎn)和手勢。

圖9：用了POP，你可以拍下紙面上的設計，快速創(chuàng)建一個可交互的原型。

根據(jù)你的工作流、你的目標和期望的結果，來選擇最合適的工具。例如，若我只需要線框原型，我會用 POP。 這個app可以拍下紙上的原型稿，并加上手勢和跳轉(zhuǎn)——又快又容易！但是如果想法夠成熟，使用專注設計的工具會更方便，如Sketch，接著用 Marvel, Flinto或InVision做一個高保證原型，打磨更完美。（注意：有時候并非要選擇優(yōu)于其他的工具的工具。選擇工具的部分取決于那個工具你用得順手。然而，如果你想專如何用 Sketch 和 InVision 做高保真原型，看Smashing Magazine絕對行?。?/p>

正如之前所說，市面上有海量的高保真原型制作工具，量太大，所以我花了幾個月做了個小網(wǎng)站——, Prototyping Tools，羅列了我所知的所有工具。這個網(wǎng)站羅列了每個工具的主干功能，方便大家選擇。

圖10：我的個人項目， Prototyping Tools。

另一方面，注意操作系統(tǒng)更注重微觀互動（micro-interactions）——如安卓的“material design”（谷歌推出了一種全新的設計語言）。將這些微觀互動表現(xiàn)在原型中，這是今日設計師的職責。（像Keynote等工具可以幫助你輕松展現(xiàn)這些細節(jié)。Keynote’s Magic Move選項很易找。）

不要相信你看見的

設計網(wǎng)頁版的產(chǎn)品時，可以展現(xiàn)設計的動態(tài)效果。但Apps，你就得在移動設備上測試，以便于觀察界面（和功能）?？傊?，這樣的測試很重要，可以幫助你選擇對比度和尺寸。

安卓和iOS的工具能夠幫助設計師在手機上以不同分辨率和密度展現(xiàn)他們的作品。對于iOS，最熟知的是LikeView。另一個，我最常用的是Skala（在安卓和iOS上都適用），還可以在再Mac上演示。如果你用sketch，那么你也可以嘗試 Sketch Mirror。不過Windows和Windows Phone上沒有這樣的工具（至少我不知道）。

圖11：Pixate有一款app連上電腦后，你可以用手機上預覽你的作品。

我工作時，我一般會在我手機上看下設計，確認沒有問題之后再繼續(xù)。我一次只為一種操作系統(tǒng)設計，手機也幾乎不離身。這樣我就能經(jīng)常在手機上看我的設計，第一稿線框圖完成后，我也能確認它的大?。▓D表、文字、觸碰目標的大?。?、對比度和顏色是我想要的。如果不這么做，你可能做完才發(fā)現(xiàn)，這時再去修改會更耗時間。

另一件重要的事：寫一份與你展示作品的手機屏幕同樣大?。ǜ叨葘挾纫粯樱┑脑O計文檔。（注意：如果你為不同大小的屏幕設計，記住像素不再是衡量大小最好的方式，因為它隨著不同操作系統(tǒng)而變——例如，看下iOS系統(tǒng)下的點points和安卓系統(tǒng)下的密度獨立像素。做這個能“強迫”你去充分理解[如何設計]和[如何在當前移動市場上處理圖像]的區(qū)別）。一旦你的設計開發(fā)完成，檢查下這個app在不同手機和操作系統(tǒng)下的樣式和表現(xiàn)，而不僅限于身邊最好的手機。

保持謙卑之心

App設計師必須拋棄做一個最終版的東西。一個app是永遠不會完成的，因為這是隨時間而發(fā)展的一個數(shù)字化產(chǎn)品。正因為這個原因，我們不能以確定的立場來處理界面設計。通過可用性測試和解決用戶遇到的問題，來調(diào)整設計，才是正解。

有時候我們設計者傾向于認為：用戶用app時犯錯了，那他們錯了，我們沒有責任。事實上更可能是我們做了一些錯事。檢測問題（發(fā)現(xiàn)我們的錯誤）并不是一件壞事。不如說是一次學習和改正我們的作品的機會，從中優(yōu)化它，創(chuàng)建一個容易使用的東西。我們必須心懷謙卑去做設計。

我曾經(jīng)工作的一個公司，每次我告訴我的老板我完成了一個設計，他會問我“你已經(jīng)讓用戶測試了嗎？”我并非總是提前測試了，但是在最后這個變成了我的一個習慣，每次我測試時，我心態(tài)開放，愿意發(fā)現(xiàn)我可能發(fā)現(xiàn)的問題。只有你足夠成熟，愿意去接受錯誤并從中學習，才能做到。很難，但你若成功，會是一件很值得的事。

站在最前沿

信息太多，設計時想要任何事都保持在最前沿，幾乎是不可能的。然而，作為app設計者，我們必須保持參與感，對新的和將要來的事物都保持好奇心。包括app設計趨勢，以及操作系統(tǒng)的新版本。最新的操作系統(tǒng)，不管喜歡與否，我們得安裝，并站在最前沿，關注app設計走向。

閱讀最新操作系統(tǒng)的官方設計指南是獲取有價值信息的好方法之一。你也可以從工業(yè)領袖學習，如 Josh Clark何Luke Wroblewski等。保持領先也意味著嘗試工具，使我們的設計和作品上市之后更加簡潔和高效。我們不能害怕走出舒適區(qū)域，或拋棄舊的的工作和設計方法。

圖12：Sketch 是一個相對新的工具，易用。

不久前，我終于嘗試了Sketch。剛開始的時候有點難，因為是從0開始學，特別是我已經(jīng)習慣于用我已經(jīng)了解的工具。幾個月后，我意識到這個軟件有一個學習曲線。它節(jié)省了我的時間，工作起來更加靈活——這些都是對愿意學習新事物的回饋。

結語

最后強調(diào)下，必須從內(nèi)改變一個人設計思維模式，使其適應app設計。沒有人會強迫你這樣做。但如果不改變，你會有風險僅成為一個“圖標工廠”，在設計的廣闊領域中只邁出了一小步。

綜上，設計app需要新的思維方法。是時候跳出網(wǎng)頁設計的框架，去理解智能手機、平板，甚至智能手表是不同且各具特色的設備。這是設計出全面且完整的移動端體驗的唯一方法。