移動(dòng)設(shè)備界面UI設(shè)計(jì)注意事項(xiàng)全解析
本文為供職于RDRN的交互設(shè)計(jì)師（Interaction design engineer）關(guān)于移動(dòng)產(chǎn)品用戶體驗(yàn)的文章，從設(shè)計(jì)移動(dòng)設(shè)備的空間、Flow的大局觀念和光線等方面介紹了移動(dòng)設(shè)備界面UI設(shè)計(jì)注意事項(xiàng)，也將介紹幾款UI設(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)化.
實(shí)戰(zhàn)空間優(yōu)化
改進(jìn)原則
◆去除不必要的提示信息
合理減少界面中的文字信息,圖形化界面直觀的使用戶可以完成操作任務(wù).
◆控制字號(hào),使用高亮/對(duì)比方式突出類似條目信息
有需要充分利用單屏的空間,在不影響文字顯示底線,采用多途徑的設(shè)計(jì)方式描述內(nèi)容.
◆合理布局功能控件
減少顯示中的控件使用, 學(xué)會(huì)聰明的隱藏低優(yōu)先級(jí)的功能, 對(duì)于用戶熟悉操作與產(chǎn)品開發(fā)都將是有益的.
如在Iphone平臺(tái)善用標(biāo)準(zhǔn)化的action sheet, 在Android中的collapsed menu.
限制因素
◆平臺(tái)操作習(xí)慣
遵循不同平臺(tái)的設(shè)計(jì)準(zhǔn)則(你可以從官方的UI開發(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)的程序.
這是優(yōu)惠券列表頁(yè)面,優(yōu)惠券是我們最重要的顯示內(nèi)容, 用戶需要在單屏中預(yù)覽更多的優(yōu)惠
券信息.商店信息次之.tab導(dǎo)航將被保持以保證用戶不會(huì)迷路.
◆移除標(biāo)題.
◆默認(rèn)收起商店信息,點(diǎn)擊可彈下顯示.
◆為保證用戶對(duì)商店信息的初步了解與注意,加入商店名稱.
接下來(lái)我們將得到下面的界面.
優(yōu)化后的界面
UI不只是皮膚, 請(qǐng)用心使界面更加好用.
#p#
Flow大局觀
在移動(dòng)設(shè)計(jì)中，我們需要完善的功能flow，對(duì)它認(rèn)知的價(jià)值使得flow在整個(gè)設(shè)計(jì)開發(fā)過程中始終走在前面。完善的flow不僅令功能產(chǎn)品更加易用，帶來(lái)良好的用戶體驗(yàn)，與此同時(shí)，也有助于提升開發(fā)效率，不到位的flow將帶來(lái)設(shè)計(jì)與開發(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)化了用戶的操作。
整合，在前文有所涉及，受限于移動(dòng)產(chǎn)品的諸多條件，合理的歸納使得產(chǎn)品使用更為流暢。這與清晰并不矛盾，重在調(diào)和。
下面以前些時(shí)間已經(jīng)release的一個(gè)功能模塊作為示例，展示如何設(shè)計(jì)一個(gè)良好的flow。
如何設(shè)計(jì)一個(gè)良好的flow
案例簡(jiǎn)析
功能目標(biāo)：通過列表快速定位城市。
該功能從屬于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ì)在于可以在一屏中解決所有的問題。
但為了更好的使用Pickers，你需要加入更多的諸如Supported City等提示信息以區(qū)分兩個(gè)Pickers，以及頂部的Done Cancel按鈕，以完善flow。
這使得用戶需要更多的時(shí)間來(lái)熟悉操作，這不是我們想要看到的。
站在用戶的高度，你將更理解設(shè)計(jì)。
#p#
合理利用光線進(jìn)行設(shè)計(jì)
Lisa是一個(gè)sales，一天上午她拿出手機(jī)準(zhǔn)備定位當(dāng)前與客戶的位置，確定路線。卻發(fā)現(xiàn)因?yàn)檫^于強(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)用是否可用的基本要求，功能布局層次鮮明，使得新用戶通過低成本的學(xué)習(xí)快速記憶掌握應(yīng)用的功能布局，能夠在短時(shí)間內(nèi)完成既定的任務(wù)。
◆內(nèi)容清晰
保持圖標(biāo)的簡(jiǎn)約以及文字的可讀尺寸，切忌因?yàn)檫^于追求特效與視覺美感，忽略最基本的可讀性。
◆適合的灰度與色彩對(duì)比度
為不同的環(huán)境模式提供相應(yīng)的對(duì)比度設(shè)計(jì)，以減少用戶的閱讀疲勞，其中仍需保持內(nèi)容的可讀性。
◆聲音事件的反饋
設(shè)計(jì)不應(yīng)局限于視覺體驗(yàn)，在enable操作后觸發(fā)的聲音，會(huì)讓用戶確信每一步操作的正確，以及填充某些環(huán)境下視覺設(shè)計(jì)的死角。
◆適合的環(huán)境元素參與
更多具有感情色彩的元素參與，將賦予界面更多的靈性。將weather的元素加入reader不是一件很溫馨的事情么？
視覺設(shè)計(jì)范例
◆Google Map
Google Map
清晰的功能引導(dǎo)設(shè)計(jì)，綠色、紅色的Pin可以直觀的確認(rèn)目的地與當(dāng)前位置，導(dǎo)航列表簡(jiǎn)潔，可以更可靠的工作在日光之下。
◆QQ瀏覽器
QQ瀏覽器
提供了白天模式/夜間模式的切換，在夜間周圍光線較弱時(shí)，一定程度上緩解了視覺疲勞。
◆商鋪點(diǎn)評(píng)
商鋪點(diǎn)評(píng)
為室內(nèi)/室外環(huán)境分別做了配色以及字體設(shè)計(jì)。在室外的實(shí)際應(yīng)用過程中，更大的字體與對(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è)好主意。
#p#
幾款經(jīng)典的交互設(shè)計(jì)工具
經(jīng)常有朋友問起，用什么工具做移動(dòng)端的交互設(shè)計(jì)？這是通常在接觸交互設(shè)計(jì)都會(huì)碰到的問題，以下為幾點(diǎn)應(yīng)用的經(jīng)驗(yàn)。
Fireworks
Fireworks
從N年前做web開始就一直用Fireworks，這是一個(gè)非常高效的屏幕圖像處理軟件。
提供了基本的圖形、鋼筆工具，并可以快速的完成顏色的定制設(shè)置，布局便捷。
Fireworks是最佳的整合平臺(tái)。
忘記全能的PS吧，這里你不需要瑞士軍刀。
PowerPoint
PowerPoint
對(duì)的，就是幻燈片演示。永遠(yuǎn)不要忽略工具的潛力。
PowerPoint 提供了大量的預(yù)設(shè)工具與樣式，以滿足基本場(chǎng)景的繪制，并創(chuàng)建不受工具限制的演示修改環(huán)境（當(dāng)然PowerPoint是必備的。
同樣這是最優(yōu)體積的解決方案。
忘記臃腫的位圖工具吧，這里只有KB級(jí)別的wireframe。
Axure RP
Axure RP
這是真正稱為專業(yè)意義上的交互設(shè)計(jì)工具。復(fù)雜到抓狂，當(dāng)然我們并不是需要搞懂所有的功能。
RP即是Rapid Prototyping，快速原型。
充分利用它的自帶組件，整合到Fireworks與PowerPoint里去吧。
MindManager
MindManager
記住它的名字，管理好的你思維，我們不能遺忘任何一個(gè)Scenario。
在工作中保持一個(gè)窗口。
它距產(chǎn)品的mockup最遠(yuǎn)，卻離精髓最近。
Balsamiq Mockups
Balsamiq Mockups
值得一試的IPhone原型工具，你會(huì)發(fā)現(xiàn)原型的表現(xiàn)也可以有趣。
但只用它去做一些不正式的show吧。
它的模型不夠精確、過于隨意，也不對(duì)中文提供支持（或許善用工具的你會(huì)導(dǎo)出到Fireworks中二次處理）。#p#
主功能入口設(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ì)?；蛟S你在許多應(yīng)用上已經(jīng)有所體驗(yàn)——基于grid的設(shè)計(jì)。
首先，我們?cè)僦匦禄氐角懊娴挠懻?，tabbar究竟出現(xiàn)了什么問題？綜合來(lái)看，主要為以下幾點(diǎn)：
◆無(wú)法滿足一次展示全部功能或者更低操作成本下展示的需求。
◆tab切換存在不同tab執(zhí)行重疊任務(wù)的可能，對(duì)于用戶專注某一flow任務(wù)產(chǎn)生障礙。
◆對(duì)操作本身的消極設(shè)計(jì)，增加誤操作的可能性，也成為在單一任務(wù)執(zhí)行時(shí)的視覺噪聲。
grid-based的設(shè)計(jì)是如何解決上述的設(shè)計(jì)？
◆在一個(gè)頁(yè)面中允許加入大量的icon入口，并通過頁(yè)面滑動(dòng)輕松完成對(duì)功能的瀏覽。
◆結(jié)合清晰豐富的功能入口，專注單一功能的流程設(shè)計(jì)。
◆頁(yè)面上更少視覺與可點(diǎn)擊元素的加入，更c(diǎn)lean的設(shè)計(jì)。
如何進(jìn)一步的完善grid-based設(shè)計(jì)？
◆我們?cè)趙indowsPhone找到了答案——live tiles。它承載了更多的信息傳達(dá)，而不只是icon。
◆專注單一功能的核心flow，不要妄圖在單一任務(wù)的操作過程中提供其它功能入口。
◆隨時(shí)終止并回到主功能入口的可能。
◆即便我們?cè)谏鲜龅奈闹袑abbar批判的體無(wú)完膚，然而grid-based本身也不是完美主義，面臨的挑戰(zhàn)在于
◆頁(yè)面層次變深，對(duì)flow設(shè)計(jì)提出更高的要求。
◆如果應(yīng)用的主要功能不超過5個(gè)或者僅是單一功能，你并不需要這樣一個(gè)擴(kuò)展性極強(qiáng)的設(shè)計(jì)。
講完上述的文字，隱約察覺這其實(shí)是metro與iPhone/Android的碰撞。我想說，metro是一次設(shè)計(jì)思維的變革，它使得人們開始?xì)w回信息本身，任務(wù)被更自然的執(zhí)行，而不再游離在冗余的頁(yè)面元素。
在隨后的幾個(gè)月，你也會(huì)看到我們參與實(shí)現(xiàn)的應(yīng)用——X。
【編輯推薦】
