視覺設(shè)計規(guī)范（視覺設(shè)計規(guī)范文檔）

視覺傳達設(shè)計主要分為三大塊：

一、視覺要素基礎(chǔ)訓練課程。如：圖形語言、色彩語言、創(chuàng)意形態(tài)學，該部分著重訓練學生對圖形、色彩、文字等視覺要素的敏銳感知力和創(chuàng)造力；

二、平面設(shè)計類核心課程。如：品牌設(shè)計、包裝設(shè)計、書籍裝幀與版式編排設(shè)計等，訓練運用視覺元素進行平面設(shè)計綜合表達的能力；

三、多媒體、綜合設(shè)計類核心課程。如：交互設(shè)計、影像設(shè)計、動畫設(shè)計、展示設(shè)計等，突出對多媒體技術(shù)在視覺設(shè)計中的應(yīng)用訓練，強調(diào)技術(shù)和視覺設(shè)計的交叉融通。

二、UI設(shè)計師的職業(yè)要求

主要要求從業(yè)人員精通Photoshop、Illustrator、Flash等圖形軟件，

1. 負責公司產(chǎn)品在智能電視、PC端、移動端頁面/應(yīng)用的整體設(shè)計；

2. 基于用戶體驗、人機交互、圖形化設(shè)計、界面設(shè)計等前沿理論實現(xiàn)產(chǎn)品風格設(shè)計；

3. 充分理解產(chǎn)品策劃思路及理念，配合產(chǎn)品經(jīng)理和研發(fā)人員實現(xiàn)產(chǎn)品各種界面的視覺設(shè)計；

4. 建立和完善產(chǎn)品界面視覺設(shè)計規(guī)范；.

5. 根據(jù)交互設(shè)計及產(chǎn)品規(guī)劃，完成產(chǎn)品（iPhone、Android 、Web平臺App及網(wǎng)站）相關(guān)的用戶界面視覺設(shè)計。6. 配合產(chǎn)品開發(fā)中的圖形界面（GUI）設(shè)計。7. 完成產(chǎn)品相關(guān)推廣活動的專題頁面、FLASH的設(shè)計及制作。8. 與研發(fā)團隊充分溝通協(xié)作，確認可控的誤差范圍和視覺效果的最終實現(xiàn)；9. 根據(jù)視覺設(shè)計的發(fā)展趨勢及用戶研究的結(jié)果不斷優(yōu)化產(chǎn)品的圖形界面（GUI）

三、UI設(shè)計有哪些規(guī)范

高質(zhì)量的規(guī)范文檔是一個優(yōu)秀設(shè)計系統(tǒng)的代表物。我們詳實地描述每個 UI 組件的設(shè)計與代碼規(guī)范，來幫助設(shè)計師高效地作出決策，推動開發(fā)速度。編寫高質(zhì)量的文檔需要前期規(guī)劃和一系列合理的流程來輔助，付出的成本相當高。

這個系列由六篇文章組成，致力于描述編寫組件規(guī)范文檔的過程。本篇我會從目標讀者、文檔內(nèi)容、文檔結(jié)構(gòu)開始。然后會涉及案例，設(shè)計與代碼指南。這些內(nèi)容來自于我自己這些年的實踐經(jīng)驗以及社區(qū)里大家所分享的知識。

那么我以一個問題開始今天的主題：文檔的目標讀者是誰，他們需要什么樣的內(nèi)容，作為編寫者我們該怎樣組織文檔結(jié)構(gòu)來作出清晰的表達？

文檔的目標讀者

首先：你要弄清楚誰是你的文檔的主要讀者。

工程師，設(shè)計師，還有公司里的所有人！

當一個設(shè)計系統(tǒng)包含了代碼指南，工程師們顯然會是讀者。那么一個只包含了代碼指南的設(shè)計系統(tǒng)應(yīng)該服務(wù)于設(shè)計師嗎？如果文檔里只包含了設(shè)計規(guī)范而沒有代碼（如 Material Design），工程師還是讀者嗎？

在我看來，兩個問題的答案都是肯定的。規(guī)范文檔是從不同的角度來服務(wù)于多種角色的。

除了設(shè)計與工程，它還服務(wù)于其他人嗎？很有可能，特別是當文檔所在的設(shè)計系統(tǒng)已經(jīng)成為產(chǎn)品的基石時。簡短有效的介紹對于 PM（產(chǎn)品經(jīng)理） 很有價值，QA（測試） 則比較關(guān)注案例部分…等等。

