分享APP設(shè)計(jì)當(dāng)中不容忽視的小細(xì)節(jié)

     APP設(shè)計(jì)當(dāng)中不容忽視的20個(gè)小細(xì)節(jié)

　　1、一致，一致，還是一致

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

　　提煉：一致性體現(xiàn)在 色彩搭配和運(yùn)用、字體的運(yùn)用、相同的交互效果等。

　　一般我們使用的色彩不超過3種。交互效果也不超過3種。

　　2、建立標(biāo)準(zhǔn)并遵循之

　　在應(yīng)用軟件中保持一致的唯一途徑就是建立設(shè)計(jì)標(biāo)準(zhǔn)并加以遵循。最好的辦法是采取一套行業(yè)標(biāo)準(zhǔn)，對自身特殊的需要加以補(bǔ)充。已有的行業(yè)標(biāo)準(zhǔn)，如IBM標(biāo)準(zhǔn)(1993)與Microsoft標(biāo)準(zhǔn)(1995)，通?？蓾M足95%到99%的需要。采用行業(yè)標(biāo)準(zhǔn)，只需利用已有的成果，也使你的應(yīng)用軟件看起來或感覺上更象用戶已購買或建立的其它應(yīng)用軟件。應(yīng)當(dāng)在定義基礎(chǔ)構(gòu)造階段就建立用戶界面設(shè)計(jì)標(biāo)準(zhǔn)。

　　嚴(yán)格按照移動(dòng)APP規(guī)范來設(shè)計(jì)，比如字體的大小、間距、圖標(biāo)的大小等等。

　　3、闡明設(shè)計(jì)規(guī)則

　　用戶要知道怎么使用你為他們開發(fā)的軟件。軟件運(yùn)作的一致性表明，規(guī)則你只需解釋一遍。這比一步步詳細(xì)講解如何使用應(yīng)用軟件每個(gè)特性要容易得多。

　　可以制定屬于你的一些工作方式和設(shè)計(jì)規(guī)范。

　　4、同時(shí)支持生手和熟手

　　圖書館目錄符號(hào)對圖書館系統(tǒng)的一般用戶來說，也許就夠用了，但對熟手用戶，如圖書管理員，很可能就沒有那么有效了。圖書管理員是受過專門訓(xùn)練，能夠使用復(fù)雜的查詢系統(tǒng)找到信息，因此，應(yīng)當(dāng)考慮建立一套查詢界面以滿足他們的獨(dú)特需要。

　　5、UI界面間切換很重要，也必須重視

　　如果從一個(gè)屏幕轉(zhuǎn)換到另一屏幕很困難，用戶會(huì)很快灰心并放棄。當(dāng)屏幕流程與用戶想完成的工作流程相符，此軟件對用戶才有意義。由于不同用戶工作方式不同，應(yīng)用軟件需要有足夠的靈活以支持他們不同的方式。在建模階段，界面流程圖可用來模擬屏幕之間的流程。

　　6、界面上的布局很重要

　　在西方，人們是自左而右，從上而下閱讀，基于人們的習(xí)慣，屏幕的組織也應(yīng)當(dāng)是自左而右，從上而下。屏幕小部件的布局也應(yīng)以用戶熟悉的方式進(jìn)行。

　　7、訊息和標(biāo)簽措辭要適當(dāng)

　　屏幕上顯示的文本是用戶主要的信息源。如果文本措辭很糟，用戶的理解就會(huì)很糟。要使用完整的措辭和句子，而不要用縮寫和代碼，使文本易于理解。訊息措辭要積極，顯示用戶處于控制之中，并提示如何正確使用軟件。

　　如，下面哪一條訊息更吸引人： “你輸入了錯(cuò)誤信息”還是”帳號(hào)應(yīng)為8位數(shù)”?此外，訊息措辭要一致，在屏幕上顯示的位置要一致。盡管這樣的訊息”須輸入名字”和”應(yīng)輸入帳號(hào)”分別來說措辭上沒問題，放在一起就不一致了。

　　根據(jù)第一條訊息的措辭，第二條訊息更好的措辭應(yīng)當(dāng)是”須輸入帳號(hào)”，這就使得兩條訊息措辭一致了
 
　　8、了解小部件工具

　　為恰當(dāng)?shù)娜蝿?wù)使用恰當(dāng)?shù)男〔考?，首先可以幫助增?qiáng)應(yīng)用軟件的一致性，可能使得應(yīng)用軟件很容易構(gòu)造。學(xué)會(huì)如何正確使用小部件的唯一途徑是閱讀和理解你們所采用的用戶界面標(biāo)準(zhǔn)及準(zhǔn)則。

　　9、對其它軟件不盲從

　　除非你知道一個(gè)應(yīng)用軟件是遵循了你們的用戶界面標(biāo)準(zhǔn)和準(zhǔn)則，否則你絕不能認(rèn)定它做的都是對的。盡管看看人家怎么做，從中獲得些主意是不錯(cuò)的想法，但在懂得怎樣區(qū)分用戶界面設(shè)計(jì)的好壞之前，你得留神。太多的開發(fā)者錯(cuò)誤地模仿其它應(yīng)用軟件的用戶界面，而那些界面卻設(shè)計(jì)得很糟,最好將界面設(shè)計(jì)的美工外包項(xiàng)目請專業(yè)的設(shè)計(jì)外包公司來完成。

