DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> 手機APP用戶界面設計的10點建議
手機APP用戶界面設計的10點建議
編輯:前端技巧     

技巧1:保持專注

最好的移動應用集中精力將一件事做得很好。 你應該用一句話就能描述你的應用程序是干什麼的,而不用提及任何"細節"。 用戶應該能夠啟動它,使用它,然後在幾秒鐘內就能利用其達成目的。 如果用戶需要通過四層以上的菜單才能使用,那應用程序很快就會被卸載。

技巧2:適當地使用後退按鈕

在Android上,系統提供的後退按鍵在App內應該能夠使用戶得到返回的功能。 而在iOS中後退按鈕是通過軟件控制的,您應該總是提供一個返回按鈕,原則上用戶已經習慣了返回按鈕在左上角。 遵循back-button的約定行為和特定於操作系統的位置是至關重要,要讓你的應用程序滿足用戶期望的話。

技巧3:考慮軟鍵盤行為

大多數移動應用程序都在一個或多個屏幕中要用到使用鍵盤輸入。 不幸的是許多設計師沒有考慮到激活屏幕鍵盤後如何顯示界面。 當你測試時,請確保在屏幕上有足夠的空間讓用戶知道他們在做什麼,即使屏幕鍵盤被激活時也一樣。

技巧4:體貼的空白提示占位符

如果應用程序只有幾個數據輸入域,則顯示空白提示是很友好的,也可以讓應用程序看起來更干淨。 如果應用程序的數據輸入域很多,則使用占位符而不是label就會變得非常混亂。 一旦用戶在該輸入域輸入一些信息,除非這些信息是不言自明的,否則對用戶來說那些信息就需要連蒙帶猜了。

技巧5:挑戰新特性

在以前的應用程序設計中,軟件開發人員專注於在程序中添加盡可能多的功能。 他們衡量成功的准則就是能夠比競爭對手擁有更多的功能和特性。 移動革命已經改變了這一點。
在桌面應用程序中,一個不常用的功能會被添加到子菜單中,高級用戶發現這些功能可能是一個好主意,因為它使得你的程序區別於競爭對手。 在移動應用中,一個不怎麼有用的特性會使得用戶界面凌亂而難以操作。

技巧6:把選項卡放到正確的位置

在iOS中,主要的選項卡導航看起來不像選項卡。 他們是屏幕底部的一些圖標,用戶使用使用他們來切換應用的主要功能。 大多iOS用戶不習慣這個功能出現在窗口的頂部,但Android用戶習慣於這樣。 在Android上,選項卡通常放置在應用程序頂部,並且可以左右滑動切換。
這裡的關鍵在於,如果你的應用需要依賴一個"選項卡"來作為應用主要功能的導航,您需要在iOS和Android上將它們放到不同的位置。

技巧7:注意按鈕的尺寸

簡單設計中有一種傾向,說為了添加一些東西我們可以讓它適應一下,如果我們只是稍稍減小按鈕或字體的大小。 這是危險和災難性的!!! 如果曾在智能手機上打開沒有為移動設備優化過的web頁面,你就知道不能點中一個超鏈接是多麼令人沮喪的用戶體驗。 在app中,如果用戶不能選擇放大那就是一個更大的問題。
保持按鈕尺寸足夠大以容易使用,並在小屏幕設備上測試你的應用程序,如iPhone 4上依然擁有舒適的使用體驗。

技巧8:考慮按鈕位置

當用戶手中拿著智能手機,屏幕的下半部分可以用拇指很容易到達。 習慣右手的用戶可以接觸到右下角,而左撇子正好相反。
如果你希望能夠單手操作,記住這一點。

技巧9:提供必要的提示信息

任何時候給你的用戶請求輸入,考慮用戶需要什麼信息做出決定采取什麼行動。 如果你的UI不在同一位置提供這些輸入框,用戶可能需要取消並返回到上一級頁面來做決定。
減少用戶的痛苦,當用戶需要決策時在適當的地方提供必要的信息。

技巧10:注意你的圖像分辨率

現代智能手機擁有驚人地高分辨率,看起來絕對漂亮。 不幸的是,如果你仍然在使用低分辨率圖像作為圖標,應用程序看起來就是鋸齒狀和模糊的,特別是在操作系統渲染字體和梯度時。 確保你使用264 ppi或更高分辨率的圖片,並且看起來應該清晰和干淨。 在比Retina屏的iPad具有更高分辨率的平板上(如Nexus 10 有300 ppi), 264 ppi的圖像看起來仍然是清晰和干淨的。
一個更好的方法是使用向量圖(vector),那樣可以在任何分辨率下縮放。

結論

用戶界面關系到移動應用的成功與失敗。 具有良好UI設計的移動應用打敗那些速度更快,功能更多,但用戶界面設計一般的應用的例子比比皆是。 如果你的應用方便用戶學習並快速上手,則它在熙熙攘攘的應用市場上將會更容易成功。

關於作者:
大衛·塔爾博特(David Talbot),當前就任EverBank首席架構師。 擁有軟件行業超過15年的從業經驗和構建豐富的UI web應用程序的專業經驗。 同時也是Applied ADO.NET以及大量技術文章的作者。 郵件地址是 david@legendarycode.com

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved