【編者按】本文轉(zhuǎn)自@im小氣的神?的個(gè)人博客。移動(dòng)平臺(tái)的設(shè)計(jì)與傳統(tǒng)的網(wǎng)頁(yè)有許多不同之處，如獨(dú)特的交互體驗(yàn)、不同光線下的視覺(jué)效果以及移動(dòng)終端的資源有限。這些都考驗(yàn)著開(kāi)發(fā)者的技術(shù)。

通過(guò)對(duì)設(shè)計(jì)移動(dòng)界面的點(diǎn)滴記錄，本文為讀者介紹了對(duì)界面的規(guī)劃的設(shè)計(jì)原則以及相關(guān)案例，并且推薦了自己中意的設(shè)計(jì)工具。

一、減少空間占用

與面向桌面電腦的網(wǎng)頁(yè)設(shè)計(jì)不同,移動(dòng)平臺(tái)的設(shè)計(jì)中，屏幕空間是一個(gè)不可忽視的限制因素。設(shè)計(jì)需要符合移動(dòng)平臺(tái)用戶的使用習(xí)慣，以最佳的狀態(tài)呈現(xiàn)屏幕信息。

接下來(lái)以當(dāng)前正在工作的UI做為sample，實(shí)戰(zhàn)空間優(yōu)化。

改進(jìn)原則

去除不必要的提示信息：
合理減少界面中的文字信息，圖形化界面直觀的使用戶可以完成操作任務(wù)。

控制字號(hào)，使用高亮/對(duì)比方式突出類似條目信息 ：
有需要充分利用單屏的空間，在不影響文字顯示底線，采用多途徑的設(shè)計(jì)方式描述內(nèi)容。

合理布局功能控件 ：
減少顯示中的控件使用，學(xué)會(huì)聰明的隱藏低優(yōu)先級(jí)的功能，對(duì)于用戶熟悉操作與產(chǎn)品開(kāi)發(fā)都將是有益的。
如在Iphone平臺(tái)善用標(biāo)準(zhǔn)化的action sheet，在Android中的collapsed menu。

限制因素

平臺(tái)操作習(xí)慣
遵循不同平臺(tái)的設(shè)計(jì)準(zhǔn)則(你可以從官方的UI開(kāi)發(fā)指南獲取這些幫助教程)，避免將錯(cuò)誤的理念帶給特定的平臺(tái)。如你不會(huì)在Iphone的設(shè)計(jì)中使用Android/Symbian的Options。熟悉這些原則不僅會(huì)使產(chǎn)品易用，善用組合的設(shè)計(jì)也將提升操作體驗(yàn)。

屏幕物理屬性
不同尺寸的屏幕不同的UI。要考慮的產(chǎn)品在所有目標(biāo)用戶的不同屏幕的顯示效果。如果要做一個(gè)通版的UI設(shè)計(jì)，需要重點(diǎn)考慮帶來(lái)的負(fù)面影響。觸摸屏是另外一個(gè)需要考慮的情況，滑動(dòng)使得翻頁(yè)變的容易，可點(diǎn)擊的元素尺寸是否有必要增大以適應(yīng)大的手指……要知道， mutli-touch 目前只是apple的專利。

我們需要為特定的這個(gè)頁(yè)面做些什么

這個(gè)是一個(gè)Android平臺(tái)的程序。一個(gè)優(yōu)惠券列表頁(yè)面，優(yōu)惠券是我們最重要的顯示內(nèi)容。用戶需要在單屏中預(yù)覽更多的優(yōu)惠券信息，商店信息次之，而tab導(dǎo)航將被保持以保證用戶不會(huì)迷路。

• 移除標(biāo)題。
• 默認(rèn)收起商店信息,點(diǎn)擊可彈下顯示。
• 為保證用戶對(duì)商店信息的初步了解與注意,加入商店名稱。

接下來(lái)我們將得到下面的界面。

UI不只是皮膚，請(qǐng)用心使界面更加好用。

二、Flow大局觀

在移動(dòng)設(shè)計(jì)中，我們需要完善的功能flow，對(duì)它認(rèn)知的價(jià)值使得flow在整個(gè)設(shè)計(jì)開(kāi)發(fā)過(guò)程中始終走在前面。完善的flow不僅令功能產(chǎn)品更加易用，帶來(lái)良好的用戶體驗(yàn)，與此同時(shí)，也有助于提升開(kāi)發(fā)效率，不到位的flow將帶來(lái)設(shè)計(jì)與開(kāi)發(fā)的反復(fù)，使團(tuán)隊(duì)蒙受損失。

