Mobile UI design tips—— the overall view of flow

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

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

• end-to-end
• 清晰
• 整合

所謂end to end是指功能根據(jù)需求設(shè)計需要符合所在平臺的特性，完整的考慮到用戶如何在任何場景下使用操作及完成任務(wù)，提供因為有效或無效操作而帶來的反饋幫助信息。

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

整合，在前一篇《移動界面設(shè)計點滴(1)——減少空間占用》的一文有所涉及，受限于移動產(chǎn)品的諸多條件，合理的歸納使得產(chǎn)品使用更為流暢。這與清晰并不矛盾，重在調(diào)和。

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

案例簡析

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

該功能從屬于Map視圖，圖標(biāo)以形象的道路指向標(biāo)示。
在mockup中的功能主UI，顯示支持的國家；
點擊任意國家進(jìn)入以首字母排列的城市列表；
點擊任意城市，自動切入到Map視圖并轉(zhuǎn)向相應(yīng)的可視地區(qū)。

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

在此，有兩種設(shè)計思路。另一則是使用IPhone自帶的Pickers控件，將國家列表橫向置于上方，城市列表縱向置于UI下方。
它的優(yōu)勢在于可以在一屏中解決所有的問題。
但為了更好的使用Pickers，你需要加入更多的諸如Supported City等提示信息以區(qū)分兩個Pickers，以及頂部的Done Cancel按鈕，以完善flow。
這使得用戶需要更多的時間來熟悉操作，這不是我們想要看到的。

–

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

來源：http://www.mdong.org/?p=1411