對(duì)于移動(dòng)APP或是Webapp設(shè)計(jì)師來(lái)說(shuō)，主要是要設(shè)計(jì)出精美如何人性化的UI界面，為了在與PC端桌面應(yīng)用程序的競(jìng)爭(zhēng)中展現(xiàn)其優(yōu)勢(shì)，原生態(tài)的移動(dòng)APP或是webapp設(shè)計(jì)，都需要提供最簡(jiǎn)潔、直觀、快速響應(yīng)的用戶UI界面，以便于用戶在任務(wù)操作中節(jié)省精力和時(shí)間。
今天html5模版網(wǎng)(m.suosuyi.cn)跟大家繼續(xù)分享移動(dòng)APP設(shè)計(jì)干貨，在移動(dòng)APP設(shè)計(jì)和webAPP設(shè)計(jì)中六個(gè)小技巧。
1、整個(gè)APP必須使用上下文情境導(dǎo)航
情境導(dǎo)航就是在既定的情境下考慮用戶希望看什么、需要什么是非常重要的。
不需要在每一個(gè)地方都放置相同的導(dǎo)航控件，因?yàn)橛脩舨皇窃谌魏吻闆r下都需要它們。
移動(dòng)APP或是Webapp都可以從這種上下文情境導(dǎo)航中獲益，僅展示用戶需要的、而不是所有可用的功能，從而保持用戶界面的整潔清爽。
舉個(gè)很簡(jiǎn)單的例子如下圖，左邊是個(gè)人主頁(yè)的菜單，非常清晰明了告訴用戶怎么去聯(lián)系。
2、Button狀態(tài)反饋要積極，主動(dòng)
不管是移動(dòng)APP還是webapp，他們都擁有自定義樣式的按鈕的權(quán)利。默認(rèn)的輸入按鈕可能不適合某些情景，文字鏈接有時(shí)候看起來(lái)又太含蓄。
需要注意的是，把鏈接做成Button樣式的時(shí)候，它們就應(yīng)該有button的表現(xiàn)形式。比如，在點(diǎn)擊button的時(shí)候它們應(yīng)該會(huì)出現(xiàn)被“壓”過(guò)的樣子。
這不僅僅是純粹的視覺(jué)變化。及時(shí)反饋給用戶，可以使web app感覺(jué)起來(lái)更靈敏，與桌面應(yīng)用程序的用戶體驗(yàn)更接近。
3、UI界面元素隨需而變，不需要呆板
力求簡(jiǎn)潔明了是用戶界面設(shè)計(jì)的重要原則。在同一時(shí)間給用戶展示的功能越多，用戶需要尋找和思考的時(shí)間也就越多。同樣，界面中存在的選項(xiàng)越少，可用功能就越明顯、越容易瀏覽。不過(guò)簡(jiǎn)化界面并非輕而易舉，尤其是你不想減少應(yīng)用程序功能的情況下。將高級(jí)功能隱藏起來(lái)是一種有效的簡(jiǎn)化方法。搞清楚在界面中用戶最經(jīng)常用的是哪些功能，然后把其他功能隱藏處理。這些可由下拉式菜單和控件完成。例如，搜索欄中的高級(jí)過(guò)濾器可以做成尾部的特殊下拉菜單樣式。當(dāng)用戶需要這些過(guò)濾器的時(shí)候只需要幾次點(diǎn)擊就可以使用。
4、為模態(tài)窗口增加邊緣陰影或其他效果
模態(tài)窗口就是模態(tài)類型對(duì)話框，指除非采取有效的關(guān)閉手段，用戶鼠標(biāo)點(diǎn)或者輸入光標(biāo)一直停留在當(dāng)前的界面上。
彈出式菜單和窗口周邊的陰影不僅僅是為了視覺(jué)美觀。陰影一方面增大了菜單或窗口的尺寸，有助于將菜單或窗口從背景中區(qū)別開(kāi)來(lái);另一方面通過(guò)灰度化的邊緣陰影可以屏蔽背景內(nèi)容的噪音干擾。
這個(gè)APP設(shè)計(jì)技巧源于傳統(tǒng)PC電腦桌面程序，幫助用戶將注意力集中在彈出的窗口。由于很多模態(tài)窗口不容易從桌面程序內(nèi)容頁(yè)面中凸顯出來(lái)，陰影可以使它們看起來(lái)具有立體效果、仿佛懸浮于其他內(nèi)容之上，于是拉近了模態(tài)窗口與用戶的距離感。
5、讓賬戶升級(jí)或降級(jí)的提示簡(jiǎn)潔、不擾民
在很多互聯(lián)網(wǎng)產(chǎn)品中都會(huì)有不同權(quán)限的用戶賬戶存在，比如郵箱、空間、網(wǎng)盤存儲(chǔ)、SNS產(chǎn)品等。在用戶擁有了一個(gè)賬戶后，他們可以對(duì)賬戶進(jìn)行升級(jí)或降級(jí)。
APP設(shè)計(jì)師就認(rèn)真思考，如何設(shè)計(jì)良好的移動(dòng)界面來(lái)提示用戶他們可以升級(jí)而不去干擾用戶的工作流程呢?
移動(dòng)app設(shè)計(jì)師肯定不愿意在應(yīng)用程序之外完成這件事情，這樣的提示應(yīng)該是和app是無(wú)縫連接的，而且最好是讓用戶感覺(jué)方便。因此升級(jí)賬戶的提示最好放在app內(nèi)完成。
6、嵌入相關(guān)介紹等視頻營(yíng)銷
雖然圖片和文字是向用戶介紹應(yīng)用程序功能的很好的方式，但如果資源允許的話，視頻將是一個(gè)更優(yōu)方案。
近年來(lái)視頻在網(wǎng)絡(luò)上的使用越來(lái)越頻繁。特別是今年2014年微視頻的火爆！讓整個(gè)移動(dòng)互聯(lián)網(wǎng)圈子中蔓延著微視風(fēng)！8秒，10秒等等。
但是之前Webapp的截屏視頻經(jīng)常被使用在營(yíng)銷網(wǎng)站中來(lái)展示產(chǎn)品的功能;然而這并不是視頻使用的唯一方式。多想想，就會(huì)有新的辦法解決！
小小的總結(jié)：老譚認(rèn)為其實(shí)設(shè)計(jì)APP或是webAPP，除了平常我們所了解的相關(guān)設(shè)計(jì)知識(shí)之外，也有在APP設(shè)計(jì)項(xiàng)目中去總結(jié)和思考。閱讀優(yōu)秀的APP界面設(shè)計(jì)之后，經(jīng)過(guò)思考應(yīng)用在我們自己的app上，而且加入你的思想或是小小的改進(jìn)，會(huì)有不一樣的APP味道！