良好的移動(dòng)產(chǎn)品flow標(biāo)準(zhǔn)有三

• end to end
• 清晰
• 整合

所謂end to end是指功能根據(jù)需求設(shè)計(jì)需要符合所在平臺(tái)的特性，完整的考慮到用戶如何在任何場(chǎng)景下使用操作及完成任務(wù)，提供因?yàn)橛行Щ驘o(wú)效操作而帶來(lái)的反饋幫助信息。

清晰是指整個(gè)設(shè)計(jì)中不會(huì)造成用戶的疑惑，符合平臺(tái)特性易于理解的設(shè)計(jì)。通常但凡清晰的功能，即使需要付出更多次的操作，value還是高于稍顯混亂的設(shè)計(jì)，雖然后者簡(jiǎn)化了用戶的操作。

整合，在敘述減少空間占用時(shí)提到，受限于移動(dòng)產(chǎn)品的諸多條件，合理的歸納使得產(chǎn)品使用更為流暢。這與清晰并不矛盾，重在調(diào)和。

下面以前些時(shí)間已經(jīng)release的一個(gè)功能模塊作為示例，展示如何設(shè)計(jì)一個(gè)良好的flow。

案例簡(jiǎn)析

功能目標(biāo)：通過(guò)列表快速定位城市。

該功能從屬于Map視圖，圖標(biāo)以形象的道路指向標(biāo)示。

在mockup中的功能主UI，顯示支持的國(guó)家；

點(diǎn)擊任意國(guó)家進(jìn)入以首字母排列的城市列表；

點(diǎn)擊任意城市，自動(dòng)切入到Map視圖并轉(zhuǎn)向相應(yīng)的可視地區(qū)。

主UI左上角提供Back鍵，預(yù)留回退。

在此，還有另一種設(shè)計(jì)思路：使用IPhone自帶的Pickers控件，將國(guó)家列表橫向置于上方，城市列表縱向置于UI下方。

它的優(yōu)勢(shì)在于可以在一屏中解決所有的問(wèn)題。但為了更好的使用Pickers，你需要加入更多的諸如Supported City等提示信息以區(qū)分兩個(gè)Pickers，以及頂部的Done Cancel按鈕，以完善flow。

這使得用戶需要更多的時(shí)間來(lái)熟悉操作，這不是我們想要看到的。

站在用戶的高度，你將更理解設(shè)計(jì)。

三、工欲善其事,必先利其器-移動(dòng)端的交互設(shè)計(jì)工具

經(jīng)常有朋友問(wèn)起，用什么工具做移動(dòng)端的交互設(shè)計(jì)？

這是通常在接觸交互設(shè)計(jì)都會(huì)碰到的問(wèn)題，分享幾點(diǎn)應(yīng)用的經(jīng)驗(yàn)。

1、Fireworks

從N年前做web開(kāi)始就一直用Fireworks，這是一個(gè)非常高效的屏幕圖像處理軟件。

提供了基本的圖形、鋼筆工具，并可以快速的完成顏色的定制設(shè)置，布局便捷。

Fireworks是最佳的整合平臺(tái)。

忘記全能的PS吧，這里你不需要瑞士軍刀。

2、PowerPoint

對(duì)的，就是幻燈片演示。永遠(yuǎn)不要忽略工具的潛力。

PowerPoint 提供了大量的預(yù)設(shè)工具與樣式，以滿足基本場(chǎng)景的繪制，并創(chuàng)建不受工具限制的演示修改環(huán)境（當(dāng)然PowerPoint是必備的^^）。

同樣這是最優(yōu)體積的解決方案。

忘記臃腫的位圖工具吧，這里只有KB級(jí)別的wireframe。

3、Axure RP

這是真正稱為專業(yè)意義上的交互設(shè)計(jì)工具。復(fù)雜到抓狂，當(dāng)然我們并不是需要搞懂所有的功能。

RP即是Rapid Prototyping，快速原型。

充分利用它的自帶組件，整合到Fireworks與PowerPoint里去吧。

4、MindManager

