<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 想創造一套自己的視覺語言,要從哪幾個方面入手?

    2018-11-9    濤濤

    如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

    我們使用語言與人進行溝通,傳達信息,記錄內容,而視覺語言也發揮著類似的作用。從色彩到排版樣式,從插畫到品牌構建,視覺語言同樣承擔著類似的功能,它和傳統的語言有著類似的特征包括結構化和溝通功能。

    所以,視覺語言也是規范化的,標準化的,它足夠自由,也保有約束。視覺語言本身也可以具備足夠明顯清晰的特色,就像每個人的表達方式和口音一樣,這使得視覺語言本身可以強化和凸顯品牌特色。那么想要創建一套屬于自己的視覺語言,可以從下面的9個方面入手。

    1. 構建品牌獨有的配色方案

    我們總是說,色彩和形體是用戶第一眼最快注意到的東西。配色方案的視覺表現力最強,這使得配色方案成為視覺語言中辨識度最高的組成部分。配色方案本身需要具備一定的獨特性,確保它整體上能夠讓人記住,區別于其他,品牌不至于在繁雜的互聯網世界中迷失,也不會讓用戶無法記住。

    另一方面,配色方案應該具備良好的兼容性,能夠調和品牌不同模塊,比如網站、APP、社交媒體、包裝、名片等。

    配色也應該體現品牌的價值。想想麥當勞的配色吧,黃色和紅色為主。這兩種色彩本身能夠觸發幸福(黃色)和饑餓(紅色)的感覺,兩者搭配加上經典的金拱門的LOGO,麥當勞的視覺識別度可以說是相當高的。此外,麥當勞旗下的許多其他的設計,也是在這個配色的基礎上構建的。

    2. 構建排版的層次結構

    排版層次結構的構建,和選擇字體同樣重要。不同的排版層次,能夠給人截然不同的感受,清晰還是粗糙,雅致還是有趣。在排版的層次結構上,并不存在對錯,更多需要考慮的是合適不合適,風格和感受上的一致性。

    當然,不同層級的信息,在排版層級上還是要有比較清晰的體現的,大小疏密對比度不足,會難以讓用戶感知到內容之間的重要性的差異。

    以 Airbnb 為例,網站的排版有著清晰的層次結構,字體的大小、字重、間距和配色都已經標準化了。相應的,給人的體驗也始終保持著應有的一貫性。

    3. 建立柵格來規范內容之間的空間關系

    視覺元素之間的位置關系,和它們本身的設計是同等重要的。如果你希望整個設計在細節上是清晰明確的,那么柵格會給你想要的。

    FreeCodeCamp 對此有很明確的描述:

    柵格賦予了UI界面元素以模塊化的清晰結構,這使得整個設計團隊能在此基礎上更好地合作。這使得產品能夠快速清晰地輸出到不同的平臺上。如果你是基于某個想法來構建概念設計,那么這種方法更加實用有效。

    簡而言之,柵格讓視覺呈現的復雜度降低了。

    4. 創建組件庫

    從按鈕、圖標再到卡片,你應當創建出一整套可用的、風格一致的UI組件庫。

    同樣功能的控件,在頁面不同的地方、或者不同的頁面上有著截然不同的風格,是讓人迷惑而糟心的。一個好的組件庫,應當包含全部常用的UI組件,以及針對 iOS 和 Android 平臺所適配之后的UI組件。雖然構建組件庫本身的工作量并不小,但是在完成之后,能讓后續的工作事半功倍。

    5. 強調圖片的風格和特征

    在諸多圖形化的元素當中,圖片和插畫是視覺性最突出的元素,這也是整個視覺語言當中最重要的因素之一,因為它從某種意義上是和品牌關系最緊密的素材。

    構成視覺語言涉及到圖片素材的方方面面,構圖,色彩,濾鏡,甚至相關動效的細節。

    下面是 Smashmallow 中的網頁設計,即使它們并不是同期設計也不是服務于相同的功能,但是很明顯插畫所采用的視覺風格是一致的,并且每幅插畫當中都使用了共同的元素:熱氣球。這一元素和品牌本身是有著緊密關聯的,而用戶也可以從這些插畫圖片的內容,迅速意識到品牌本身的一些概念。

    6. 為動效設定規則

    動畫效果同樣是要遵循一些規則的。是快速移動還是慢速移動,是懸停觸發還是自動運行?這些動效的運動規則其實是有著明顯的視覺識別度的,就像日漫和美漫在視覺和運動規則上存在差別一樣。

    就像下面這個來自Dribbble 的動效,它大體上做著勻速的圓周運動,速度適中,其中有些元素并沒有完全按照圓周運動。那么想想看,是否所有的做圓周運動的物體都和它一樣呢?它們是否會帶來不一樣的視覺觀感呢?

    7. 讓視覺和文本內容匹配起來

    視覺語言并不是只涉及到視覺元素,文本并不是與之割裂的,在設計的時候,兩者需要合理地配合,在體驗上達成一致,傳達一致的信息。

    在下面的 Steffany 這個網站當中,整體設計呈現出非常明顯的女性化的特征,文本內容在表達方式和調性上和整體的視覺語言保持著一致,并沒有出現兩者沖突或者競爭的狀況。

    8. 可信且可靠

    視覺語言只有在用戶接納的情況下,才會地發揮作用,它要給人可靠的感覺。所以,整個視覺語言需要和你的品牌定位、氣質表里合一,而不能讓設計和產品、企業的氣質割裂開來。

    你能想象沒有主角的芝麻街會是怎樣的一種氣場么?

    整個品牌和視覺形象都是圍繞著 Big Bird 和 Elmo 等角色建立起來的,每一個細節的設計都是圍繞著這些角色來創建的。注意網站中角色和其他視覺元素之間的映射關系,它們讓用戶清晰地感知到角色和整體設計之間的關系是表里如一的,這使得整個網站的設計更容易為用戶所接受,視覺語言在此發揮了作用。

    9. 落實到具體標準文檔當中

    整個視覺語言在構建起來之后,需要保持各方面的一致性,在具體設計的時候,則得有一份詳實具體的設計文檔供整個設計團隊和利益相關人員,作為參考。所以,完成整個設計之后,將整個視覺語言相關的內容和素材制作成設計風格指南,和整個品牌的設計規范統一到一起。

    藍藍設計www.skdbbs.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計  圖標定制  用戶體驗 、交互設計、 網站建設 、平面設計服務

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 人妻少妇乱子伦精品| 久久成人精品视频| 成人国内精品久久久久影院| 亚洲精品国产精品乱码不卡√ | 99热这里只有精品国产66| 国产精品美女一区二区视频| 国产精品视频永久免费播放| 久久亚洲av无码精品浪潮| 久久久久久国产精品免费免费| 8x福利精品第一导航| 51国偷自产精品一区在线视频| 国产精品亚洲产品一区二区三区| 国产亚洲精品激情都市| 欧美在线精品永久免费播放| 欧美日韩在线精品一区二区三区激情综合 | 亚洲av无码国产精品夜色午夜| 香蕉久久夜色精品升级完成| 精品久久久久国产免费| 中文字幕在线亚洲精品| 久久棈精品久久久久久噜噜| 日韩精品成人亚洲专区| 精品国产乱码久久久久久郑州公司| 999国内精品永久免费观看| 亚洲精品一品区二品区三品区| 日本精品少妇一区二区三区| 8050免费午夜一级国产精品| 国产短视频精品一区二区三区| 精品国产三级a∨在线欧美| 无码精品人妻一区二区三区中| 亚洲?V乱码久久精品蜜桃 | 久久久久99精品成人片| 国产精品乱码一区二区三区| 亚洲国产精品国产自在在线| 精品无码人妻夜人多侵犯18| 欧美久久精品一级c片片| 九色精品视频在线观看| 国产精品JIZZ在线观看老狼| 99热亚洲精品6码| 国产日韩高清三级精品人成| 国产成人精品免高潮在线观看| 高清日韩精品一区二区三区|