HTML5技術(shù)仍在發(fā)展中且發(fā)展尚不完善， web APP應(yīng)用作為該技術(shù)的產(chǎn)物自然也是在不斷試驗(yàn)中進(jìn)步；此外，web APP應(yīng)用還要依賴兼容性瀏覽器更強(qiáng)大的渲染能力，俗話說(shuō)“皮之不存毛將焉附”，在大家都期待的強(qiáng)大瀏覽器出現(xiàn)之前誰(shuí)也難以預(yù)言web APP應(yīng)用需要做成什么樣才算是一個(gè)合格的產(chǎn)品。在這種行業(yè)背景下，web APP應(yīng)用還難以有一個(gè)所謂的界面設(shè)計(jì)原則，起碼現(xiàn)在還不構(gòu)成總結(jié)一個(gè)合理界面設(shè)計(jì)原則的條件。
其實(shí)，所謂的界面設(shè)計(jì)原則本就是從已有的、典型的界面設(shè)計(jì)作品中倒推得出的。比如，解構(gòu)主義界面設(shè)計(jì)風(fēng)格的提出不是之前就有的，是理論家在分析總結(jié)了建筑界面設(shè)計(jì)師蓋里、埃森曼、特斯楚米等大師的典型界面設(shè)計(jì)作品，結(jié)合這幾位大師的界面設(shè)計(jì)理念后定義的一個(gè)流派名稱。所謂的解構(gòu)主義界面設(shè)計(jì)原則也是從權(quán)威大師典型作品中歸納總結(jié)的； 界面設(shè)計(jì)原則出現(xiàn)后繼而可以對(duì)之后的界面設(shè)計(jì)起一定的指導(dǎo)作用。
web APP應(yīng)用界面設(shè)計(jì)原則，現(xiàn)從已經(jīng)上線的優(yōu)秀產(chǎn)品中選擇典型界面設(shè)計(jì)元素與大家討論分享，尋找可以借鑒的地方，并借此增進(jìn)對(duì)web APP應(yīng)用產(chǎn)品界面設(shè)計(jì)的認(rèn)識(shí)。
Web APP應(yīng)用界面設(shè)計(jì)的實(shí)用技巧
Web APP應(yīng)用用戶界面界面設(shè)計(jì)，核心是web界面設(shè)計(jì)；不過(guò)與一般意義上的web界面設(shè)計(jì)相比較，web APP應(yīng)用更加注重功能。為了在與桌面應(yīng)用程序的競(jìng)爭(zhēng)中展現(xiàn)其優(yōu)勢(shì)，web APP應(yīng)用需要提供簡(jiǎn)潔、直觀、快速響應(yīng)的用戶界面，以便于用戶在任務(wù)操作中節(jié)省精力和時(shí)間。
Web APP應(yīng)用的優(yōu)點(diǎn)
◆通過(guò)兼容性瀏覽器實(shí)現(xiàn)配置而不需要任何復(fù)雜的“轉(zhuǎn)出”步驟；
◆瀏覽器應(yīng)用程序幾乎不需要客戶端上的磁盤空間；
◆新功能從服務(wù)器自動(dòng)傳遞給用戶，用戶自己不必升級(jí)程序；
◆可以輕松整合進(jìn)入其他服務(wù)類web程序；
◆跨平臺(tái)的兼容性
1.界面元素隨需而變
力求簡(jiǎn)潔明了是用戶界面界面設(shè)計(jì)的重要原則。在同一時(shí)間給用戶展示的功能越多，用戶需要尋找和思考的時(shí)間也就越多。同樣，界面中存在的選項(xiàng)越少，可用功能就越明顯、越容易瀏覽。不過(guò)簡(jiǎn)化界面并非輕而易舉，尤其是你不想減少應(yīng)用程序功能的情況下。
2.為模態(tài)窗口增加邊緣陰影
彈出式菜單和窗口周邊的陰影不僅僅是為了視覺(jué)美觀。陰影一方面增大了菜單或窗口的尺寸，有助于將菜單或窗口從背景中區(qū)別開(kāi)來(lái)；另一方面通過(guò)灰度化的邊緣陰影可以屏蔽背景內(nèi)容的噪音干擾。
這個(gè)技巧根植于傳統(tǒng)桌面程序，幫助用戶將注意力集中在彈出的窗口。由于很多模態(tài)窗口不容易從桌面程序內(nèi)容頁(yè)面中凸顯出來(lái)，陰影可以使它們看起來(lái)具有立體效果、仿佛懸浮于其他內(nèi)容之上，于是拉近了模態(tài)窗口與用戶的距離。
界面光源的一致性：一致性是個(gè)很大的課題，應(yīng)該能寫一篇論文那么長(zhǎng)，細(xì)節(jié)方面的一致性應(yīng)該包括界面元素、文字陰影、圖標(biāo)等的光源。假設(shè)深色的標(biāo)題文字用了向下的淡色投影表現(xiàn)內(nèi)凹效果，那正文就應(yīng)該避免用深色的文字向上投深色的陰影
圖標(biāo)面積的一致性：“這也是一個(gè)一直難以避免的問(wèn)題，而且有很多主觀成分，最好的方法是設(shè)計(jì)的時(shí)候放到實(shí)際屏幕上以較遠(yuǎn)的距離查看，是不是有哪些會(huì)特別輕或特別重，然后再去調(diào)整尺寸
文案：雖然這不是直接的界面設(shè)計(jì)元素，但是嚴(yán)謹(jǐn)、完整的文案也是給所有設(shè)計(jì)加分的。常見(jiàn)的問(wèn)題有中文錯(cuò)別字、英文該大寫的沒(méi)大寫、拼寫錯(cuò)誤等等。
那么，什么樣的圖標(biāo)才能在第一時(shí)間吸引用戶的目光，有效增加點(diǎn)擊率呢？
突出的色彩搭配
手機(jī)的屏幕很小，界面設(shè)計(jì)者必須要讓用戶在打開(kāi)手機(jī)面對(duì)幾百個(gè)圖標(biāo)時(shí)，記住你而不是記住別人，因此圖標(biāo)本身要足夠搶眼。
圖標(biāo)是否醒目、簡(jiǎn)潔、明快是最主要的，因此，蘋果為開(kāi)發(fā)者提供了一個(gè)圖標(biāo)高光效果的選項(xiàng)，有了半透明的高光，圖標(biāo)就能適應(yīng)很多背景。
我們可以回想下在配色方面比較顯眼的應(yīng)用圖標(biāo)，唱吧可以算一個(gè)。唱吧CEO陳華(微博) 在接受媒體采訪時(shí)也曾經(jīng)表示過(guò)，紅底白字配色的圖標(biāo)很有效。
例如百度新聞客戶端的圖標(biāo)顏色原來(lái)是藍(lán)色，后來(lái)他們發(fā)現(xiàn)藍(lán)色的圖標(biāo)在手機(jī)屏幕里基本就被忽略掉了，最后它把自己整個(gè)色系都改掉了，換成紅底白字，就是希望用戶打開(kāi)手機(jī)時(shí)一眼就能找到這個(gè)圖標(biāo)。
簡(jiǎn)化再簡(jiǎn)化 讓圖標(biāo)更直觀
除了顏色，簡(jiǎn)化也是APP應(yīng)用圖標(biāo)界面設(shè)計(jì)的法寶。
蘋果界面設(shè)計(jì)宣傳師麥克·史登（Mike Stern）曾經(jīng)表示，一款應(yīng)用圖標(biāo)不僅能誘使消費(fèi)者去購(gòu)買應(yīng)用，它更能提高用戶與應(yīng)用互動(dòng)的積極性。如果每次用戶看著一款圖標(biāo)都會(huì)有眼前一亮的感覺(jué)，那么他們持續(xù)使用這款應(yīng)用的頻率就會(huì)更高。
他認(rèn)為，如果能在界面設(shè)計(jì)中避免使用文本就再好不過(guò)了。與一長(zhǎng)串文字或字母相比，單字或單字母的圖標(biāo)界面設(shè)計(jì)更深得人心。
對(duì)于使用圖形元素的圖標(biāo)來(lái)說(shuō)，簡(jiǎn)化方法可以是找到一個(gè)最主要的元素，然后強(qiáng)化它。圖標(biāo)本事就是個(gè)抽象的東西，做得太具象、太復(fù)雜反而可能不會(huì)吸引人。
構(gòu)建族群效應(yīng)
APP應(yīng)用圖標(biāo)最重要的界面設(shè)計(jì)目標(biāo)之一就是讓用戶在下載時(shí)第一眼就認(rèn)出它的功能是什么，在下載后能夠迅速?gòu)拿Ｃ５腁PP應(yīng)用海中選中它。于是一種約定俗稱的圖標(biāo)界面設(shè)計(jì)方式出現(xiàn)了，這就相當(dāng)于同一類APP應(yīng)用類屬一個(gè)族群，因此在界面設(shè)計(jì)上具有共同點(diǎn)。
