[ 平面理論教程 ] 淺談視覺設計不懂業務時如何着手設計- 設計教程 - 骨子愛創意

教學主題: 淺談視覺設計不懂業務時如何着手設計

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

今天的這個教學主題是: 淺談視覺設計不懂業務時如何着手設計

這教學的重點為這幾點 [ 設計,着手,如何,業務,視覺,產品,交互,規範,輸出,視覺設 ]

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

本文重點

作為一個視覺設計師，能熟悉產品的信息架構、界面邏輯、元素所指，視覺表達能直觀清晰，讓用戶使用產品時、體驗時認同它、併產生愉悅即是成功。

作為一個視覺設計師，能熟悉產品的信息架構、界面邏輯、元素所指，視覺表達能直觀清晰，讓用戶使用產品時、體驗時認同它、併產生愉悅即是成功。

相信很多視覺設計師會有這樣經歷，當接觸到一個新的項目;如果是熟悉業務類型產品，設計起來輕鬆熟絡，如果是一個陌生的業務類型，則需去摸索與嘗試，找到合適的設計定位與視覺風格。當視覺對產品業務不熟悉時，視覺效果是出來了卻漏洞百出。

1、交互會問：上下兩個表格為什麼用線分開?兩個表格均指index trend，分開后的視覺效果會更好嗎?

2、前端會問，以下按鈕是左右無限循環嗎?還是說左右只能按一個?還有它的不可用狀態又是什麼?

3、在交互上此內容是有翻頁效果，怎麼視覺效果上沒有呈現?

4、下面幾個折線圖是屬於上面對應所選中的指標，視覺上邏輯感覺不對呀?

5、上傳包用圓環圖方式呈現，那幾十個上傳包豈不是幾十個圓環圖，還是進度條好點吧?

不熟悉產品業務，視覺從框架結構到細節跳轉都經不起推敲;缺少對業務探究過程與對每個細的深思熟慮，用戶體驗會好么?作為一個視覺設計師，在設計開始前-設計過程中-設計結束都需花心思與時間去了解產品業務，統籌性的輸出。能熟悉產品的信息架構、界面邏輯、元素所指，視覺表達能直觀清晰，讓用戶使用產品時、體驗時認同它、併產生愉悅即是成功;而這一過程是需要花心思與技巧的，下面一起分享一下其過程(主要指PC類業務)。

一、從熟悉業務系統開始

不懂業務流程視覺同學拿到交互稿一看，框架結構複雜、海量的信息內容、80%的專業術語與量詞都是沒聽過的;怎麼辦?

先找se/產品經理看需求文檔，看不懂沒有關係，起碼先對需求混個眼熟;接着獨自開始熟悉交互稿流程，大概了解產品的業務邏輯與核心場景，心中有個路線;

試着理順那繁雜的流程，記錄不明白的點;

再找交互設計師對稿從頭到尾聽講一次，過程中不懂的即問;

在大司很多時候過40頁的tob類交互稿需要2小時,更複雜的可能是一個上午的時間。有時候toc業務產品到tob業務產品系統，其繁雜程度就像玩遊戲通關，過一個級別難度高一點，等通關完畢遊戲順利結束;你準備好逐一晉級了嗎?

二、系統且有目的了解過程

上面講到視覺設計師熟悉交互稿過程中，將不懂的步驟和細節問題記錄下來，再與交互設計師對稿拉通，講解交互邏輯。這裡具體需要理清的內容包括以下幾點：

1、產品的類型(toB or toC產品)/ 定位風格/核心功能，心中有個大致的方向;

2、布局方式(上導航下內容、左導航右內容等)，是否看到了讓用戶清晰知道自己所在的信息結構中的位置，深度與廣度之間合理性，能否找到頁面跳轉的快捷入口，每一個頁面都能清晰了解位置所在則上下鏈接;

3、了解業務框架邏輯與流程，正如《用戶體驗要素》的框架層，整體界面設計、導航設計、信息呈現設計，因為到了這一步，需要看到真正能呈現給用戶看到的東西，確定其功能範圍和頁面各個模塊的層級關係;

4、頁面承接關係(如：點擊、反饋形式、鏈接、跳轉、下鑽、彈出框、tips等);

5、細節控件的狀態(如：焦點/默認狀態、可以/不可用狀態、點擊/非點擊狀態、默認/鼠標經過/選擇狀態、默認/放大狀態、停止/開始狀態);

6、理清以上內容后，則開始挑選典型頁面，or是否全量輸出視覺頁面;

三、有根據的理性思考

以上步驟做完，則對交互有了一個較為大概的思路，即使不是100%清晰但也有了一個可以發散的視覺設計方向，接下來就是視覺設計開始的籌劃。

1、產品定位后的確定視覺風格方向

視覺風格的思考，即《用戶體驗要素》表現層，視覺設計和內容優化;開始設計是有意思的，商業需求的了解和用戶的目標的認清才能做出合理的設計，表現是最終產品氣質的體現。如是toB類產品或許是嚴謹的/數據的/理性的/視覺表現力應該有所收斂的;or toC類產品應該是感性的/色彩較為豐富的/圖形化的/生動的…

2、是否有設計規範的？

該業務產品的設計是否要求根據現有的指導性設計規範來進行?100%遵循規範?or80%?還是細節控件?還是說不需要遵循規範，只是統一風格即可?由於每一個產品的設計定位與思考邏輯都是不一樣的，基於當前的設計規範是否適用滿足與支撐現業務產品的視覺設計，都需理清楚。如下為某個控件的視覺規範示意：

