淺談web app的優(yōu)勢和設(shè)計的幾個重點(diǎn)

陜西理工大學(xué)機(jī)械工程院 周宗昊 丁介然

陜西理工大學(xué)數(shù)學(xué)與計算機(jī)科學(xué)學(xué)院院 胡 昊 郭家成

淺談web app的優(yōu)勢和設(shè)計的幾個重點(diǎn)

陜西理工大學(xué)機(jī)械工程院 周宗昊 丁介然

陜西理工大學(xué)數(shù)學(xué)與計算機(jī)科學(xué)學(xué)院院 胡 昊 郭家成

據(jù)App Annie發(fā)布的報告顯示,2016年全球手機(jī)應(yīng)用下載量接近490億次.中國作為全球最大的應(yīng)用市場,手機(jī)應(yīng)用收入高達(dá)768億人民幣,占全球應(yīng)用總收入的1/3.Web app的發(fā)展速度可謂驚人,由于其跨平臺、無更新等優(yōu)勢,讓W(xué)eb app在近幾年的總體app設(shè)計中,爆發(fā)出十分強(qiáng)力的勢頭,甚至有人預(yù)測在未來,Web app的產(chǎn)量會超過其他任何種類的app產(chǎn)量.本文首先針對Web app,通過分析、比較其和其它類型的app的特點(diǎn),最終列出Web app相比較現(xiàn)有其它類型app的優(yōu)勢和特色;最后本文借鑒幾個設(shè)計大師的設(shè)計理論和一些成功的作品,列出了幾個Web app設(shè)計時需要重點(diǎn)關(guān)注的重點(diǎn)問題和針對此問題的解決方案.

Web app;app;發(fā)展趨勢;重點(diǎn)問題

1 Web app的優(yōu)勢

現(xiàn)如今,電腦平臺上的用戶所投入的時間越來越少,觀察身邊的人們可以很明顯看出,人們下班回家?guī)缀醪辉趺撮_電腦,手機(jī)、平板電腦和電視可以包辦人們回家的所有娛樂時間.由此可見,webapp的開發(fā)前景相比網(wǎng)頁開發(fā)樂觀很多.

相比較native app和hybird app,Web app作為一種為移動平臺而優(yōu)化的網(wǎng)頁[1],由于在表現(xiàn)形式上于原生態(tài)應(yīng)用一致,故相比原生態(tài)應(yīng)用,Web app擁有很大的優(yōu)勢,這包括:

①由于沒有移動端app作為載體,所以根本不用通過安裝后才能使用,故避免了

頻繁更新所帶來的麻煩;

②開發(fā)成本,Web app可以用非常簡單的方式做出相當(dāng)專業(yè)的應(yīng)用;

③Web app具有很強(qiáng)的跨平臺兼容性,這是因?yàn)槠渌纳臑g覽器是唯一在手機(jī)

安裝運(yùn)行的工作環(huán)境,和其他任何私有環(huán)境無關(guān).

2 web app的設(shè)計

2.1 Web app設(shè)計原則

HTML5的技術(shù)處于尚不完善階段,僅僅處在剛開始被行業(yè)所認(rèn)可階段,Web app作為HTML5的核心產(chǎn)物,自然也處在不斷的進(jìn)步和探索中.此外,由于Web app對瀏覽器依賴性太強(qiáng),Web app的所有功能的實(shí)現(xiàn)需要具有良好兼容性的瀏覽器,所以Web app的設(shè)計,要符合現(xiàn)如今瀏覽器的實(shí)際情況去進(jìn)行.瀏覽器的更新?lián)Q代又具有著一定的不明確性和不可預(yù)測性,所以說在目前這個大環(huán)境里,Web app難以找到一個明確的、合理的設(shè)計原則.

因此在具體設(shè)計時,只能結(jié)合一些權(quán)威級大師的作品,例如建筑設(shè)計大師蓋里、埃森曼、特斯楚米等大師的經(jīng)典作品,或者從已經(jīng)上線的優(yōu)秀產(chǎn)品中尋找借鑒的地方[2].

2.2 Web app設(shè)計的幾個重點(diǎn)

由于Web app是依托瀏覽器進(jìn)行設(shè)計,也就是說Web app是一種特殊的網(wǎng)頁,關(guān)鍵還是網(wǎng)頁的設(shè)計,不過與傳統(tǒng)的網(wǎng)頁相比,Web app側(cè)重點(diǎn)不一樣,更加注重功能和實(shí)用性.Web app在設(shè)計時,需要注意以下幾個重點(diǎn):

(1)對窗口的修飾

對于彈出式菜單窗口的修飾必不可少,例如對彈出窗口陰影的設(shè)定,彈出窗口陰影,不僅僅視覺上看起來十分美觀,此外,陰影還能屏蔽背景,將彈出窗口和背景區(qū)分開,這樣便有了立體效果,給人一種"懸浮"的感覺,拉近了與人互交的距離.

