在Android NDK初探我們了解到普通的開發(fā)者可以向移動(dòng)開發(fā)領(lǐng)域轉(zhuǎn)變，但是很多朋友在做移動(dòng)終端軟件時(shí)會(huì)遇到一些界面問題，這都是移動(dòng)終端設(shè)備的界面。與傳統(tǒng)的桌面軟件一樣，移動(dòng)開發(fā)的頁面設(shè)計(jì)也一定給用戶以良好的體驗(yàn)效果。把握這兩大要素將使移動(dòng)開發(fā)界面設(shè)計(jì)變得***無比。

1、減少空間占用

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

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

未經(jīng)優(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)考慮帶來的負(fù)面影響.觸摸屏是另外一個(gè)需要考慮的情況,滑動(dòng)使得翻頁變的容易,可點(diǎn)擊的元素尺寸是否有必要增大以適應(yīng)大的手指…要知道,mutli-touch目前只是apple的專利.

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

這個(gè)是一個(gè)Android平臺(tái)的程序.

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

移除標(biāo)題.

◆默認(rèn)收起商店信息,點(diǎn)擊可彈下顯示.

◆為保證用戶對(duì)商店信息的初步了解與注意,加入商店名稱.

◆接下來我們將得到下面的界面.

經(jīng)過優(yōu)化的界面

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

#p#

2、Flow大局觀

在移動(dòng)設(shè)計(jì)中，我們需要完善的功能flow，對(duì)它認(rèn)知的價(jià)值使得flow在整個(gè)設(shè)計(jì)開發(fā)過程中始終走在前面。完善的flow不僅令功能產(chǎn)品更加易用，帶來良好的用戶體驗(yàn)，與此同時(shí)，也有助于提升開發(fā)效率，不到位的flow將帶來設(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效操作而帶來的反饋幫助信息。

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

整合，在前一篇《移動(dòng)界面設(shè)計(jì)點(diǎn)滴(1)——減少空間占用》的一文有所涉及，受限于移動(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í)間來熟悉操作，這不是我們想要看到的。

【編輯推薦】

1. Android NDK初探 你也可以做移動(dòng)開發(fā)
2. 開源的MeeGo 移動(dòng)開發(fā)者還在等什么
3. 專訪最牛iPhone開發(fā)團(tuán)隊(duì)：走進(jìn)移動(dòng)開發(fā)