分享APP設計當中不容忽視的小細節(jié)
APP設計當中不容忽視的20個小細節(jié)
1、一致,一致,還是一致
你能做的最重要的事情就是保證用戶界面運作的一致性。對于列表框來說,如果雙擊其中的項,使得某些事件發(fā)生,那么雙擊任何其它列表框中的項,都應該有同樣的事件發(fā)生。所有窗口按鈕的位置要一致,標簽和訊息的措辭要一致,顏色方案要一致。用戶界面的—致性使得在用戶對于界面運作建立起精確的心理模型,從而降低培訓和支持成本。
提煉:一致性體現(xiàn)在 色彩搭配和運用、字體的運用、相同的交互效果等。
一般我們使用的色彩不超過3種。交互效果也不超過3種。
2、建立標準并遵循之
在應用軟件中保持一致的唯一途徑就是建立設計標準并加以遵循。最好的辦法是采取一套行業(yè)標準,對自身特殊的需要加以補充。已有的行業(yè)標準,如IBM標準(1993)與Microsoft標準(1995),通常可滿足95%到99%的需要。采用行業(yè)標準,只需利用已有的成果,也使你的應用軟件看起來或感覺上更象用戶已購買或建立的其它應用軟件。應當在定義基礎構造階段就建立用戶界面設計標準。
嚴格按照移動APP規(guī)范來設計,比如字體的大小、間距、圖標的大小等等。
3、闡明設計規(guī)則
用戶要知道怎么使用你為他們開發(fā)的軟件。軟件運作的一致性表明,規(guī)則你只需解釋一遍。這比一步步詳細講解如何使用應用軟件每個特性要容易得多。
可以制定屬于你的一些工作方式和設計規(guī)范。
4、同時支持生手和熟手
圖書館目錄符號對圖書館系統(tǒng)的一般用戶來說,也許就夠用了,但對熟手用戶,如圖書管理員,很可能就沒有那么有效了。圖書管理員是受過專門訓練,能夠使用復雜的查詢系統(tǒng)找到信息,因此,應當考慮建立一套查詢界面以滿足他們的獨特需要。
5、UI界面間切換很重要,也必須重視
如果從一個屏幕轉換到另一屏幕很困難,用戶會很快灰心并放棄。當屏幕流程與用戶想完成的工作流程相符,此軟件對用戶才有意義。由于不同用戶工作方式不同,應用軟件需要有足夠的靈活以支持他們不同的方式。在建模階段,界面流程圖可用來模擬屏幕之間的流程。
6、界面上的布局很重要
在西方,人們是自左而右,從上而下閱讀,基于人們的習慣,屏幕的組織也應當是自左而右,從上而下。屏幕小部件的布局也應以用戶熟悉的方式進行。
7、訊息和標簽措辭要適當
屏幕上顯示的文本是用戶主要的信息源。如果文本措辭很糟,用戶的理解就會很糟。要使用完整的措辭和句子,而不要用縮寫和代碼,使文本易于理解。訊息措辭要積極,顯示用戶處于控制之中,并提示如何正確使用軟件。
如,下面哪一條訊息更吸引人: “你輸入了錯誤信息”還是”帳號應為8位數(shù)”?此外,訊息措辭要一致,在屏幕上顯示的位置要一致。盡管這樣的訊息”須輸入名字”和”應輸入帳號”分別來說措辭上沒問題,放在一起就不一致了。
根據(jù)第一條訊息的措辭,第二條訊息更好的措辭應當是”須輸入帳號”,這就使得兩條訊息措辭一致了
8、了解小部件工具
為恰當?shù)娜蝿帐褂们‘數(shù)男〔考?,首先可以幫助增強應用軟件的一致性,可能使得應用軟件很容易構造。學會如何正確使用小部件的唯一途徑是閱讀和理解你們所采用的用戶界面標準及準則。
9、對其它軟件不盲從
除非你知道一個應用軟件是遵循了你們的用戶界面標準和準則,否則你絕不能認定它做的都是對的。盡管看看人家怎么做,從中獲得些主意是不錯的想法,但在懂得怎樣區(qū)分用戶界面設計的好壞之前,你得留神。太多的開發(fā)者錯誤地模仿其它應用軟件的用戶界面,而那些界面卻設計得很糟,最好將界面設計的美工外包項目請專業(yè)的設計外包公司來完成。
10、顏色使用要適當 使用顏色要謹慎。
如果使用了,也要使用指示符。問題就在于有些用戶可能是色盲一一如果在屏幕上使用了顏色來突出顯示某些東西,假若想讓色盲的用戶注意到,那么需要做些另外的工作來突出它,如在其旁邊顯示一個符號。顏色的使用也得一致,以使整個應用軟件有同樣的觀感。此外,在不同平臺上,色彩的表現(xiàn)不盡人意一一在一個系統(tǒng)上看上去很好,在另一個系統(tǒng)上常??瓷先ズ茉?。展示會上我們經常聽到展示者這樣說: “在我家中的機器上看上去可是很好的呀?!?
11、遵循對比原則
打算在應用軟件中使用顏色,要確保屏幕的可讀性。最好的方法是遵循對比原則:在淺色背景上使用深色文字,在深色背景上使用淺色文字。藍色文字以白色為背景很容易讀,但以紅色為背景很難辨認。問題出在藍色與紅色之間沒有足夠反差,而藍色與白色之間則反差很大。
12、字體使用要適當
老式英語字體可能在莎士比亞的劇本封面看上去很合適,但在屏幕上卻很難認。要用那些可讀性好的字體,如serif或Times Roman。此外,字體的使用要一致。節(jié)儉、有效地使用兩、三種字體的屏幕看上去遠勝于使用五、六種字體的屏幕。要記住每次改變了字體的大小、風格(粗體、斜體、下劃線,……)、樣式或顏色,都是在使用不同的字體。
13、灰掉而不是移走
在某些時刻,用戶經常只能訪問應用軟件的某些功能。在刪除一個對象之前,要先選中它,由此加深用戶的心理模型,軟件應當用刪除按鈕及(或)菜單項去做一些事。按鈕應當移去還是灰掉?灰掉它,決不能移走!當用戶不該使用時就灰掉它,可使用戶對如何使用應用軟件建立精確的心理模型。如果僅僅移走一個小部件或菜單項,而不是灰掉它,用戶很難建立精確的心理模型,因為用戶只知道當前可用的,而不知道什么是不可用的。
14、使用非破壞性的缺省按鈕
通常每個屏幕定義一個缺省按鈕,如果用戶按了回車鍵調用此按鈕。問題是有時用戶會意外敲擊回車鍵,結果激活了缺省按鈕。缺省按鈕決不能有潛在的破壞性,如刪除或保存(也許用戶根本不想保存)。
15、區(qū)域排列
當屏幕有多個編輯區(qū)域,要以視覺效果和效率來組織這些區(qū)域。如圖1所示,編輯區(qū)域左對齊是最好的方法。換句話說,要使編輯區(qū)域左邊界在一條直線上且上下排列。與之相應的標簽則應右對齊,置于編輯區(qū)域旁。這是屏幕上組織區(qū)域的一個整潔有效的方式。
16、數(shù)據(jù)對齊要適當
對一列列的數(shù)據(jù),通常的作法是整浮點數(shù)右對齊,字符串左對齊。
17、屏幕不能擁擠
擁擠的屏幕讓人難以理解,因而難以使用。實驗結果顯示屏幕總體蓋度不應超過40%,而分組中屏幕蓋度不應超過62%。
18、有效組合
邏輯上關聯(lián)的項目在屏幕上應當加以組合,以顯示其關聯(lián)性。反之,任何相互之間毫不相關的項目應當分隔開。在項目集合間用間隔對其進行分組/或用方框也同樣可做到這一點。
19、在操作焦點處打開窗口
當用戶雙擊一個對象顯示其編輯/詳情屏幕,用戶的注意力亦集中于此。因而在此處而不是其它地方打開窗口才有意義。
20、彈出菜單不應是唯一的功能來源
如果主要功能被隱藏起來,用戶就不能學會怎樣使用軟件。開發(fā)人員最讓人灰心的作法是濫用彈出菜單,也稱作上下文相關菜單。一種使用鼠標的典型方法,是用來顯示一個 隱藏的彈出菜單,提供針對當前工作的屏幕區(qū)域特定功能的訪問。
這20個在APP設計當中不容忽視的小細節(jié),僅供大家參考。畢竟每個人都有各自的一些看法和理解。
最后老譚同學再跟大家分享幾個APP設計知識點:
1、AI線框,PS視覺是比較常用的,在這里推薦下FW,線框視覺都是可以的,也比較方便。就是用得人不多,但是這個軟件上手快,可以推薦使用。
2、Icon當然要按合適尺寸做,但是你要打出來的話,分辨率要在300,而UI的分辨率一般是72,分辨率還是要改一下,否則打出來沒法看,不管怎么樣,保存好源文件。IOS系 統(tǒng)界面里,工具欄及圖標的大小,建議題主找一下設計規(guī)范,沒有特別固定的值,但是不能差太遠。
3、ICON:桌面圖標114*114,標簽欄圖標<=60,導