【牆外乾貨】移動視覺與交互設計10項法則自查表

近年來，移動手機風靡全球。用戶們也已經習慣依照一定的法則在移動端獲取信息。在這個微渺的事物就可以定勝負的世里，開發者們需要去了解並迎合用戶的高需求，以立足於此。

那麼，你應該怎樣設計去滿足日漸高漲的用戶期望呢？

如果轉瞬間即可以有影響某款應用的事情發生，那麼你可以預見的是，在這個移動領域立足並不是一件輕鬆的事兒。

在開發者中流傳著一個真理，工具可以幫助你做簡單的事情，從而讓你集中注意力於那些困難與複雜的領域。如果你現在正在處於從 Web 設計向 App 設計的轉型之中，那麼你一定很難把握小與大的矛盾——當你要把頁面做小，實際上所需完成的工作量會更大。

如果你尚處於困惑之中，我會告訴你這十大法則，包括五條視覺設計法則與五條交互設計法則。掌握了它，你在設計移動界面的時候就不會那樣子捉襟見肘。

5 大視覺設計法則

蘋果在用戶體驗層面開創了一個新的並充滿驚喜的設計領域，它給我們提供了設計參考、樣品 App，從而給我們這個時代拉開了一個不同以往的序幕。

同時，谷歌也未停滯不前，谷歌在對行業仔細觀察並精準分析之後，成立了一種新的頁面規則，並開創了新的用戶系統應用於他們自主研發的手機上。

然而，蘋果缺乏對移動端用戶體驗的視覺與交互方面的再定義，在這種情況下，移動應用的創始人們也在事實上進行了創新，從而生成了這十大法則，你可以在這十大法則的基礎上去構建你的 App 。

1、合理布局，佔滿屏幕

人們都喜歡著內容充實的頁面，因此，你大可不必對頁面的畫布進行節省。你可以將你要設計的頁面看作一幅油畫，而你是那個畫匠。所以，盡情的將元素橫向鋪滿整個界面並縱向平衡他們之間的關係吧，另外，在背景中加入一些肉眼可見的小驚喜也是不錯的選擇哦。

2、刪減雜蕪

沒有人喜歡雜亂無章的東西，特別是在移動屏幕這樣一個僅有 4-5 寸大小的地方。在移動端，頁面布局的雜亂會被用戶們放大無數倍，所以，把用戶最需要的最想看的東西呈現出來而將冗雜多餘的元素刪除是非常必要的。用戶體驗好的產品應當是簡約的，你並不需要展現太多，過猶不及，剛剛好才是最恰當的。

3.尊重用戶習慣

為什麼必須要這樣呢？在移動端，像返回鍵、導航欄、菜單欄和頂部任務欄這種元素是每一款 App 都會有的，保持它們為相同的位置、大小是用戶非常期望的事情。如果你沒有把握完全創新將原有的用戶習慣打破，你就必須遵從它。

4、使每一像素都臻於完美。

由於 LED、高清、手機顯示屏可以影響用戶對這款應用的體驗從而影響他們的決策，「華麗」是遊戲界面的代名詞。你一定要確保你每一個 icon 的對齊與間距都是完美的。使用高解析度的圖像可以將應用完美的呈現在每一個顯示器上。千萬千萬不要將不同的字體、字型大小和字體顏色混雜在一起，那樣會顯得很醜。

5、忘記你網頁端設計的經驗

網頁端已經統治了互聯網太久以至於你很難走出網頁設計的慣用思維中，你應該將你自己放到本土移動應用設計者的心態之中。事實上，儘管一些Web功能不應該存在於移動領域，可是他們仍然存在著。你可能會被誘惑去設計一個估計百萬級體量的插件，但是當你調整插件場景時你應該謹慎行事。比如，不要做一個帶著下劃線的連接，不要做彈出窗口或者電台按鈕，這些都不是為移動用戶體驗而設計的。

5大交互法則

在移動領域，有些理念是具有創新性的，交互設計就是這些理念之一。感謝蘋果，讓我們在交互與觸摸體驗中有了良好的範本。所以，我會圍繞著這些告訴你交互設計五大法則。

1、考慮到觸摸問題

移動用戶界面是有一個可觸摸並可與手指交互的規則的。所以，在移動應用設計上，你應該將每一個 icon 設計到恰當的可以容納手指觸摸的大小上，如果頁面面積不夠，你可以製作卡片使得手指可以充分接觸並提供即時的反應。你要切記的一點是，懸停幾乎對移動交互是不產生影響的。並且你千萬不要忘記，在移動頁面上，不能簡單的將手指類比為網頁上的滑鼠。

2、滑動與伸展

在本土的手機頁面中，不同頁面相互影響是極好的的，所以，在完全的頁面上讓他們一起合作吧。比如下拉以刷新，滾動時隱藏標題等。讓頁面在任何方向上滾動變得容易。手勢是預期的觸摸介面，所以你可以用手來縮放，拉伸，捏動等。

3、微調過渡

房地產領域強調地段，而在移動手機領域卻強調過渡。我們所要滿足的不光是用戶對「快」的需求，還有他們交互速度的需求。我們可以通過能見度的改變讓用戶的過渡感覺到很舒服，就像從下往上播放幻燈片一樣。如果他們要按返回鍵，則過渡效果可以反向轉換。

4.讓載入過程變得優雅

因為在本土手機中，用戶，速度，過渡和性能是無處不在的。在用戶的心中，沒有什麼是比空白屏幕更可怕的。所以，你要確保你不會設計出空白的過渡屏幕。在過渡屏中展現一些東西是非常有必要的，不要讓用戶去等待。不要跳轉內容，逐步載入，而不是批量的載入所有數據，從而使元素優雅的出現。

5、增加一些動效設計

除非它有魔術，在現實中，元素不會突兀的出現在任何地方。移動用戶們喜歡看元素們到處動的樣子。你可以不會魔法，但是你可以營造出一種幻覺。因此，使用動畫，從而緩解突兀的感覺，並收集任何你需要的數據。

其實…你不必記住這些規則的

每當你認為你的移動頁面設計的不好看或者感覺不對的時候，你可以來翻一翻這個自查表：

在後台回復 自查表 可以下載，記住，我們給你提供了為你做簡單事情的工具，所以，你要集中注意力去攻堅克難了。（個人版是永久免費的）

這個表格不僅擁有一個令人難以置信的框架和用戶界面，它是基於默認的所有規則。況且它也可以幫助縮短開發時間，所以你可以專註於那些可以滿足用戶期望的痛點。

原文網址：https://medium.com/outsystems-experts/10-rules-for-creating-a-mobile-look-and-feel-dc81341660e4#.2ywhdnmva

譯者：孫怡娜

編輯：Lin.

聲明：本文由設計夾翻譯小組成員孫怡娜翻譯，Lin. 編輯，如需轉載，請申請授權並保留譯者全部信息，轉載合作請添加微信：sezign01。