“輕輕的將手肘撐在桌子上，托著臉來(lái)看這個(gè)世界，眼前的一切似乎也會(huì)隨之有所不同。我們觀看世界的視角與感受世界的方法可能有千萬(wàn)種，只要能夠下意識(shí)的將這些角度和感受方法運(yùn)用到日常生活中，就是設(shè)計(jì)。”

    讀了原妍哉的《設(shè)計(jì)中的設(shè)計(jì)》，或多或少有些感觸，設(shè)計(jì)師的工作一直是在追求藝術(shù)與設(shè)計(jì)的融合。而設(shè)計(jì)，無(wú)所謂你華麗或純凈的表現(xiàn)手法，都必須完成其所承載的或商業(yè)、或用戶(hù)訴求等目標(biāo)。Web設(shè)計(jì)的核心與目標(biāo)便是“以用戶(hù)為中心的設(shè)計(jì)”，追求極致的用戶(hù)體驗(yàn)。

    一、banner的設(shè)計(jì)

    在WEB項(xiàng)目設(shè)計(jì)中，我們經(jīng)常會(huì)有banner設(shè)計(jì)需求，一般而言首屏Banner及其相關(guān)區(qū)域也是整個(gè)網(wǎng)頁(yè)設(shè)計(jì)中非常重要的部分。

    優(yōu)化前：

    優(yōu)化后：

    優(yōu)化前：

    1.優(yōu)化前網(wǎng)頁(yè)首屏圖片自動(dòng)切換交互方式之外，用戶(hù)可以點(diǎn)擊圓點(diǎn)按鈕手動(dòng)切換圖片。但考慮到圖片本身的展示空間和效果，圓點(diǎn)按鈕設(shè)計(jì)的比較小，造成用戶(hù)點(diǎn)擊該按鈕時(shí)不方便。

    2.banner切換圖片時(shí)，會(huì)存在圖片背景或主色調(diào)與 banner上的文字顏色融合，造成文字的視覺(jué)焦點(diǎn)會(huì)被弱化，降低文字的視覺(jué)吸引力問(wèn)題。

    優(yōu)化后：

    1.圖片的手動(dòng)切換方式，優(yōu)化為左右兩側(cè)的箭頭切換。用戶(hù)鼠標(biāo)放置于圖片上時(shí)，會(huì)在圖片兩側(cè)出現(xiàn)切換按鈕，切換按鈕用矩形且?guī)в屑^標(biāo)識(shí)，視覺(jué)上比較醒目，而且大大增加了點(diǎn)擊與光標(biāo)觸發(fā)區(qū)域，保證了鼠標(biāo)點(diǎn)擊的有效性，使得圖片的切換更加方便。

    2.優(yōu)化后在banner上對(duì)廣告文字增加顏色背景處理，這種手法本身是一種Metro設(shè)計(jì)風(fēng)格，符合目前WEB設(shè)計(jì)潮流。增加背景之后，最大限度的降低了圖片背景和主色調(diào)與文字色彩上的融合，更加凸顯文字的視覺(jué)表現(xiàn)力。

    二、交互設(shè)計(jì)

    本案例是AnyForWeb為國(guó)內(nèi)某知名軟件公司的核心產(chǎn)品進(jìn)行的界面和交互設(shè)計(jì)。

    優(yōu)化前：

    優(yōu)化后：

    優(yōu)化前：

    傳統(tǒng)的文件上傳交互很簡(jiǎn)單：一個(gè)文件域要求用戶(hù)選擇文件，一個(gè)提交按鈕實(shí)現(xiàn)上傳功能。

    這種方式有很多缺點(diǎn)，比如選擇文件后看不到預(yù)覽，一次只能選擇一個(gè)文件，上傳過(guò)程看不到進(jìn)度。

    優(yōu)化后：

    上傳前：上傳文件前可以查看已上傳文件，選擇布局、來(lái)源等。

    上傳中：上傳大量文件時(shí)，可以添加文件描述，移除不需要的文件。上傳文件過(guò)程中最基本的需求是上傳進(jìn)度顯示，大批量上傳時(shí)不易導(dǎo)致用戶(hù)煩躁。

    這一系列的交互，看似簡(jiǎn)單卻需要后端復(fù)雜技術(shù)的支持。用戶(hù)的操作少了，上傳文件更加方便了，也許就是這些細(xì)節(jié)，提升了軟件的用戶(hù)友好度。