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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

△ 牛皮癬，不細(xì)膩不可取

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

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

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

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

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

△ 無細(xì)節(jié)不可取

△ 合理的配色，簡單清晰

△ 山寨的配色不可取

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

2. GOOD CASE

3. BAD CASE

四、設(shè)計(jì)分層

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

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

五、總結(jié)

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

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

結(jié)語

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

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

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

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