一看就懂！詳解大廠UI設(shè)計規(guī)范制作步驟

上篇《超全UI設(shè)計規(guī)范，帶你了解規(guī)范設(shè)計全流程》分享了為什么必要設(shè)計語言以及設(shè)計語言包含了哪些內(nèi)容。簡單回顧下，為什么必要設(shè)計語言？對內(nèi)，保證設(shè)計團隊的同等性，給用戶的體驗同等性，提拔設(shè)計服從；對外，同一品牌符號，有助于加深產(chǎn)品在用戶心中的印象。同時設(shè)計語言設(shè)定包含了，設(shè)計原則、色彩體系、顏色體系、柵格體系、圖形、字體、投影等原則。今天來和大家分享，如何去敲定一個設(shè)計原則？

一、提取設(shè)計原則關(guān)鍵詞

1. 提取一級關(guān)鍵詞

第一步，先要去提掏出關(guān)鍵詞，這個關(guān)鍵詞怎么來，有幾種體例獲取，第一個從整個公司戰(zhàn)略出發(fā)，任何一個產(chǎn)品肯定有他的戰(zhàn)略，品牌戰(zhàn)略，商業(yè)戰(zhàn)略。舉個例子，假設(shè)我們是 eaby，公司今年戰(zhàn)略是全球化，高品質(zhì)，正品，那么這個就是一級核心關(guān)鍵詞，所有的設(shè)計語言肯定要和公司戰(zhàn)略結(jié)合起來，可以理解為戰(zhàn)略關(guān)鍵詞是整個設(shè)計語言頂部金字塔。

二、運用情緒版提取二級關(guān)鍵詞

有了一級關(guān)鍵詞后，必要去思考，那么什么樣的設(shè)計能給人全球化的感受呢，什么樣的感覺能有高品質(zhì)，正品應(yīng)該傳遞什么樣的感覺呢？此刻必要用到第二個方法就是情緒版，通過情緒版去把吻合這些關(guān)鍵詞感受的圖形詳細化。

三、高品質(zhì)特性是什么？

下圖是一組日本的花茶設(shè)計，那么在這組設(shè)計中，設(shè)計師是如何表現(xiàn)高品質(zhì)呢？

△ 首先包裝很優(yōu)美耐看，設(shè)計簡約

△ 做工精量，整個產(chǎn)品包裝，都是在富士山腳下

△ 采摘環(huán)境很透明，值得被信賴

△ 整個品茶的過程也分外讓人憧憬，很有儀式感

△ 整個的設(shè)計很完備，很有設(shè)計感在里面

通過以上案例拆解，我們能對這個高品質(zhì)的關(guān)鍵詞有更加進一步的理解，高品質(zhì)原來在情感層面是一個這么抽象的感覺，但是許多同窗會問，那么這二級詞匯也很抽象，如何靠這個來做設(shè)計，很難去理解及表達，別發(fā)急，還有下一步。

1. 高品質(zhì)設(shè)計體現(xiàn)情勢？

關(guān)于高品質(zhì)在視覺情勢上如何來表現(xiàn)了，哪些設(shè)計感覺能代表高品質(zhì)呢，這個時候就必要我們?nèi)ヌ角笠恍┰O(shè)計參考，這些案例要能代表高品質(zhì)。

△ 清晰的有品質(zhì)的圖片

△ 牛皮癬，不細膩不可取

△ 優(yōu)雅的排版和留白，筆墨清晰，雜志感受

△ 圖文密集，缺少版式不可取

△ 細膩的布局，柵格的系統(tǒng)，給人品質(zhì)感

△ 缺乏版式及設(shè)計感

△ 有設(shè)計細節(jié)的

△ 無細節(jié)不可取

△ 合理的配色，簡單清晰

△ 山寨的配色不可取

△ 設(shè)計的連續(xù)性和完備性

2. GOOD CASE

3. BAD CASE

四、設(shè)計分層

以上就是我們從一個戰(zhàn)略關(guān)鍵詞漸漸推導(dǎo)到一級關(guān)鍵詞，到二級關(guān)鍵詞，到設(shè)計手法，以及對應(yīng)設(shè)計表達，推導(dǎo)的一個全過程。

• 本能層：清晰的，有設(shè)計感的，做工細膩
• 舉動層：完美的，值得信賴的，埋頭的
• 精神層：讓人憧憬的，值得期待的

五、總結(jié)

以上也許為一個設(shè)計關(guān)鍵詞的悉數(shù)推導(dǎo)過程及到設(shè)計手法的確定，也是設(shè)計語言里面最難的部分，后面的關(guān)鍵詞也是類似的思考方法和思路，最終通過推導(dǎo)我們必要得出每個關(guān)鍵詞的情緒圖，以及對應(yīng)設(shè)計特性，最終必要在界面中展示的形色字構(gòu)質(zhì)，一個完備過程。

比如國際化，同樣通過前面思路，我們必要去思考國際化如何在設(shè)計中表現(xiàn)，去提煉出代表國際化的象征物，如地標(biāo)，國旗，郵戳，貨幣等等，包括如何在界面中融于國際化元素，以及人物和節(jié)日場景。

結(jié)語

盼望大家可以通過我這期的分享，能夠細致理解到如何從公司戰(zhàn)略層提取到核心一級關(guān)鍵詞，到二級關(guān)鍵詞，以及對應(yīng)的設(shè)計手法，對應(yīng)到形色字構(gòu)質(zhì)，大家可以依據(jù)此方法去拿你如今手上的界面去做一次系統(tǒng)化的推導(dǎo)。

最后，依據(jù)推導(dǎo)出來的原則，以及對應(yīng)的設(shè)計手法去做概念，去在界面中運用，最終完成設(shè)計語言第一步，設(shè)計關(guān)鍵詞和設(shè)計手法定義。

迎接關(guān)注作者的微信公眾號：我們的設(shè)計日記，每周分享最新設(shè)計趨勢和設(shè)計經(jīng)驗，科學(xué)設(shè)計方法。

圖片素材作者：Tran Mau Tri Tam ?