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

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

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

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

第一步，先要去提掏出關(guān)鍵詞，這個(gè)關(guān)鍵詞怎么來(lái)，有幾種體例獲取，第一個(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ì)語(yǔ)言肯定要和公司戰(zhàn)略結(jié)合起來(lái)，可以理解為戰(zhàn)略關(guān)鍵詞是整個(gè)設(shè)計(jì)語(yǔ)言頂部金字塔。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

△ 合理的配色，簡(jiǎn)單清晰

△ 山寨的配色不可取

△ 設(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è)全過(guò)程。

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

五、總結(jié)

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

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

結(jié)語(yǔ)

盼望大家可以通過(guò)我這期的分享，能夠細(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)出來(lái)的原則，以及對(duì)應(yīng)的設(shè)計(jì)手法去做概念，去在界面中運(yùn)用，最終完成設(shè)計(jì)語(yǔ)言第一步，設(shè)計(jì)關(guān)鍵詞和設(shè)計(jì)手法定義。

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

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