[ 平面理論教程 ] 淺談視覺設計師如何讓設計效果更簡潔- 設計教程 - 骨子愛創意

教學主題: 淺談視覺設計師如何讓設計效果更簡潔

大家好!! 小編今天來和大家分享關於 設計教程中的平面理論教程教學

今天的這個教學主題是: 淺談視覺設計師如何讓設計效果更簡潔

這教學的重點為這幾點 [ 簡潔,效果,設計,如何,開發,視覺,規範,視覺設計,控件,一 ]

希望你可以從這幾點中領悟到修圖的精華

本文重點

一個產品完整的設計流程中，交互與視覺定稿后，後續視覺規範的輸出、UI控件的整理與標註、開發的高還原度，都會影響產品最終的用戶體驗。作為視覺設計師，在視覺設計的最後階段則是繁瑣且像素級別的精雕細琢，設計講究的不僅是美感還有嚴謹態度與邏輯。

一個產品完整的設計流程中，交互與視覺定稿后，後續視覺規範的輸出、UI控件的整理與標註、開發的高還原度，都會影響產品最終的用戶體驗。作為視覺設計師，在視覺設計的最後階段則是繁瑣且像素級別的精雕細琢，設計講究的不僅是美感還有嚴謹態度與邏輯。

視覺設計師如何讓設計效果高還原度落地?

最近半年在大司(華為)參與一個重點項目，且將會上線到全球各個局點(本司專稱，指某個國家)中，涉及多端多屏協同問題。臨時組成的設計作戰團隊，人員投入少、時間緊迫、任務量大高強度的狀態下摸索前行。為時五個月過去了，項目推進良好Phone端ios與Android也到測試階段，“大視頻”端的開發工作也即將開始。五個月的時間，與優秀的同事一起協力合作，參與Phone端“大視頻”端的視覺與多端規範輸出。這裡分享一下這幾個月的累積與沉澱–視覺設計師, 如何讓設計效果保持高還原度的開發落地?給用戶呈現一個設計精緻與體驗良好的產品?

在一個產品完整的設計流程中，交互與視覺定稿后，後續視覺規範的輸出、UI控件的整理與標註、開發的高還原度，都會影響產品最終的用戶體驗。作為視覺設計師，在視覺設計的最後階段則是繁瑣且像素級別的精雕細琢，開發出來的精美頁面需要視覺設計師做到以下幾點。

一、視覺與交互之間應銜接無縫，即時刷新視覺頁面

一般產品設計流程包括不同的階段，不同的階段其涉及的範疇內容不一樣，作為設計師面對所有步驟不能一蹴而就，而是按部就班，計劃行事。

前期準備階段：確定設計需求的目標，競品分析，用戶研究，市場評估等;

設計需求分析階段：設計需求的理清，業務邏輯的推敲，產品的架構的搭建;

設計執行階段：交互設計原型的輸出，視覺設計風格與方案確定，開發落實與測試上線，這構成一個不斷迭代刷新的流程;

在以上階段中，業務需求的變更與澄清，交互的迭代，視覺的刷新，是設計過程中最繁瑣的階段。設計啟動前了解多端的適配情況(分辨率/屏幕精度)，綜合考慮優先出什麼分辨率;接着視覺設計師需面對龐大的頁面工作量，且常會遇到與交互原型不一致的問題，需及時反饋並拉通討論。這就需遵循一個清晰可見的迭代流程，對視覺設計而言，需求的變更與澄清-交互的迭代-視覺的刷新-設計的迭代構成的是一個閉環無縫的路線，只有這樣才能為開發的啟動，打下紮實的根基。

當然作為視覺設計師，設計過程中主動出ABC…方案而不是只拿出一個唯一的方案，只有將想法用畫面來表達，才是夠合格的設計師，特別是視覺設計師，好處可以鍛煉自己的設計表達力，方便評審定稿，避免反覆修改被人牽着走。

二、適當時，為開發開啟更多的話語權，避免更多的無用功

視覺規範、視覺標註、視覺控件庫的整理與輸出目的只有一個：那就是指導開發，讓設計100%還原落地;回到項目中，對於設計團隊與開發團隊通常會體現以下兩種情況出現：

開發團隊對項目有豐富經驗，設計團隊對此項目經驗少-開發話語權大於視覺

設計團隊擁有多次項目經驗，並有一定的設計沉澱累積-設計話語權大於開發

從視覺設計而言，如果是設計團隊擁有豐富的經驗這是最好的，用經驗累積設計沉澱與創造性指導項目，話語權大，反之亦然。

在這裡結合最近參與的項目，情況為第一種來進行思考;交互視覺設計過程與規範輸出中，讓開發提供更多正確的方向引導，借鑒開發團隊以往的寶貴經驗，如：設計文檔的共享與即時性、設計規範的專業性，開發認同的設計規範去指導開發、設計相關問題單的及時跟蹤與解決、設計需求變更流程(變更流程包括：變更需求提出人-交互-視覺-開發-產品經理(SE or PM)敲定-執行變更-關閉問題單-變更完成)等，都能有效指導開發，提高產品開發落地的高還原性。

