網站設計這些問題不能忽略！

2015-10-27 分類：網站設計

設計師要與工程師高度密切協作才能做出優秀的網站設計。有些設計師與工程師對于規劃好的視覺界面，由于沒有溝通在實施過程中會發現很多不完整的地方，這樣一來還要浪費時間去調整修改，浪費時間。本文說說青島制作網頁行業，這些問題不能忽略！

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

這個案子所提供的資料已經是精美設計完成過後的視覺圖檔，它的色彩風格強烈，所有的控制元件都必須重新客制過，乍看下是個兩個很正常又簡單頁面，感覺上沒什麼問題？

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

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

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

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

需要考慮到各種狀況

即使是單一的資訊瀏覽頁面中，也會有各種不同的狀況與細節需要一并考慮，可以想像這些狀況可能有：有資訊的時候、沒有資訊的時候（空白狀態 Blank State）、可以讀取更多資訊（more）的時候、已經沒有更多資訊的時候以及沒有網路的時候。

而光是在空白狀態中，就可能會需要提供不一樣的介面與視覺設計，來提示使用者進行其他的動作，另外還有當各種錯誤發生時的，可能會需要出現的警示訊息與介面以及不同的文字資訊長短也是很常被遺忘的變數之一。

處理這些狀態對於程式設計師來說是非常熟悉的，他們會需要針對個例外狀況與狀態來提供對應的功能與回饋，例如程式一打開，App 向遠端伺服器索取資訊時，會有讀取中的狀態、讀取失敗的狀態、等待使用者重新讀取的狀態、需要重新登入的狀態等，這些都可能需要搭配介面元素來讓使用者能夠清楚他們正處於什麼階段、讓他們知道他們正在作什麼。

但很可惜的是若視覺設計師只針對部分狀態（以上圖的例子來說，通常只有提供有資訊的時候）或是理想的狀態（搭配精美模擬圖片與長短恰當的模擬資訊內容）作優化設計，當進行工程師實作時才發現需要補上這個、補上那個，這樣容易缺乏統整規劃的設計。

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

介面操作是連續順暢的動畫

你可以想像網站或是程式的操作是一部由許多連續影格所組成的動畫，而不是跳接的分格漫畫，它是一個過程，不是一堆靜態頁面的拼接，也不是像瀏覽一本電子書一樣，這也是為什麼我們要在開發前需要做好操作流程的 mockup，只要在介面中有出現可操作的功能（例如一個按鈕）我們都需要規劃好操作它會出現什麼樣的「內容」。

這個「內容」指的不是籠統的概念，例如建立一個使用者、開始上傳圖片等，它是透過具體的介面呈現與操作去完成一個任務，比如說我們作了一個具有帳號密碼登入的 App，視覺設計師可能會給你一張精美的登入頁面如下：

但是即使是一個簡單的登入頁面，當使用者在操作這個頁面時，就有可能會出現下面三種狀況，如果你不是非常信賴程式實作者的設計，那麼你最好也能夠在設計階段就把這些情形考慮進去，并且提供這些視覺資訊給工程師，節省反覆來回溝通協調的時間。

在這里「登入」的按鈕只是一個概念，而按下登入後出現的讀取動畫圖示以及淡化的按鈕則才是登入具體的「內容」。

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

標題名稱：網站設計這些問題不能忽略！
文章地址：http://www.2m8n56k.cn/news/33081.html

網站建設、網絡推廣公司-創新互聯，是專注品牌與效果的網站制作，網絡營銷seo公司；服務項目有網站設計等

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

網站設計這些問題不能忽略！