移動App產品 UI設計需要注意哪些細節？

01-05

l、一致，一致，還是一致

你能做的最重要的事情就是保證用戶界面運作的一致性。對於列表框來說，如果雙擊其中的項，使得某些事件發生，那麼雙擊任何其它列表框中的項，都應該有同樣的事件發生。所有窗口按鈕的位置要一致，標籤和訊息的措辭要一致，顏色方案要一致。用戶界面的—致性使得在用戶對於界面運作建立起精確的心理模型，從而降低培訓和支持成本。

2、建立標準並遵循之

在應用軟體中保持一致的唯一途徑就是建立設計標準並加以遵循。最好的辦法是採取一套行業標準，對自身特殊的需要加以補充。已有的行業標準，如IBM標準(1993)與Microsoft標準(1995)，通常可滿足95％到99％的需要。採用行業標準，只需利用已有的成果，也使你的應用軟體看起來或感覺上更象用戶已購買或建立的其它應用軟體。應當在定義基礎構造階段就建立用戶界面設計標準。

3、闡明規則

用戶要知道怎麼使用你為他們開發的軟體。軟體運作的一致性表明，規則你只需解釋一遍。這比一步步詳細講解如何使用應用軟體每個特性要容易得多。

4、同時支持生手和熟手

圖書館目錄符號對圖書館系統的一般用戶來說，也許就夠用了，但對熟手用戶，如圖書管理員，很可能就沒有那麼有效了。圖書管理員是受過專門訓練，能夠使用複雜的查詢系統找到信息，因此，應當考慮建立一套查詢界面以滿足他們的獨特需要。

5、界面間切換很重要

如果從一個屏幕轉換到另一屏幕很困難，用戶會很快灰心並放棄。當屏幕流程與用戶想完成的工作流程相符，此軟體對用戶才有意義。由於不同用戶工作方式不同，應用軟體需要有足夠的靈活以支持他們不同的方式。在建模階段，界面流程圖可用來模擬屏幕之間的流程。

6、界面上的布局很重要

在西方，人們是自左而右，從上而下閱讀，基於人們的習慣，屏幕的組織也應當是自左而右，從上而下。屏幕小部件的布局也應以用戶熟悉的方式進行。

7、訊息和標籤措辭要適當

屏幕上顯示的文本是用戶主要的信息源。如果文本措辭很糟，用戶的理解就會很糟。要使用完整的措辭和句子，而不要用縮寫和代碼，使文本易於理解。訊息措辭要積極，顯示用戶處於控制之中，並提示如何正確使用軟體。如，下面哪一條訊息更吸引人：「你輸入了錯誤信息」還是」帳號應為8位數」?此外，訊息措辭要一致，在屏幕上顯示的位置要一致。儘管這樣的訊息」須輸入名字」和」應輸入帳號」分別來說措辭上沒問題，放在一起就不一致了。根據第一條訊息的措辭，第二條訊息更好的措辭應當是」須輸入帳號」，這就使得兩條訊息措辭一致了。

8、了解小部件

為恰當的任務使用恰當的小部件，首先可以幫助增強應用軟體的一致性，可能使得應用軟體很容易構造。學會如何正確使用小部件的唯一途徑是閱讀和理解你們所採用的用戶界面標準及準則。

9、對其它軟體不盲從

除非你知道一個應用軟體是遵循了你們的用戶界面標準和準則，否則你絕不能認定它做的都是對的。儘管看看人家怎麼做，從中獲得些主意是不錯的想法，但在懂得怎樣區分用戶界面設計的好壞之前，你得留神。太多的開發者錯誤地模仿其它應用軟體的用戶界面，而那些界面卻設計得很糟,最好將界面設計的美工外包項目請專業的設計外包公司來完成。

10、顏色使用要適當使用顏色要謹慎。

如果使用了，也要使用指示符。問題就在於有些用戶可能是色盲一一如果在屏幕上使用了顏色來突出顯示某些東西，假若想讓色盲的用戶注意到，那麼需要做些另外的工作來突出它，如在其旁邊顯示一個符號。顏色的使用也得一致，以使整個應用軟體有同樣的觀感。此外，在不同平台上，色彩的表現不盡人意一一在一個系統上看上去很好，在另一個系統上常常看上去很糟。展示會上我們經常聽到展示者這樣說：「在我家中的機器上看上去可是很好的呀。」

11、遵循對比原則

打算在應用軟體中使用顏色，要確保屏幕的可讀性。最好的方法是遵循對比原則：在淺色背景上使用深色文字，在深色背景上使用淺色文字。藍色文字以白色為背景很容易讀，但以紅色為背景很難辨認。問題出在藍色與紅色之間沒有足夠反差，而藍色與白色之間則反差很大。