　　10、顏色使用要適當(dāng) 使用顏色要謹(jǐn)慎。

　　如果使用了，也要使用指示符。問題就在于有些用戶可能是色盲一一如果在屏幕上使用了顏色來突出顯示某些東西，假若想讓色盲的用戶注意到，那么需要做些另外的工作來突出它，如在其旁邊顯示一個(gè)符號(hào)。顏色的使用也得一致，以使整個(gè)應(yīng)用軟件有同樣的觀感。此外，在不同平臺(tái)上，色彩的表現(xiàn)不盡人意一一在一個(gè)系統(tǒng)上看上去很好，在另一個(gè)系統(tǒng)上常?？瓷先ズ茉恪Ｕ故緯?huì)上我們經(jīng)常聽到展示者這樣說： “在我家中的機(jī)器上看上去可是很好的呀。”

　　11、遵循對比原則

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

　　12、字體使用要適當(dāng)

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

　　13、灰掉而不是移走

　　在某些時(shí)刻，用戶經(jīng)常只能訪問應(yīng)用軟件的某些功能。在刪除一個(gè)對象之前，要先選中它，由此加深用戶的心理模型，軟件應(yīng)當(dāng)用刪除按鈕及(或)菜單項(xiàng)去做一些事。按鈕應(yīng)當(dāng)移去還是灰掉?灰掉它，決不能移走!當(dāng)用戶不該使用時(shí)就灰掉它，可使用戶對如何使用應(yīng)用軟件建立精確的心理模型。如果僅僅移走一個(gè)小部件或菜單項(xiàng)，而不是灰掉它，用戶很難建立精確的心理模型，因?yàn)橛脩糁恢喇?dāng)前可用的，而不知道什么是不可用的。

　　14、使用非破壞性的缺省按鈕

　　通常每個(gè)屏幕定義一個(gè)缺省按鈕，如果用戶按了回車鍵調(diào)用此按鈕。問題是有時(shí)用戶會(huì)意外敲擊回車鍵，結(jié)果激活了缺省按鈕。缺省按鈕決不能有潛在的破壞性，如刪除或保存(也許用戶根本不想保存)。

　　15、區(qū)域排列

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

　　16、數(shù)據(jù)對齊要適當(dāng)

　　對一列列的數(shù)據(jù)，通常的作法是整浮點(diǎn)數(shù)右對齊，字符串左對齊。

　　17、屏幕不能擁擠

　　擁擠的屏幕讓人難以理解，因而難以使用。實(shí)驗(yàn)結(jié)果顯示屏幕總體蓋度不應(yīng)超過40%，而分組中屏幕蓋度不應(yīng)超過62%。

　　18、有效組合

　　邏輯上關(guān)聯(lián)的項(xiàng)目在屏幕上應(yīng)當(dāng)加以組合，以顯示其關(guān)聯(lián)性。反之，任何相互之間毫不相關(guān)的項(xiàng)目應(yīng)當(dāng)分隔開。在項(xiàng)目集合間用間隔對其進(jìn)行分組/或用方框也同樣可做到這一點(diǎn)。

　　19、在操作焦點(diǎn)處打開窗口

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

　　20、彈出菜單不應(yīng)是唯一的功能來源

　　如果主要功能被隱藏起來，用戶就不能學(xué)會(huì)怎樣使用軟件。開發(fā)人員最讓人灰心的作法是濫用彈出菜單，也稱作上下文相關(guān)菜單。一種使用鼠標(biāo)的典型方法，是用來顯示一個(gè)    隱藏的彈出菜單，提供針對當(dāng)前工作的屏幕區(qū)域特定功能的訪問。

　　這20個(gè)在APP設(shè)計(jì)當(dāng)中不容忽視的小細(xì)節(jié)，僅供大家參考。畢竟每個(gè)人都有各自的一些看法和理解。

　　最后老譚同學(xué)再跟大家分享幾個(gè)APP設(shè)計(jì)知識(shí)點(diǎn)：

　　1、AI線框,PS視覺是比較常用的，在這里推薦下FW，線框視覺都是可以的，也比較方便。就是用得人不多，但是這個(gè)軟件上手快,可以推薦使用。

　　2、Icon當(dāng)然要按合適尺寸做，但是你要打出來的話,分辨率要在300，而UI的分辨率一般是72，分辨率還是要改一下，否則打出來沒法看，不管怎么樣，保存好源文件。IOS系    統(tǒng)界面里,工具欄及圖標(biāo)的大小，建議題主找一下設(shè)計(jì)規(guī)范，沒有特別固定的值，但是不能差太遠(yuǎn)。

　　3、ICON:桌面圖標(biāo)114*114，標(biāo)簽欄圖標(biāo)<=60，導(dǎo)