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

2018-7-30    博博

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

小小設(shè)計控 2018-07-30 09:34:38

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


小小設(shè)計控 2018-07-30 09:34:38
一看就懂!詳解大廠UI設(shè)計規(guī)范制作步驟

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

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

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

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

第一步,先要去提取出關(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è)計語言頂部金字塔。

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

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

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

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

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

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

△ 首先包裝很精美耐看,設(shè)計簡約

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

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

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

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

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

△ 整個品茶的過程也特別讓人向往,很有儀式感

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

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

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

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

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

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

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

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

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

△ 牛皮癬,不精致不可取

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

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

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

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

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

△ 精致的布局,柵格的體系,給人品質(zhì)感

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

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

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

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

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

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

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

△ 合理的配色,簡單清晰

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

△ 山寨的配色不可取

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

△ 設(shè)計的延續(xù)性和完整性

2. GOOD CASE

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

3. BAD CASE

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

四、設(shè)計分層

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

  • 本能層:清晰的,有設(shè)計感的,做工精致
  • 行為層:完善的,值得信任的,用心的
  • 精神層:讓人向往的,值得期待的
一看就懂!詳解大廠UI設(shè)計規(guī)范制作步驟

五、總結(jié)

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

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

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

結(jié)語

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

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

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





日歷

鏈接

個人資料

存檔