記住它的名字，管理好的你思維，我們不能遺忘任何一個(gè)Scenario。

在工作中保持一個(gè)窗口。

它距產(chǎn)品的mockup最遠(yuǎn)，卻離精髓最近。

5、Balsamiq Mockups

值得一試的IPhone原型工具，你會(huì)發(fā)現(xiàn)原型的表現(xiàn)也可以有趣。

但只用它去做一些不正式的show吧。

它的模型不夠精確、過(guò)于隨意，也不對(duì)中文提供支持（或許善用工具的你會(huì)導(dǎo)出到Fireworks中二次處理）。

6、鉛筆與記事本

真正熱愛(ài)你的所從事的工作。

快速的記錄想法隨時(shí)隨地，電子產(chǎn)品總有盲區(qū)。

拿一只順手的鉛筆，利其器，善其事。

最后最重要的一點(diǎn)——它們只是工具，核心在于獨(dú)立精神驅(qū)動(dòng)下的你。

四、為了陽(yáng)光而設(shè)計(jì)

Lisa是一個(gè)sales，一天上午她拿出手機(jī)準(zhǔn)備定位當(dāng)前與客戶的位置，確定路線。卻發(fā)現(xiàn)因?yàn)檫^(guò)于強(qiáng)烈的光線，看不清列表結(jié)果頁(yè)的地址。

Bill有睡前用手機(jī)查看訂閱、處理郵件的習(xí)慣。卻總會(huì)因?yàn)槠聊淮萄鄣墓饩€，需要時(shí)間逐漸從光暈中適應(yīng)辨清字體。

類似的場(chǎng)景在日常生活中你或許也有碰到。

部分硬件設(shè)備也為其提供了相應(yīng)的解決方案——屏幕亮度調(diào)節(jié)，可以手動(dòng)控制屏幕的亮度，適應(yīng)不同的環(huán)境，以及在更高端的設(shè)備上支持的光線感應(yīng)器。

同時(shí)我們也看到應(yīng)用商所做的努力。更有貼心的是閱讀應(yīng)用的夜晚閱讀模式，這為字體與背景提供了弱對(duì)比度的配色設(shè)計(jì)。

但我們?cè)诟嗟膽?yīng)用軟件中發(fā)現(xiàn)，對(duì)光線環(huán)境的設(shè)計(jì)需求被忽略。我相信也會(huì)有更多的方式與設(shè)計(jì)，為用戶帶來(lái)良好的針對(duì)環(huán)境的優(yōu)化體驗(yàn)。忘記浮躁的成本效益，專注產(chǎn)品UI設(shè)計(jì)。

設(shè)計(jì)原則

布局結(jié)構(gòu)清晰

清晰的布局結(jié)構(gòu)是對(duì)一個(gè)應(yīng)用是否可用的基本要求，功能布局層次鮮明，使得新用戶通過(guò)低成本的學(xué)習(xí)快速記憶掌握應(yīng)用的功能布局，能夠在短時(shí)間內(nèi)完成既定的任務(wù)。

內(nèi)容清晰

保持圖標(biāo)的簡(jiǎn)約以及文字的可讀尺寸，切忌因?yàn)檫^(guò)于追求特效與視覺(jué)美感，忽略最基本的可讀性。

適合的灰度與色彩對(duì)比度

為不同的環(huán)境模式提供相應(yīng)的對(duì)比度設(shè)計(jì)，以減少用戶的閱讀疲勞，其中仍需保持內(nèi)容的可讀性。

聲音事件的反饋

設(shè)計(jì)不應(yīng)局限于視覺(jué)體驗(yàn)，在enable操作后觸發(fā)的聲音，會(huì)讓用戶確信每一步操作的正確，以及填充某些環(huán)境下視覺(jué)設(shè)計(jì)的死角。

適合的環(huán)境元素參與

更多具有感情色彩的元素參與，將賦予界面更多的靈性。將weather的元素加入reader不是一件很溫馨的事情么？

視覺(jué)設(shè)計(jì)范例

1、Google Map

清晰的功能引導(dǎo)設(shè)計(jì)，綠色、紅色的Pin可以直觀的確認(rèn)目的地與當(dāng)前位置，導(dǎo)航列表簡(jiǎn)潔，可以更可靠的工作在日光之下。

2、QQ瀏覽器