規(guī)范文檔是從不同的角度來服務(wù)于多種角色的

很多設(shè)計系統(tǒng)團隊還會把自己的系統(tǒng)公開出來，在體現(xiàn)共享精神的同時也能起到吸引行業(yè)人才的作用。所以文檔應(yīng)該能夠體現(xiàn)團隊的專業(yè)與嚴謹。

文檔的主要目標是：為設(shè)計師、工程師和團隊里的其他角色服務(wù)，讓他們能夠高效地做決策。

Takeaway：設(shè)計系統(tǒng)的效應(yīng)和影響力不只覆蓋設(shè)計與工程，一個成長中的系統(tǒng)必將會服務(wù)于更多的角色。

工程師，接著是設(shè)計師，然后才是其他人

為所有角色服務(wù)并不意味著平等地服務(wù)所有角色。工程師每天會查閱 10 次或更多次文檔，他們甚至會把文檔與代碼編輯器窗口并排排列！設(shè)計師的訪問次數(shù)應(yīng)該是少于工程師的，其他角色則會更少。

所以誰是最重要的？以我的經(jīng)驗來看，設(shè)計系統(tǒng)最初就是為了工程與設(shè)計之便，由工程師和設(shè)計師建立的。即使其他角色也對其有所貢獻，但他們?nèi)允瞧我?。因此我們首先需要確保工程師與設(shè)計師的需求能夠得到滿足。

設(shè)計師與工程師優(yōu)先級最高

那么，工程師與設(shè)計師孰輕孰重呢？我最近參與設(shè)計的設(shè)計系統(tǒng)項目中都需要同時服務(wù)于兩者，為設(shè)計和代碼制作規(guī)范指南。我也在一些企業(yè)的文檔中看到了對其中一方的過多偏見，或者是有將他們的目標完全分離開的傾向（稍后我會解釋）。有很多維度需要考量：設(shè)計系統(tǒng)的目標，他們的使用頻率，內(nèi)容深度、質(zhì)量、生產(chǎn)成本，以及和他們?nèi)粘９ぷ鞯南嚓P(guān)度。

設(shè)計師 vs 工程師

Takeaway：讀者的優(yōu)先級由很多因素決定。要有預(yù)期：工程師和設(shè)計師的需求會有沖突，并盡可能地優(yōu)化和處理這些沖突。如果實在不行，就要偏向于距離最終產(chǎn)品最近的那一方，通常是工程師。這就意味著工程師優(yōu)先，設(shè)計師其次。

文檔內(nèi)容

規(guī)范文檔是連接讀者與內(nèi)容的媒介。內(nèi)容會有不同的格式或模塊，因此成本也各有差異，而你需要最終把它們編織在一起。

文檔內(nèi)容模塊：簡介和案例文檔內(nèi)容模塊：設(shè)計參考和代碼參考

抽象地來看，規(guī)范文檔的內(nèi)容通常包含以下四種模塊：

• 介紹：組件的名稱，以及一段簡明扼要的介紹。（必要）

• 案例：這個組件的各種形式，狀態(tài)，尺寸等等其他要素，比較好的做法是用代碼直接把這些展示出來，而不是不可以交互的靜態(tài)圖片。（必要）

• 設(shè)計參考：比如什么時候應(yīng)該用這個組件，允許的做法與不允許的做法，以及視覺、交互、文案方面的指南。（推薦）

• 代碼參考：包含 API 和其他實施及部署方面的指南。（必要）

不同的模塊會有不同的制作成本

「介紹」寫起來當然非常的短平快。結(jié)構(gòu)優(yōu)秀的「案例」也是值得投入成本的，并且寫起來會越來越順手。工程師也需要一個合理清晰的「代碼參考」。但是，真正有效的「設(shè)計參考」可能會非常耗費成本。

橫軸：細節(jié)的豐富程度由淺到深?？v軸：制作成本由低到高

請點擊輸入圖片描述

Takeaway：規(guī)范文檔可以包含很多內(nèi)容模塊。所以需要團隊在前期就進行充分的討論，對每種內(nèi)容模塊做出符合自己團隊和產(chǎn)品價值的判斷，再投入成本去制作。

文檔的信息結(jié)構(gòu)

設(shè)計與代碼：分開還是合并？

