觸屏版
全國服務(wù)熱線:0571-87205688
登錄
注冊
客戶中心
關(guān)注云客
“輕輕的將手肘撐在桌子上,托著臉來看這個世界,眼前的一切似乎也會隨之有所不同。我們觀看世界的視角與感受世界的方法可能有千萬種,只要能夠下意識的將這些角度和感受方法運(yùn)用到日常生活中,就是設(shè)計。”
讀了原妍哉的《設(shè)計中的設(shè)計》,或多或少有些感觸,設(shè)計師的工作一直是在追求藝術(shù)與設(shè)計的融合。而設(shè)計,無所謂你華麗或純凈的表現(xiàn)手法,都必須完成其所承載的或商業(yè)、或用戶訴求等目標(biāo)。Web設(shè)計的核心與目標(biāo)便是“以用戶為中心的設(shè)計”,追求極致的用戶體驗。
一、banner的設(shè)計
在WEB項目設(shè)計中,我們經(jīng)常會有banner設(shè)計需求,一般而言首屏Banner及其相關(guān)區(qū)域也是整個網(wǎng)頁設(shè)計中非常重要的部分。
優(yōu)化前:
優(yōu)化后:
優(yōu)化前:
1.優(yōu)化前網(wǎng)頁首屏圖片自動切換交互方式之外,用戶可以點(diǎn)擊圓點(diǎn)按鈕手動切換圖片。但考慮到圖片本身的展示空間和效果,圓點(diǎn)按鈕設(shè)計的比較小,造成用戶點(diǎn)擊該按鈕時不方便。
2.banner切換圖片時,會存在圖片背景或主色調(diào)與 banner上的文字顏色融合,造成文字的視覺焦點(diǎn)會被弱化,降低文字的視覺吸引力問題。
優(yōu)化后:
1.圖片的手動切換方式,優(yōu)化為左右兩側(cè)的箭頭切換。用戶鼠標(biāo)放置于圖片上時,會在圖片兩側(cè)出現(xiàn)切換按鈕,切換按鈕用矩形且?guī)в屑^標(biāo)識,視覺上比較醒目,而且大大增加了點(diǎn)擊與光標(biāo)觸發(fā)區(qū)域,保證了鼠標(biāo)點(diǎn)擊的有效性,使得圖片的切換更加方便。
2.優(yōu)化后在banner上對廣告文字增加顏色背景處理,這種手法本身是一種Metro設(shè)計風(fēng)格,符合目前WEB設(shè)計潮流。增加背景之后,最大限度的降低了圖片背景和主色調(diào)與文字色彩上的融合,更加凸顯文字的視覺表現(xiàn)力。
二、交互設(shè)計
本案例是AnyForWeb為國內(nèi)某知名軟件公司的核心產(chǎn)品進(jìn)行的界面和交互設(shè)計。
優(yōu)化前:
優(yōu)化后:
優(yōu)化前:
傳統(tǒng)的文件上傳交互很簡單:一個文件域要求用戶選擇文件,一個提交按鈕實現(xiàn)上傳功能。
這種方式有很多缺點(diǎn),比如選擇文件后看不到預(yù)覽,一次只能選擇一個文件,上傳過程看不到進(jìn)度。
優(yōu)化后:
上傳前:上傳文件前可以查看已上傳文件,選擇布局、來源等。
上傳中:上傳大量文件時,可以添加文件描述,移除不需要的文件。上傳文件過程中最基本的需求是上傳進(jìn)度顯示,大批量上傳時不易導(dǎo)致用戶煩躁。
這一系列的交互,看似簡單卻需要后端復(fù)雜技術(shù)的支持。用戶的操作少了,上傳文件更加方便了,也許就是這些細(xì)節(jié),提升了軟件的用戶友好度。
評論(0人參與,0條評論)
發(fā)布評論
最新評論