12、字體使用要適當

老式英語字體可能在莎士比亞的劇本封面看上去很合適，但在屏幕上卻很難認。要用那些可讀性好的字體，如serif或Times Roman。此外，字體的使用要一致。節儉、有效地使用兩、三種字體的屏幕看上去遠勝於使用五、六種字體的屏幕。要記住每次改變了字體的大小、風格(粗體、斜體、下劃線，……)、樣式或顏色，都是在使用不同的字體。

13、灰掉而不是移走

在某些時刻，用戶經常只能訪問應用軟體的某些功能。在刪除一個對象之前，要先選中它，由此加深用戶的心理模型，軟體應當用刪除按鈕及(或)菜單項去做一些事。按鈕應當移去還是灰掉?灰掉它，決不能移走!當用戶不該使用時就灰掉它，可使用戶對如何使用應用軟體建立精確的心理模型。如果僅僅移走一個小部件或菜單項，而不是灰掉它，用戶很難建立精確的心理模型，因為用戶只知道當前可用的，而不知道什麼是不可用的。

14、使用非破壞性的預設按鈕通常每個屏幕定義一個預設按鈕，如果用戶按了回車鍵調用此按鈕。問題是有時用戶會意外敲擊回車鍵，結果激活了預設按鈕。預設按鈕決不能有潛在的破壞性，如刪除或保存(也許用戶根本不想保存)。

15、區域排列

當屏幕有多個編輯區域，要以視覺效果和效率來組織這些區域。如圖1所示，編輯區域左對齊是最好的方法。換句話說，要使編輯區域左邊界在一條直線上且上下排列。與之相應的標籤則應右對齊，置於編輯區域旁。這是屏幕上組織區域的一個整潔有效的方式。

16、數據對齊要適當

對一列列的數據，通常的作法是整浮點數右對齊，字元串左對齊。

17、屏幕不能擁擠

擁擠的屏幕讓人難以理解，因而難以使用。實驗結果顯示屏幕總體蓋度不應超過40％，而分組中屏幕蓋度不應超過62％。

18、有效組合

邏輯上關聯的項目在屏幕上應當加以組合，以顯示其關聯性。反之，任何相互之間毫不相關的項目應當分隔開。在項目集合間用間隔對其進行分組／或用方框也同樣可做到這一點。

19、在操作焦點處打開窗口

當用戶雙擊一個對象顯示其編輯／詳情屏幕，用戶的注意力亦集中於此。因而在此處而不是其它地方打開窗口才有意義。

20、彈出菜單不應是唯一的功能來源

如果主要功能被隱藏起來，用戶就不能學會怎樣使用軟體。開發人員最讓人灰心的作法是濫用彈出菜單，也稱作上下文相關菜單。一種使用滑鼠的典型方法，是用來顯示一個隱藏的彈出菜單，提供針對當前工作的屏幕區域特定功能的訪問。

色彩系統
做設計的時候都應該定義好一套色彩系統，先定義出能滿足使用需求的一系列色彩，接著就盡量只選用這些顏色，而非每做到一個地方就在拾色器里依第六感隨便亂選，這個部分 Material Design 給出了良好的示例。
在 Sketch 或是 Photoshop 中，可以在色卡表中先把顏色儲存好，方便隨時取用。
考慮可擴展性
在一般狀況下，文字溢出換行的機會不高，但身為設計師的你應該要先預想到萬一文字多到需要換行時該怎麼辦？並且確保你的版面能夠擴展騰出空間來，並在設計稿里象徵性地放上一兩個案例，這樣工程師才方便知道如何處理。
處理異常狀況有三個檔次：
1. 讓用戶無法觸發錯誤
2. 觸發異常/錯誤時，設計一個自動解決方案，讓使用者感覺不到
3. 告知用戶處理（例如警告窗口）
http://sina.lt/eRZ3

看看這個APP的設計怎麼樣？

在做移動APP，UI的設計要注意的細節有：文案與標點符號。
做 UI 時無可避免地會包含文字，使用假文是一個暫時的做法；但如果有時間的話，將稿子完成交出前可將裡面的文字換成比較真實的內容，這樣子會讓你的作品看起來更有一回事。

真實的文字內容也會協助觀看者理解你的作品，例如該呈現使用者姓名的地方你用了（Elon Musk），有可能會讓人看不懂，但同樣的位置你放個（黃小明），一看就能理解了。

另外，在把稿子給別人看之前，也應該詳細檢查是否有錯字，或是標點符號是否有誤，如果出現這類低級錯誤，將會給人一種不信任感。
http://980.so/4zOcET