記得來大司接觸的第一個設計項目是平台管理類業務產品，且基於現有的設計規範——AgileUI進行設計。在設計之前需要花時間逐一去熟悉規範和理解規範，並在規範的基礎上進行視覺輸出。

3.運用規範來指導設計，存在它的兩面性

設計規範一般是具有指導性意義，且設計人員進行設計時必須遵守規範;設計規範具有統籌性作用，是可用性原則和審美常識下避免犯錯的方法，可保持設計印象的延續性;但運用規範同時也存在它的雙面性。

優點：

視覺設計輸出的效率高，出錯性少;

高效率的輸出，利於項目的快速推進;

基於以往的規範經驗，開發難度小，技術可實現性強;

版本輸出時間成本低，項目迭代次數快，項目成本相對較少;

缺點：

視覺設計師的設計水平發揮收到限制;

對設計師的挑戰度低，一直遵循規範進行設計久而久之會感到枯燥，想打破這種設計模式;

因此，在項目中遇到設計規範需要遵循時，請在有限的空間中盡量發揮自己的設計才華,從細節處致力用戶體驗的提升。

四、經過前期熟悉、了解、思考、定位后，則開始主體視覺的風格預言

1、先確定視覺的分辨率

即我上一篇文章提到“設計啟動前了解多端的適配情況(分辨率/屏幕精度)，綜合考慮優先出什麼分辨率”。打個比方，如果是pc的話，是固定一種尺寸大小(如設計資源分享網站酷)，頁面大小是否與現今門戶網站一樣的分辨率?還是一套響應式的設計，自適應於1680or1920的屏幕?(舉兩個自適應的例子蘋果官網和騰訊的isux)。

2、分辨率需與交互共同商議

分辨率問題，請不要輕視之，與交互一商議。別輸出了十幾個寬為1330度分辨率頁面后，交互再來告訴你業務需求固定分辨率是1440!那麼十幾頁視覺頁面需要重新調整，有卡片呈現則需要重新計算卡片大小比例等，頁面元素控件之間的位置也需重新調整，即浪費時間也耗了精力。

3、細節問題記錄下來，再跟蹤，澄清

在具體深入設計的時候，肯定會遇到更多之前沒遇見的細節問題，這需要視覺設計的適時紀錄，逐一找交互澄清問題。打個比方：如卡片上的標題文字，一開始視覺效果設計的是智能放下一行中文字，那麼具體數據或英文版本時是兩行怎麼解決?還是需要預留兩行的空間?還是顯示不下用“…”顯示?解決辦法是：不確定的地方先找交互設計勾兌的真實場景;如果是確定文字會有兩行的情況，或是英文版標題時放不下，設計預留位置則需考慮兩行的方式，最終視覺效果應改為兩行文字的呈現，如下圖所示：

視覺設計在出稿過程需要與交互針對視覺每一個細節進行考慮並商榷，並敲定。含糊通過的話，如以上的情況在10個視覺頁面都有，那麼最後交付時再發現此問題，則需要改動十個頁面的視覺。所以，盡量的提前關注細節、溝通解決，規避問題，提高輸出質量。

4、初次評審

規範的遵循，組件的合理利用，可以增加視覺輸出的合理性與效率。視覺典型頁面出來后，組織se(產品經理)、pl、交互、視覺、開發可以進行初次評審，目的是確定產品視覺風格，以及後續設計方案的可行性;如果第一次視覺設計風格已經敲定，那麼後續沿着風格進行即可;否則，視覺設計師則再進行視覺風格的探索-設計-評審-定稿-方能開始後面設計。

五、講究輸出細節讓視覺設計有序進行

當視覺設計風格敲定后，後續的設計則按計劃行事，推進項目的進程，但輸出過程的細節也需要值得關注。

1、分模塊/按優先次序鋪量輸出，定期進行視覺評審;讓交互直觀指向問題，視覺跟進與迭代輸出;

2、輸出頁面命名的規範性/與交互一一對應拉通，形成合格的交付文檔，在這裡可以展開為以下幾點：

可以建立視覺頁面輸出跟蹤表，交互整理輸出條目，並進行編號;視覺跟進表格，完成一個勾選一個，形成可預見的文檔輸出;

視覺源文件psd文檔一一對應視覺頁面png文件，避免一個psd對應多個png的情況;其他設計師、前端或開發拿到文件時也是清晰瞭然;

視覺規範指導開始時，規範輸出邏輯保持與開發邏輯的一致性。

六、結語

作為一名視覺設計師，了解產品、熟悉業務性質，避免輸出一些沒有意義的設計，讓頁面中的每一個設計元素傳達具有準確含義;在視覺設計前主動投入學習成本，看懂交互，做好充足準備–因為，懂業務是體驗的基礎。

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

希望我們所介紹的 淺談視覺設計不懂業務時如何着手設計 這教學會喜歡

文章標題: 骨子愛創意- 淺談視覺設計不懂業務時如何着手設計–轉載請註明來源處

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

文章相關關鍵字為: 設計,着手,如何,業務,視覺,產品,交互,規範,輸出,視覺設

本文永久連結 :淺談視覺設計不懂業務時如何着手設計

本文轉載自 :VIA