提供了白天模式/夜間模式的切換，在夜間周圍光線較弱時(shí)，一定程度上緩解了視覺(jué)疲勞。

3、商鋪點(diǎn)評(píng)

為室內(nèi)/室外環(huán)境分別做了配色以及字體設(shè)計(jì)。在室外的實(shí)際應(yīng)用過(guò)程中，更大的字體與對(duì)比反差帶來(lái)了良好的閱讀體驗(yàn)。并概念性的加入了天氣組件，為出游逛街提供了更多便利。

特例

當(dāng)然，并不是所有的應(yīng)用都需要針對(duì)性的UI設(shè)計(jì)，該類設(shè)計(jì)較適用于內(nèi)容主導(dǎo)的生活相關(guān)應(yīng)用。在游戲中設(shè)計(jì)多套色彩模型并不是一個(gè)好主意。

五、主功能入口設(shè)計(jì) tabbar or grid-based

傳統(tǒng)的iPhone Android應(yīng)用主界面功能入口是基于tabbar的設(shè)計(jì)，區(qū)別無(wú)非是tabbar的位置是top or bottom。（我們甚至還看到了針對(duì)這個(gè)位置的討論，當(dāng)然兩者都有其設(shè)計(jì)的意義）

而隨著產(chǎn)品功能的不斷加入，會(huì)出現(xiàn)tabbar的空間不能滿足需求的情況，你知道iPhone 默認(rèn)只預(yù)留了5個(gè)位置（more并不是一個(gè)好的設(shè)計(jì)），在保證主功能可視與可點(diǎn)擊的情況下，Android也擺脫不了tabbar設(shè)計(jì)受限的情況。

是的，我們需要改變這一個(gè)傳統(tǒng)的設(shè)計(jì)。或許你在許多應(yīng)用上已經(jīng)有所體驗(yàn)——基于grid的設(shè)計(jì)。

首先，我們?cè)僦匦禄氐角懊娴挠懻?，tabbar究竟出現(xiàn)了什么問(wèn)題？綜合來(lái)看，主要為以下幾點(diǎn)

• 無(wú)法滿足一次展示全部功能或者更低操作成本下展示的需求。
• tab切換存在不同tab執(zhí)行重疊任務(wù)的可能，對(duì)于用戶專注某一flow任務(wù)產(chǎn)生障礙。
• 對(duì)操作本身的消極設(shè)計(jì)，增加誤操作的可能性，也成為在單一任務(wù)執(zhí)行時(shí)的視覺(jué)噪聲。

grid-based的設(shè)計(jì)是如何解決上述的設(shè)計(jì)？

• 在一個(gè)頁(yè)面中允許加入大量的icon入口，并通過(guò)頁(yè)面滑動(dòng)輕松完成對(duì)功能的瀏覽。
• 結(jié)合清晰豐富的功能入口，專注單一功能的流程設(shè)計(jì)。
• 頁(yè)面上更少視覺(jué)與可點(diǎn)擊元素的加入，更c(diǎn)lean的設(shè)計(jì)。

如何進(jìn)一步的完善grid-based設(shè)計(jì)？

• 我們?cè)趙indowsPhone找到了答案——live tiles。它承載了更多的信息傳達(dá)，而不只是icon。
• 專注單一功能的核心flow，不要妄圖在單一任務(wù)的操作過(guò)程中提供其它功能入口。
• 隨時(shí)終止并回到主功能入口的可能。

即便我們?cè)谏鲜龅奈闹袑abbar批判的體無(wú)完膚，然而grid-based本身也不是完美主義，面臨的挑戰(zhàn)在于

• 頁(yè)面層次變深，對(duì)flow設(shè)計(jì)提出更高的要求。
• 如果應(yīng)用的主要功能不超過(guò)5個(gè)或者僅是單一功能，你并不需要這樣一個(gè)擴(kuò)展性極強(qiáng)的設(shè)計(jì)。

走完上述的文字，隱約察覺(jué)這其實(shí)是metro與iPhone/Android的碰撞。我想說(shuō)，metro是一次設(shè)計(jì)思維的變革，它使得人們開(kāi)始?xì)w回信息本身，任務(wù)被更自然的執(zhí)行，而不再游離在冗余的頁(yè)面元素。

來(lái)源：http://www.mdong.org/