設(shè)計窗口陰影時,往往需要制作透明的PNG格式的陰影作為背景圖片,陰影區(qū)域透明度為70%-85%之間效果最佳,再將此背景圖片對應(yīng)到指定位置中[3].除此以外,也可以通過JavaScript、Lightboxes等軟件中的Drop Shadows命令實(shí)現(xiàn).

(2)靈活的用戶界面

用戶界面應(yīng)按照需求進(jìn)行設(shè)計,并不是將繁雜而大量的內(nèi)容都展示出來,往往越簡潔的界面更受用戶的歡迎和青睞.為了設(shè)計出既簡潔又不乏內(nèi)容的用戶界面,就必須需要一個靈活的、隨需求可變化的模塊化的界面設(shè)計.

以一個有下拉菜單的搜索模塊為例,有了下拉菜單可以幫助用戶更加具體的搜索到用戶想要的內(nèi)容,因?yàn)橄吕藛蔚拇嬖谝彩沟盟阉鲏K顯得簡單又實(shí)用;還比如將高級菜單適時的隱藏起來,也是一種簡潔用戶界面的途徑,隱藏時需搞清楚用戶常使用的功能有哪些,針對這一塊還能做到用戶div界面設(shè)定,可以將簡潔與針對不同用戶實(shí)用的界面設(shè)定做到極致.

(3)對Button狀態(tài)的積極反饋

對于擁有自定義式按鈕的Web app,若將鏈接做成Button樣式,便擁有了Button的表現(xiàn)行駛,例如,點(diǎn)擊Button時,擁有了"點(diǎn)擊"的形態(tài).這樣又能顯得十分美觀,而且還能給用戶傳遞一個操作十分靈敏、自如的信號,更加方便于用戶的體驗(yàn)和操作.

(4)對關(guān)鍵性內(nèi)容的把握

在Web app設(shè)計中,如果把握相對重要的幾個關(guān)鍵元素,那整個Web app的設(shè)計也不會差.

例如在創(chuàng)建一個新的內(nèi)容或條目時,彈出是否創(chuàng)建菜單,會有"是"和"否"兩個button,很明顯,這里的"是"button從使用頻率來看更加重要些,雖然這兩個button出現(xiàn)在相同的位置(并排而放置),但是若給予同樣的重視程度反而會讓用戶不適應(yīng).我們可以使"是"的button效果和"否"的區(qū)分,讓"是"的button更加突出一些,這樣更能吸引用戶的眼光.

(5)多媒體的嵌套

雖然Web app重在功能的呈現(xiàn),但多媒體一向受客戶們的青睞,如圖片、Flsh、視頻更容易吸引客戶的眼球,如果條件允許,可以嵌入更多的多媒體元素.

例如Web app在介紹一款功能的使用時,若純粹的文本書寫,用戶可能會產(chǎn)生不耐煩或難理解的抵觸情緒.若嵌入一段視頻教程,用戶便可以很直觀的進(jìn)行學(xué)習(xí).

(6)上下文情景

站在用戶的角度出發(fā),考慮用戶想要看到什么、聽到什么內(nèi)容是十分必要的.這便需要結(jié)合上下文情景導(dǎo)航的設(shè)定.結(jié)合上下文導(dǎo)航,最成功的莫過于office 07,在office 07的word中可以看到[4],默認(rèn)工具欄的集合變成了帶狀控制的形式,其中每一項(xiàng)tab控制這一項(xiàng)相關(guān)功能,而每一項(xiàng)都可以讓用戶自行按其所需設(shè)定.

3 結(jié)束語

任何優(yōu)秀的產(chǎn)品,無一例外都是站在用戶的角度去考慮.web app的設(shè)計遠(yuǎn)不止于此,在未來互聯(lián)網(wǎng)、瀏覽器的更新?lián)Q代,以及隨著時代的不同用戶對需求的變化,web app的設(shè)計原則和設(shè)計內(nèi)容也需隨著時間和所處大環(huán)境改變才行.

[1]謝強(qiáng),牛現(xiàn)云,趙娜.移動數(shù)字圖書館服務(wù)體系研究[J].2013(4):6-10.

[2]National Education Technology Plan 2010:Transforming American Education Learning Powered by Technology[DB/OL].http://tech.ed.gov/netp/,2010-11-01.

[3]彭濤,楊煉.基于移動瀏覽器的HTML5核心技術(shù)的研究及其應(yīng)用[J].廣東通信技術(shù),2012(4):47-50.

[4]陳鋒.面向用戶體驗(yàn)的移動互聯(lián)網(wǎng)資源管理研究[博士學(xué)位論文].合肥:中國科技大學(xué),2013-11-02.

陜西理工大學(xué)2017年度年度校級研究生創(chuàng)新基金項(xiàng)目"互聯(lián)網(wǎng)+"車行漢中"app的開發(fā)"(項(xiàng)目編碼:SLGYCX1728).