在實踐中，設(shè)計師往往會自顧自的發(fā)布或更新和自己相關(guān)的內(nèi)容，工程師也一樣。這樣的慣性行為會在無意中增加設(shè)計與工程的距離。所以大家需要在前期就對文檔的信息結(jié)構(gòu)達成共識。

谷歌的 Material 文檔生態(tài)就是這種距離感的代表。 Material’s design foundation 優(yōu)先服務(wù)于設(shè)計實踐, 而 Material Design Lite，Polymer Project，Android Developer’s，Material UI (built for React) 都是服務(wù)于代碼，和設(shè)計規(guī)范綁定的并不緊密。



請點擊輸入圖片描述

這種分離的狀態(tài)其實是有意義和理由的。因為 Material 是一個操作系統(tǒng)的底層系統(tǒng)，跨越了許多框架，團隊，平臺。它的復(fù)雜度在某種意義上超越了目前世界上所有的設(shè)計系統(tǒng)。但你要知道大多數(shù)的設(shè)計系統(tǒng)并不是服務(wù)于一個操作系統(tǒng)的，因此不會發(fā)展至如此復(fù)雜的形態(tài)。

對于像我們一樣的產(chǎn)品團隊來說，設(shè)計和代碼分開是符合共識的。這種做法能夠給分別為兩種角色設(shè)計符合他們需求的體驗。

組件設(shè)計規(guī)范與 API 和代碼規(guī)范分別放在兩個網(wǎng)站上。來自：Atlassian

請點擊輸入圖片描述

這種做法也有風險。隨著時間推移，兩個網(wǎng)站可能出現(xiàn)不同步的現(xiàn)象：

• 設(shè)計與代碼的分類邏輯出現(xiàn)差異（最簡單的例子就是 Loader 和 Spinner 的命名：代碼里叫 Loader，而設(shè)計里則叫 Spinner）

• 功能差異：設(shè)計規(guī)范里出現(xiàn)了代碼不能實現(xiàn)的功能，或者代碼里加入了設(shè)計里沒有考慮的功能。

你可能會覺得這樣也挺好，畢竟設(shè)計和代碼本身就是兩個領(lǐng)域。至少對于文檔的寫作者來說這種分離還是挺方便的（只用考慮自己的需求，管理自己的進度）。

但真正的讀者需要的是一個「真相的唯一來源（Single source of truth）」。如果你是一個對設(shè)計和代碼都有需求的讀者，你會發(fā)現(xiàn)自己不停在兩個網(wǎng)站間切換，兩個地方都有對你有價值的內(nèi)容，這感覺就像是在打網(wǎng)球時陷入了拉鋸戰(zhàn)。

Takeaway：要慎重地看待設(shè)計與代碼的分離。雖然一開始方便了內(nèi)容作者和發(fā)布者，但之后會有風險。這種做法也可能會在潛移默化中造成設(shè)計與工程的距離擴大。

合并內(nèi)容的兩種方案：堆疊還是切換？

例如 Morningstar Design System 是把設(shè)計和代碼放在一個頁面里，讀者就能找到完全統(tǒng)一的命名，指南，功能描述。

一個頁面之堆疊式：把設(shè)計和代碼放在一個頁面中，縱向滾動來查看。

請點擊輸入圖片描述

堆疊式的布局方式會使得頁面變得冗長。當然還有一種方式是使用 Tab 來切換內(nèi)容。

一個頁面之切換時：把設(shè)計和代碼放在一個頁面中，通過 Tab 來切換內(nèi)容。

請點擊輸入圖片描述

Takeaway：將設(shè)計和代碼混合在一起是有可能的，大家可以按自己的需求來選擇以上兩種布局方式。

按類型來為內(nèi)容做排列和編組

不論選擇那種布局方式，文檔內(nèi)容的模塊結(jié)構(gòu)和順序應(yīng)該是保持一致的：

• 簡介

• 案例

• 設(shè)計參考

• 代碼參考

其實只要把「案例」放到讀者一進來就能看到的地方，把設(shè)計和代碼參考放在一步點擊就能達到的地方，就是一個不錯的設(shè)計了。下面是幾種行業(yè)內(nèi)比較有代表性的模式：

左：IBM Carbon 模式 中：Hudl's Uniform System 模式 右：Lightning Design System 模式

請點擊輸入圖片描述

