詳解大廠的UI設(shè)計(jì)規(guī)范制作步驟

sky
2 評(píng)論 16911 瀏覽 98 收藏 11 分鐘

本文將為大家介紹如何敲定一個(gè)具體的設(shè)計(jì)原則,并展示了具體步驟——從公司戰(zhàn)略層提取到核心一級(jí)關(guān)鍵詞,到二級(jí)關(guān)鍵詞,以及對(duì)應(yīng)的設(shè)計(jì)手法,對(duì)應(yīng)到形色字構(gòu)質(zhì)。

上篇文章講了為什需要設(shè)計(jì)語(yǔ)言以及設(shè)計(jì)語(yǔ)言包含了哪些內(nèi)容,《像蘋(píng)果Google一樣做設(shè)計(jì)語(yǔ)言,帶你了解全流程》為什么需要設(shè)計(jì)語(yǔ)言?對(duì)內(nèi),保證設(shè)計(jì)團(tuán)隊(duì)的一致性,給用戶體驗(yàn)一致性,提升設(shè)計(jì)效率;對(duì)外,統(tǒng)一的品牌符號(hào),有助于加深產(chǎn)品在用戶心中的印象,同時(shí)設(shè)計(jì)語(yǔ)言設(shè)定包含了,設(shè)計(jì)原則、色彩系統(tǒng)、顏色系統(tǒng)、柵格系統(tǒng)、圖形、字體、投影等原則,今天來(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è)我們是ebay,公司今年戰(zhàn)略是全球化、高品質(zhì)、正品,那么這個(gè)就是一級(jí)核心關(guān)鍵詞,所有的設(shè)計(jì)語(yǔ)言一定要和公司戰(zhàn)略結(jié)合起來(lái),可以理解為戰(zhàn)略關(guān)鍵詞是整個(gè)設(shè)計(jì)語(yǔ)言頂部金字塔。

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

有了一級(jí)關(guān)鍵詞后,需要去思考,那么什么樣的設(shè)計(jì)能給人全球化的感受呢,什么樣的感覺(jué)能有高品質(zhì),正品應(yīng)該傳遞什么樣的感覺(jué)呢?

此刻需要用到第二個(gè)方法就是情緒版,通過(guò)情緒版去把符合這些關(guān)鍵詞感受的圖形具體化。

二、高品質(zhì)特征是什么?

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

▲首先包裝很精美耐看,設(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é),但是很多同學(xué)會(huì)問(wèn),那么這二級(jí)詞匯也很抽象,如何靠這個(gè)來(lái)做設(shè)計(jì),很難去理解及表達(dá),別著急,還有下一步。

2. 高品質(zhì)設(shè)計(jì)表現(xiàn)形式?

關(guān)于高品質(zhì)在視覺(jué)形式上如何來(lái)體現(xiàn)了,哪些設(shè)計(jì)感覺(jué)能代表高品質(zhì)呢,這個(gè)時(shí)候就需要我們?nèi)ふ乙恍┰O(shè)計(jì)參考,這些案例要能代表高品質(zhì)。

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

? 牛皮癬,不精致不可取

? 優(yōu)雅的排版和留白,文字清晰,雜志感受

? 圖文密集,缺少版式不可取

? 精致的布局,柵格的體系,給人品質(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ì)感的,做工精致
  • 行為層:完善的,值得信任的,用心的
  • 精神層:讓人向往的,值得期待的

四、總結(jié)

以上大概為一個(gè)設(shè)計(jì)關(guān)鍵詞的全部推導(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>

五、最后

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

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

#專欄作家#

Sky,微信公眾號(hào):我們的設(shè)計(jì)日記(ID:helloskys),設(shè)計(jì)交流可加微信:hellosky678,人人都是產(chǎn)品經(jīng)理專欄作家。支付寶體驗(yàn)設(shè)計(jì)專家,阿里巴巴天貓?jiān)O(shè)計(jì)專家;10年知名互聯(lián)網(wǎng)公司設(shè)計(jì)經(jīng)驗(yàn),對(duì)于產(chǎn)品從0到1、品牌定位、金融產(chǎn)品、設(shè)計(jì)規(guī)范、運(yùn)營(yíng)規(guī)范、大促等有豐富實(shí)戰(zhàn)經(jīng)驗(yàn)。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. Xd

    回復(fù)
  2. 好看的數(shù)字鍵

    回復(fù)