網(wǎng)站設(shè)計(jì)這些問題不能忽略！

2015-10-27 分類：網(wǎng)站設(shè)計(jì)

設(shè)計(jì)師要與工程師高度密切協(xié)作才能做出優(yōu)秀的網(wǎng)站設(shè)計(jì)。有些設(shè)計(jì)師與工程師對(duì)于規(guī)劃好的視覺界面，由于沒有溝通在實(shí)施過(guò)程中會(huì)發(fā)現(xiàn)很多不完整的地方，這樣一來(lái)還要浪費(fèi)時(shí)間去調(diào)整修改，浪費(fèi)時(shí)間。本文說(shuō)說(shuō)青島制作網(wǎng)頁(yè)行業(yè)，這些問題不能忽略！

以個(gè)人曾經(jīng)接觸過(guò)的案子為例，下圖為其中的兩個(gè)主要的頁(yè)面（這里已將視覺完稿轉(zhuǎn)成簡(jiǎn)單 mockup 表示），它是一個(gè)社群類的 App，左方的頁(yè)面主要使用者要將自己的個(gè)人資訊分享給已選定的其他人，在此頁(yè)面可以勾選要分享的資訊項(xiàng)目，也可以透過(guò)下方按鈕個(gè)別新增額外的資訊，完成後就按下完成按鈕，就會(huì)將資訊上傳至伺服器并分享給其他人，完成後就轉(zhuǎn)場(chǎng)到右邊的成功頁(yè)面。

這個(gè)案子所提供的資料已經(jīng)是精美設(shè)計(jì)完成過(guò)後的視覺圖檔，它的色彩風(fēng)格強(qiáng)烈，所有的控制元件都必須重新客制過(guò)，乍看下是個(gè)兩個(gè)很正常又簡(jiǎn)單頁(yè)面，感覺上沒什麼問題？

但是實(shí)際上這里就馬上遭遇了兩個(gè)問題，第一個(gè)是「加入更多資訊的按鈕」，在按下個(gè)這個(gè)按鈕後，使用者可以直接輸入額外的個(gè)人資訊。但是要怎麼呈現(xiàn)呢？而客制化的輸入文字框要放在哪里呢？而跳出的虛擬鍵盤也會(huì)影響文字框要出現(xiàn)在的方式與位置。

第二個(gè)則是按下「完成」按鈕的後續(xù)動(dòng)作，這是一個(gè)要透過(guò)網(wǎng)路溝通的動(dòng)作，當(dāng)牽扯的網(wǎng)路時(shí)，就必須要考慮到送出要求後等待回應(yīng)的等待狀態(tài)（讀取狀態(tài)的動(dòng)畫圖示等）、以及傳送失敗時(shí)的狀態(tài)與回饋，送出時(shí)按鈕要呈現(xiàn)什麼顏色呢？文案內(nèi)容有需要更改成分享中嗎？如果失敗了要顯示失敗的彈出對(duì)話框還是要顯示在頁(yè)面中并且有重新送出的按鈕？

這些似乎不是實(shí)作者可以擅自決定與完成的，於是這往來(lái)之間就無(wú)形中又增加了許多溝通的時(shí)間與成本。

介面設(shè)計(jì)并非單純的平面視覺設(shè)計(jì)，在設(shè)計(jì)到開始實(shí)作之間，勢(shì)必有些需要特別注意的地方，才能夠避免遺漏掉許多應(yīng)該考慮的狀況，讓整個(gè)設(shè)計(jì)更加完善。

需要考慮到各種狀況

即使是單一的資訊瀏覽頁(yè)面中，也會(huì)有各種不同的狀況與細(xì)節(jié)需要一并考慮，可以想像這些狀況可能有：有資訊的時(shí)候、沒有資訊的時(shí)候（空白狀態(tài) Blank State）、可以讀取更多資訊（more）的時(shí)候、已經(jīng)沒有更多資訊的時(shí)候以及沒有網(wǎng)路的時(shí)候。

而光是在空白狀態(tài)中，就可能會(huì)需要提供不一樣的介面與視覺設(shè)計(jì)，來(lái)提示使用者進(jìn)行其他的動(dòng)作，另外還有當(dāng)各種錯(cuò)誤發(fā)生時(shí)的，可能會(huì)需要出現(xiàn)的警示訊息與介面以及不同的文字資訊長(zhǎng)短也是很常被遺忘的變數(shù)之一。