IBM Carbon 認為代碼更應(yīng)該被優(yōu)先展示，將交互用法和樣式分別放在其他的 Tab 中。Hudl’s Uniform system 把順序反了過來，設(shè)計優(yōu)先于代碼。 Salesforce’s Lightning Design System 把代碼和組件案例放在 Tab 上方，默認選中開發(fā)者指南這個 Tab，而后兩個 Tab 則被奇怪地留空了。

Takeaway：把簡介和案例放在一開始最重要的位置，接下來的模塊則沒有唯一的方案，需要大家自己做出符合自己團隊情況的判斷。

若頁面很長，則為讀者提供定位導(dǎo)航

你的文檔頁面越長，越需要給讀者清晰的認知，要讓他們知道這個頁面里會包含哪些內(nèi)容以及當前所處的位置?？v向的定位導(dǎo)航欄是個不錯的方案：一直固定存在于頁面右側(cè)，在滾動時同步追蹤位置，并且可以包含子標題。

Morningstar Design System 在文檔頁面右側(cè)設(shè)計了一個兩級的定位導(dǎo)航欄

請點擊輸入圖片描述

Takeaway：不論選擇哪種形式，最重要的是在整個系統(tǒng)中保持邏輯一致，符合讀者的預(yù)期與心理模型。

展示設(shè)計？展示代碼？還是都展示？

把設(shè)計和代碼融合，就會有讀者只對其中一個方面感興趣，他們會提出自己的意見：

設(shè)計負責人可能會問到：我能把這些代碼案例和指南隱藏掉嘛？

工程師可能會問：我能把這些和設(shè)計規(guī)范有關(guān)的文字隱藏掉嘛？

可以考慮加一個選項或按鈕來允許隱藏設(shè)計/代碼內(nèi)容。比如：

Design Only：把代碼指南、代碼片段和屬性表等等都隱藏起來

Code Only：把視覺樣式指南和文案指南都隱藏，但還是要把一部分交互用法指南保留著，這對工程師們也有用。

四、學習UI平面設(shè)計，未來能從事哪些行業(yè)？

隨著互聯(lián)網(wǎng)的飛速發(fā)展，計算機行業(yè)成為當下熱門領(lǐng)域之一，就業(yè)前景好，工資高。

UI設(shè)計可以從事的工作

1、視覺設(shè)計師：工作內(nèi)容是實現(xiàn)平面設(shè)計、企業(yè)形象設(shè)計、卡通形象創(chuàng)作等；

2、WEB網(wǎng)頁設(shè)計師：主要工作是實現(xiàn)WEB網(wǎng)站產(chǎn)品設(shè)計、元素設(shè)計，深入學習WEB端的交互設(shè)計理念；

3、電商產(chǎn)品包裝設(shè)計師：負責通過色彩搭配、設(shè)計構(gòu)圖、創(chuàng)意思路等完成電商創(chuàng)意廣告設(shè)計和店鋪專題設(shè)計。

4、用戶界面設(shè)計師：主要工作是用戶界面設(shè)計、APP設(shè)計、產(chǎn)品用戶體驗設(shè)計與AN交互動效設(shè)計等工作。

5、全棧UI設(shè)計師：主要工作是品牌視覺形象的設(shè)計，web網(wǎng)頁的設(shè)計與前端布局，移動APP的視覺設(shè)計規(guī)范與交互動畫設(shè)計，HTML5、CSS3動畫情景專題頁面的設(shè)計與制作。

互聯(lián)網(wǎng)行業(yè)目前還是最熱門的行業(yè)之一，學習IT技能之后足夠優(yōu)秀是有機會進入騰訊、阿里、網(wǎng)易等互聯(lián)網(wǎng)大廠高薪就業(yè)的，發(fā)展前景非常好，普通人也可以學習。

想要系統(tǒng)學習，你可以考察對比一下開設(shè)有相關(guān)專業(yè)的熱門學校，好的學校擁有根據(jù)當下企業(yè)需求自主研發(fā)課程的能力，建議實地考察對比一下。

以上就是小編對于視覺設(shè)計規(guī)范問題和相關(guān)問題的解答了，如有疑問，可撥打網(wǎng)站上的電話，或添加微信。

推薦閱讀：

景觀設(shè)計視覺效果圖（景觀設(shè)計視覺效果圖大全）

視覺中國照片在哪看（視覺中國照片在哪看到）

視覺廣度不足的孩子（視覺廣度不足的孩子智商高嗎-）

優(yōu)化工作流程提高工作效率（優(yōu)化工作流程提高工作效率新聞稿）

西安ktv排行榜（西安ktv排名）