有句話怎麼說著來的，不以用戶的思維去設計產品就是耍流氓。對於UI來說，如何設計微互動，是必須要去思考的問題。

APP開發者必須思考如何進行微互動設計 - 蟬大師

微互動設計的定義

微互動設計簡而方之就是圍繞常見功能(如點擊或喜愛按鈕)，更改設置，填寫表單或執行其他操作的單一操作。這些微互動設計是讓用戶參與其中或者是告之用戶正在發生的事情(或即將發生)

他們的工作是要讓你參與或告知你實際發生的事情(或即將發生)，所以你完全知道你在應用程序中的結果。

為什麼微互動設計很重要

APP Store超過了200萬款應用程序，開發者面臨的競爭壓力是居大的，雖然開發一款優秀的應用已經難住了很多了，但還這不是最棘手的，最棘手的是有大量用戶開始下載應用之時，開該考慮如何能夠留住他們。蟬大師給出的建議是，在產品層面利用微互動設計與用戶接觸，請大家記住，對於移動產品而言，每一個細節都非常的重要。

如上圖所未，在IOS桌面的手機圖標中顯示的是當前時間，朋友們現在就可以打開自己的手機看看。實際上，這些小細節經常在設計過程中被忘記。請大家了解，時時刻刻要讓用戶在使用產品時，感覺是一件快樂的事情。如果做不到這一點，我們不該去奢望會有許多人為下載應用程序。(但我們卻不能在設計過程中，只注重趣味感，而沒法給用戶帶來任何價值或解決用戶的痛點)

給用戶帶來的那種使用趣味感，往往體現在微小的細節方面，這類細節設計我們可以稱之為微互動設計。

它們是應用程序的小功能，甚至有時候它們都不被列為功能，但當某個功能與它們相結合時，它們往往會提供非常好的用戶體驗。一般而言，這些微互動設計通過與主要功能一起工作，以便吸引和服務用戶，但就如上文所說的，它們經常被忽視。

例如上圖中的某款音樂類APP，當用戶嘗試將相同的歌曲添加到同一個播放列表時，就會彈出這個小窗口。這種微互動設計通常不是一個具體的功能，也沒有用戶會經常談論它，甚至更多的時候用戶會關閉這個彈窗後忘記它。

可是，如果這個APP的設計師沒有想到這個微小的互動呢?那麼用戶就有可能在一個播放列表裡添加到相同的歌曲若干次。(如果用戶一定需要，通過個微互動設計，只需點擊「添加」便可)

微互動如何工作?

要設計增加產品價值的微互動，您必須了解它們的工作原理。蟬大師問過幾位優秀的APP開發者，他們一致認為精心設計的微互動的結構主要有四個要素組成：

1、定義觸發器交互時間，例如達到手機的消息

2、定義觸發器打開時會發生什麼規則。如消息到達後，手機應該播放聲音。

3、在設計微互動之時，得到用戶的反饋信息是我們的工作之一。

4、循環和模式，模式可幫助我們從用戶處收集信息，例如選擇城市來檢查天氣，循環描述交互的時間長短。

有目的設計

其實這一塊我本身沒什麼可說的，因為我不知道你設計的應用程序是什麼，我甚至不知道你的APP外觀長什麼樣。但在設計微互動時，請專門為你的應用去創建它們。

我們必須帶有目標的去設計這些微互動，想想你的APP和你未來的用戶，然後再來決定微互動應該如何工作。當然，你還可以在互聯網的知識海洋上或其它同類型的APP中挖掘一些新的想法。不過蟬大師不建議你去複製它們。

為您的應用添加人情味

設計微觀交互是一件非常重要的事情，它的存在能讓一款APP完美化，也能讓我們的應用程序更加的擬人化。比如現在非常流行APP以人的方式與用戶對話。我們來持看蘋果是如何處理它的：

其實微互動設計是無處不在的，比如當用戶在使用APP的某人功能需要等待時，那麼作為設計者是否應該考慮讓用戶知道，他需要等待多少時間呢?給用戶一個等待時間進度長怎麼樣?關於微互動設計本文只是相對粗淺的與大有一起來論壇下，下次時間充足的話，我們可以長時間的一起來聊一聊，感興趣的朋友可以來蟬大師官網找我哦!

細節！不知說的是哪樣的細節，也不知道你說的app具體是屬於哪種（工具類，內容類？）工具類的app本人認為主要是各種按鈕尺寸和布局位置（避免用戶錯誤操作和功能不知道在什麼地方）。內容類的app本人認為各種內容的呈現是否會對用戶產生視覺上的錯誤的方面進行細節的處理，流程中是否有對流程干擾的因素（比如彈框類）。如果必須要有什麼東西（如彈框）設計時需要通過處理來弱化對流程的干擾。