中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

在設(shè)計師與程序員的團隊合作過程中，常會面臨到一個問題，就是規(guī)劃好的視覺界面與操作流程，在實際程式實作時才發(fā)現(xiàn)許多沖突與不完整的地方，產(chǎn)生許多額外的來回溝通時間與修改調(diào)整的成本，這通常是因為沒有事先規(guī)劃出完整詳細的操作流程 mockup，在 wireframe 產(chǎn)生后就著手進行視覺設(shè)計與雛形開發(fā)的分工，就很容易就發(fā)生這樣的狀況。

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

這個案子所提供的資料已經(jīng)是精美設(shè)計完成過后的視覺圖檔，它的色彩風(fēng)格強烈，所有的控制元件都必須重新格式過，乍看下是個兩個很正常又簡單頁面，感覺上沒什么問題?

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

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

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

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

　　需要考慮到各種狀況

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

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

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

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

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

　　界面操作是連續(xù)順暢的動畫

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

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

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

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

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

來源：產(chǎn)品中國