三、用80%場景的視覺設計＋視覺控件規範＋切圖＋標註＋宣講來指導開發

1. 視覺設計的場景

由交互提供具體場景的典型頁面，視覺稿進行輸出，多次迭代評審敲定后，再由開發提出缺失場景的視覺設計，視覺進行場景補充;

2. 視覺UI控件規範的輸出

必須是經過多次評審與迭代的最終視覺稿;但通常情況下，為了趕進度視覺設計與規範是同步進行，這導致規範反覆修改的問題。

根據項目經驗是，在視覺迭代中期時，先輸出基礎控件元素規範，包括(顏色/文字/圖標/蒙板/投影/按鈕/輸入框/或個別控件)約佔控件規範30%，與開發進行第一次規範評審，確定規範輸出的正確性與專業性。

讓開發選取所有視覺頁面中需要標註的UI控件，因為開發選擇的UI控件也為通用樣式，開發代碼寫成UI控件庫(可以對應視覺的控件列表)並由其它分模塊統一調用;且所有UI控件必須基於最終視覺效果進行控件抽取與迭代輸出。最後，layout用文檔(pdf)的方式總結，避免單獨模塊單獨頁面傳遞，更能將規則一目了然;規範是一個龐大而繁瑣，極需耐心的工作;過程中注重每一個細節的精準與合理性。

3. 切圖與整理

切出所有視覺頁面中涉及到的圖標與輔助圖形;圖標大小如：24px/ 32px/48px/72px/128px等，根據圖標具體場景中的大小、顏色、狀態來切。換句話說，每一個圖標都有它對應的具體場景，特定的尺寸、顏色和狀態;記得曾與開發gg對規範與切圖的時候，他說：頁面的圖標切圖，需要的是一個具體的拿來就用的，我們不會去畫一個圖標或去特定寫一個圖標的顏色。

4. 標註

視覺頁面的標註基於UI控件規範的基礎上進行，拋棄以往每個頁面細無巨細的具體尺寸/色值/大小的標註。其實每一個視覺頁面皆由不同的UI控件組成，在頁面中將對應控件用UI控件規範中的編號來標註，開發gg拿着視覺頁面標註去敲寫代碼時，再在UI控件規範文檔中尋找相對應的控件規範細節;這樣，視覺設計師避免在視覺頁面中做那密密麻麻的尺寸標註，而開發gg拿到標註清爽的視覺頁面也不會產生視覺疲勞。

5. 規範宣講

以上4步完成後項目開發啟動前，用視覺規範對開發做統一的宣講，避免遺漏造成規則傳達不一致;這樣，還設計原度還是問題么?(後續會有一篇文章專門分享如何做設計規範與標註。)

四、與開發近距離接觸，面對面解決問題

最後一個方法是與開發來個親密接觸，即如果有條件允許的話，請與開發坐一起;遇到問題及時面對面澄清、拉通指導、達成共識、修改、敲定、解決。

1. 設計規範做得再完善，開發問題依然存在

試想一下，如果不和開發坐在一起，即使開發面對再完善的設計規範，基於開發本身對設計美感的欠缺，開發過程多多少少都會產生理解偏差。開發過程每遇到一個細節問題，開發gg都得拉着視覺問：這個按鈕上的左右箭頭是無限循環嗎?圖標缺少了一個狀態，那個狀態是什麼等;發個信息問拉會或者電話討論，有時候還解釋不清楚，效率低且事倍功半。

2. 視覺設計師直接進組到開發團隊中

結合當前項目的做法是視覺設計師直接進駐到開發團隊中，與開發團隊坐在一起，舉個例子此項目視覺在深圳，開發在異省南京或是異國，視覺也出差飛過去長期進駐，遇到問題面對面商議解決;大大提高了開發的進度與也節約了時間，視覺還原度還是問題么?當然，如果設計與開發本來就附近辦公，則不需無休止的出差，項目成本節省不少。

設計過程還是和開發gg們來一個“親密接觸”吧，永遠不要把開發拒之門外;覺得交互與視覺完成後則就萬事大吉。設計講究的不僅是設計美感還有嚴謹的態度合理的邏輯，要想一個產品始終保持是那個細節精緻，創意精彩，且用戶體驗好;需要的是交互-視覺-開發三者之間是無縫合作，各個環節的周全考慮。

看完小編分享的教學之後 是不是對平面理論教程中的設計教程教學更熟悉了呢?

希望我們所介紹的 淺談視覺設計師如何讓設計效果更簡潔 這教學會喜歡

文章標題: 骨子愛創意- 淺談視覺設計師如何讓設計效果更簡潔–轉載請註明來源處

本教學分類為平面理論教程中的 設計教程相關教學

文章相關關鍵字為: 簡潔,效果,設計,如何,開發,視覺,規範,視覺設計,控件,一

本文永久連結 :淺談視覺設計師如何讓設計效果更簡潔

本文轉載自 :VIA