框架在設計中的應用
原標題：框架在設計中的應用
來源：水手哥學設計（公眾號）
作者：水手哥
極限挑戰第三季第二期裡面講了很多神功，降龍十八掌、七傷拳、金鐘罩鐵布衫、吸星大法、蛤蟆神功等個個都是武林絕學，但每個神功都很厲害也都環環相剋。這些神功當中有哪些可以為我們設計師所用了，聽說學會金鐘罩鐵布衫這門神功可以在設計界橫著走……
金鐘罩鐵布衫看字義就是有一個罩子來約束你，對於字體來設計說可以是歷史的傳承，可以是字型檔的字體進行二次創新；對於圖形創意來說藝術來源於生活卻有高於生活，圖形都是要通過生活中所見進行提煉創意；對於UI界面設計來說更多的是蘋果和谷歌公司給出產品中的一系列的規範。
對於設計師來說我們既被約束著，又想在有限的體制內玩出新花樣。今天具體聊聊金鐘罩鐵布衫在設計中的應用。
01 LOGO設計
金鐘罩在LOGO設計起到的作用是塑形。
在logo設計中有一種形式是內容+造型，內容可以是文字、圖形、圖案、插畫、肖像等，造型的形式有圓形、橢圓形、扇形、正方形、長方形等。內容裡面的元素可以是表達事物的屬性或寓意，但是一個元素孤零零的顯得單一，這時候通過結合造型增加它的形式感。
02 LOGO延展
金鐘罩在LOGO延展起到的作用是保護。
LOGO造型+點線面進行延展。通過點線面在造型上進行延展，一是可以豐富畫面，二是可以提煉相關造型元素進行替換。
（ 圖片來自Plus_X ）
如上圖中logo延展中大量點線面元素和豐富的色彩對造型進行再創造。豐富了logo的形態的同時可以更好的詮釋品牌中氣質。
03 吉祥物
金鐘罩在吉祥物起到的作用是豐富形態。
在吉祥物設計中是造型+表情，吉祥物設計是採用擬人手法賦予它更多的情感，所以我們在設計時要多分析吉祥物的喜怒哀樂情感變化，這時候面部表情充當了金鐘罩角色，賦予吉祥物更多情感。造型方面我們就可以是多元化的，可以是小動畫、水果、蔬菜等一起有形態的事物。它們多採用頭像跟身體1:1的比例關係讓吉祥物更萌更加可愛。當然這是最簡單也是最有效的方法，如果我們要繪製一套優秀的吉祥物設計，在延展方面吉祥物的動作造型和場景的設計還是需要很強的手繪功底。這方面可以多看看或者臨摹迪斯尼手繪稿，裡面的造型表情都很傳神。
（ 圖片來自李舜 ）
隨著互聯網的飛速發展，在產品設計中不單單局限於傳統吉祥物的設計方法。還有微信微博社交的快速發展，一大堆表情包也加入其中，在這樣的背景下需要更加簡潔明了的繪畫方式，我把它稱之為棍棍型吉祥物。這類吉祥物設計是造型+表情+棍棍，我們把人物的四肢簡化成簡單的四個棍棍，簡單易畫，更加方便做動畫，也解決了傳統吉祥物造型難的問題。（ 知乎劉看山是個典型的案例 ）
在很多互聯網公司的產品設計中會更加簡化，只有抽象的造型+抽象的表情讓界面更簡潔傳神。並用一整套的形象貫穿所以產品之中，便於傳播的同時更容易形成自己的品牌形象。其中same就是最典型的代表。same不但有一整套的表情體系，還專門結合字體的寓意設計一整套的圖標，讓其變得更加有趣更加符合年輕人的調性。
04 圖形創意
金鐘罩在圖形創意起到的作用是借鑒。我們在圖形創意時更多的參考已有事物原型再設計的過程。
（ 圖片來自Al Power和Jimmy Palacio ）
我們在平時練習的時候總喜歡運用著名建築、著名的卡通形象、26個大小寫字母、數字等大家都很熟悉的元素進行二次創作。在繪製著名建築和卡通形象其本身就是有著名的建築師和設計師創作出來的，我們都是站在巨人的肩膀上。在字母和數字進行創作時我們更多的需要了解其結構並進行有效的分解，用設計感的元素進行替換對應的元素。
05 圖形文字
金鐘罩在圖形文字起到的作用是框架。
如上圖，我們勾勒出元素造型後，通過頭腦風暴提取相關重要的字體元素進行形狀的扭曲變化，加上字體自帶鏤空效果，整個元素就會有正負圖形效果加上配色跟紋理效果會更加出彩。
06 圖標
金鐘罩在圖標起到的作用是框架。
如上圖，早期擬物圖標設計時，需要合理的提取合理的元素進行放在蘋果規範的圖標大小內，如何合理的布置好元素之間的比例效果和細膩的光影效果還是有一定的難度。
07 UI界面設計
金鐘罩在UI界面設計起到的作用是規範。
狀態欄
導航欄
（ 圖片來自優波設計 ）
在UI界面設計中使用主流的2倍尺寸750x1334px，除狀態欄和導航欄固定高寬大小外，其他規範都可以根據產品視覺來重新定義。
iOS中文設計規範：https://ubuuk.com/ios
蘋果官方設計規範：https://developer.apple.com/ios/human-interface-guidelines/
谷歌中文設計規範：http://design.1sters.com/
谷歌官方設計規範：https://material.io/guidelines/material-design/
08 前端開發
金鐘罩鐵布衫在前端開發起到的作用是盒子拼湊原理。設計師可以把每個字體、段落、圖片、icon、組件想像成一個個帶無線條邊框的虛擬盒子，通過樣式進行把盒子合理的分配到合適的地方。
設計師了解前端重點了解頁面重構，HTML5+CSS3，簡單可以套用的裡面js/jquery腳本語言就可以了，其中學會頁面重構最最最重要的就是CSS盒子原理，內容(content)、內邊距(padding)、邊框(border)、外邊距(margin)。
再快速的了解塊級元素和內聯元素的標籤通過演css樣式進行轉換，最後學會相對定位和絕對定位，會套用開源的js/jquery腳本語言。對於設計師的我們已經相當受用了，不會涉及太深的原生開發js/jquery腳本語言，更不會涉及到三大主流前端框架React、Vue、Angular。但如果對前端感興趣的並想專行的一定要學會前後端分離的技術肯定是要會的。
09 後端架構
金鐘罩鐵布衫在後端架構中起到的作用更多的是規範和系統。程序員們的初級夢想都是想成為一名系統架構師，整個系統架構開發好了給程序員在其基礎上繼續開發對應需求。
前段時間我跟程序員聊天我說現在區塊鏈技術這麼火，你怎麼不去做這方面的工作呢？程序說：「到哪都一樣，我還是做java開發，只不過換個地方做java開發。」因為他不是做系統架構的，所以薪資待遇也差不了多少。
前段時間公司新招了一個ios程序員，他很自豪的對我說：「我們之前公司的技術總監很牛的，有時候看你們設計師設計的界面他不滿意，就會自己寫代碼寫樣式。」我說這是肯定的啊，iOS裡面的組件、控制項是多少優秀蘋果的設計師總結規範出來的，其本身就很美觀大氣，如果你的總監合理有效的學會用裡面自帶的組件控制項，出來的效果也是很美觀的。很多設計師沒有大局把控能力，相比自帶的控制項和組件它還是很完美的。
總結：
在人們追求快速高效率的方法時，在設計行業整體都在做減法的今天，我們需要金鐘罩來約束傳承，練就金鐘罩鐵布衫一門神功就已經體力不支，感覺身體被掏空了。這才是這門神功的大體架構，裡面的每個分支都可以寫出一篇很完善富有含金量的文章出來。之後我會對每個分支進行更加細緻的分析與解刨，可能還有很多系統或者知識點沒總結到，希望和大家多多交流一起完善。
TAG:學ui網mp |