處理這些狀態(tài)對(duì)於程式設(shè)計(jì)師來(lái)說(shuō)是非常熟悉的，他們會(huì)需要針對(duì)個(gè)例外狀況與狀態(tài)來(lái)提供對(duì)應(yīng)的功能與回饋，例如程式一打開，App 向遠(yuǎn)端伺服器索取資訊時(shí)，會(huì)有讀取中的狀態(tài)、讀取失敗的狀態(tài)、等待使用者重新讀取的狀態(tài)、需要重新登入的狀態(tài)等，這些都可能需要搭配介面元素來(lái)讓使用者能夠清楚他們正處?kù)妒颤N階段、讓他們知道他們正在作什麼。

但很可惜的是若視覺設(shè)計(jì)師只針對(duì)部分狀態(tài)（以上圖的例子來(lái)說(shuō)，通常只有提供有資訊的時(shí)候）或是理想的狀態(tài)（搭配精美模擬圖片與長(zhǎng)短恰當(dāng)?shù)哪M資訊內(nèi)容）作優(yōu)化設(shè)計(jì)，當(dāng)進(jìn)行工程師實(shí)作時(shí)才發(fā)現(xiàn)需要補(bǔ)上這個(gè)、補(bǔ)上那個(gè)，這樣容易缺乏統(tǒng)整規(guī)劃的設(shè)計(jì)。

視覺設(shè)計(jì)其實(shí)與互動(dòng)、操作流程與方式是個(gè)相輔相成的好兄弟，他們之間需要良好的搭配才能一氣呵成提供好的使用經(jīng)驗(yàn)，所以設(shè)計(jì)師在 mockup 的階段，就需要針對(duì)各種可能遇到的狀況，事先做好規(guī)劃或保留彈性，可以有效加快實(shí)作時(shí)的效率。

介面操作是連續(xù)順暢的動(dòng)畫

你可以想像網(wǎng)站或是程式的操作是一部由許多連續(xù)影格所組成的動(dòng)畫，而不是跳接的分格漫畫，它是一個(gè)過(guò)程，不是一堆靜態(tài)頁(yè)面的拼接，也不是像瀏覽一本電子書一樣，這也是為什麼我們要在開發(fā)前需要做好操作流程的 mockup，只要在介面中有出現(xiàn)可操作的功能（例如一個(gè)按鈕）我們都需要規(guī)劃好操作它會(huì)出現(xiàn)什麼樣的「內(nèi)容」。

這個(gè)「內(nèi)容」指的不是籠統(tǒng)的概念，例如建立一個(gè)使用者、開始上傳圖片等，它是透過(guò)具體的介面呈現(xiàn)與操作去完成一個(gè)任務(wù)，比如說(shuō)我們作了一個(gè)具有帳號(hào)密碼登入的 App，視覺設(shè)計(jì)師可能會(huì)給你一張精美的登入頁(yè)面如下：

但是即使是一個(gè)簡(jiǎn)單的登入頁(yè)面，當(dāng)使用者在操作這個(gè)頁(yè)面時(shí)，就有可能會(huì)出現(xiàn)下面三種狀況，如果你不是非常信賴程式實(shí)作者的設(shè)計(jì)，那麼你最好也能夠在設(shè)計(jì)階段就把這些情形考慮進(jìn)去，并且提供這些視覺資訊給工程師，節(jié)省反覆來(lái)回溝通協(xié)調(diào)的時(shí)間。

在這里「登入」的按鈕只是一個(gè)概念，而按下登入後出現(xiàn)的讀取動(dòng)畫圖示以及淡化的按鈕則才是登入具體的「內(nèi)容」。

雖然有很多問題本身就很難在模擬的操作流程中被顯現(xiàn)出來(lái)，例如伺服器後端開發(fā)好的 API 無(wú)法有效率的搭配規(guī)劃設(shè)計(jì)出的操作流程與邏輯，也是很常在開發(fā)中期才發(fā)現(xiàn)，但視覺設(shè)計(jì)本身就會(huì)深深影響介面的操作，而當(dāng)使用者進(jìn)行操作後，顯示的畫面勢(shì)必會(huì)改變，畫面的改變則勢(shì)必又影響到視覺的呈現(xiàn)，所以設(shè)計(jì)師無(wú)可避免的在 mockup 階段就需要花費(fèi)心力去思考這些可能會(huì)發(fā)生的「變動(dòng)的視覺細(xì)節(jié)」。

標(biāo)題名稱：網(wǎng)站設(shè)計(jì)這些問題不能忽略！
文章地址：http://redsoil1982.com.cn/news/33081.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營(yíng)銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

網(wǎng)站設(shè)計(jì)這些問題不能忽略！

網(wǎng)站設(shè)計(jì)這些問題不能忽略！