《Design Systems》?by Alla Kholmatova?
?閱讀時(shí)間:3分鐘
我知道你們不會(huì)看的 但我還是推薦一下這本書吧?
1?
我讀了蠻久的因?yàn)閱渭冏x英文書比較難邊帶翻譯
我讀的吭哧吭哧的
先說下簡單感受:除了哇塞我靠這么牛逼怎么做這么好設(shè)計(jì)師怎么活
當(dāng)我讀到中間的時(shí)候才知道品牌公司都有自己的設(shè)計(jì)原則和設(shè)計(jì)系統(tǒng)
大公司對(duì)設(shè)計(jì)的要求極其嚴(yán)格甚至嚴(yán)苛
就連線條按鈕投影大小字間距等都有異常嚴(yán)格的系統(tǒng)規(guī)范
他們對(duì)設(shè)計(jì)的追求非常細(xì)微多一分為多少一分為少
有時(shí)也在想自己到底是在工作 還是在干嘛
離真正的設(shè)計(jì)差之千里
2?
適合人群:3年經(jīng)驗(yàn)以上的設(shè)計(jì)師
或者準(zhǔn)備建立公司設(shè)計(jì)系統(tǒng)和設(shè)計(jì)規(guī)范的設(shè)計(jì)師
因是外文著作需要做點(diǎn)準(zhǔn)備不然一讀就放棄(英文好的忽略)
讀前準(zhǔn)備:
英文水平:4級(jí)以上
翻譯工具:Google翻譯或其他工具翻譯
瀏覽器:Google瀏覽器科學(xué)上網(wǎng)(里面有大量的外國設(shè)計(jì)網(wǎng)站需要看)
閱讀器:類似PDF(方便做筆記標(biāo)簽保存)
3?
書中有大量的資源網(wǎng)站并且也提供了DownloadUI Kit網(wǎng)站也很精美
看這些感覺就是一種精神滋補(bǔ)(科學(xué)上網(wǎng))
Aribnb DLS Atlassian? BBC GEL? ?IBM Carbon? ?Lonely PLanet Rizzo
Marvel? Office Fabric? Salesforce Lightning? ?Design System? ?Shopify Polaris
書中部分設(shè)計(jì)原則任何一個(gè)展開都是很大一部分
書中也做了Airbnb設(shè)計(jì)和TED設(shè)計(jì)之間的對(duì)比
提到最多的也是熟知的的設(shè)計(jì)原則
? large title
? large thumbnail
? more spacious layout
? a heading
? a strong call to action
? an eye-catching background (solid color or image)
? color
? interactive states
? animations
? typography
? spacing
? iconography styles
? shapes and borders
? illustrations
? photography
? voice and tone
? sounds and audio cues
Positive and encouraging tone of voice
Primarily white color palette with pink accents
Generous white space
Generally large type size with a focus on readability
High-contrast typography with proportionally large headings
Vibrant pink to blue gradient
Pink to blue subtle hover interactions
1px light-gray strokes
1px square icons with a “break”
Mostly square and occasionally circular shapes, trian- gles in promotional areas
For each category add:
Type:Specify the type of object the color is applied to, such as a call to action, a heading, a feedback message, and so on.
Example: Add a screenshot of the element, to show where color is used.
Value:Specify the hex value.
Feel:If the purpose of the color is to create a certain
mood or feel, specify that.
Examples of perceptual patterns in digital products include tone of voice,
typography, color palette, layouts, illustra- tions and iconography styles,
shapes and textures, spacing, imagery, interactions or animations, and all
the specific ways in which those elements are combined and used in an
interface.