lesson 2 | Typography


這篇主要是講排版,就是在你看網(wǎng)頁、博客、論壇這些的時候,注意文字的字體、行距、重點標出等是否合乎邏輯,以及易讀性。

如何利用markdown清晰、準確地表達觀點,版式排列合乎邏輯,美感同時也很重要。

哈哈哈!感覺在講平面的知識了。

發(fā)現(xiàn)一句很喜歡的話:

A picture may be worth a thousand words, but you have to know a thousand words to replace it.


Dive Into Typography

The basic of font

  • 基本概念
    1、Size(大?。?br> 2、Ascender(上部)
    3、Descender(下部)
    4、Counter(計數(shù)o,p這些)
    5、X Height(高度,不含2,3)

然后還有一些字距、對齊方式(左對齊、右對齊,居中等)、襯線和非襯線等。

推薦常用11~12號字體,正確運用粗體和斜體,以及輔助顏色來進行強調(diào)。

忽然想起了喬布斯那段在斯坦福的演講,輟學(xué)后仍舊在學(xué)校學(xué)習(xí)完了有關(guān)字體的課程,多年以后設(shè)計Mac時,才都把這些曾經(jīng)的結(jié)合在一起,因此Mac才擁有了這么漂亮的字體。(大致意思就是這樣..具體已忘記)

kerning Game(字距游戲)

是不是每章都有個小游戲!純靠眼力分數(shù)好低...冬天手僵!


Better web typography in 13 simple steps(網(wǎng)頁上字體排版的13個步驟,或者說技巧,涉及到一些html和css知識看不太懂)

  • Find out what your fonts can do
  • Subset cleverly
  • Figuring out numerals(弄清楚數(shù)字)
    一套字體可以有多種數(shù)字組合,數(shù)字也是文字中重要的一部分,也要注意使用的地方和場合。
  • Don’t fake styles
  • But when you do, fake well
  • Be careful with copy-pasting text
    這個確實是,直接復(fù)制的時候容易出差錯。每次都需要復(fù)查才行,直接復(fù)制md格式會稍微好一些。
  • earn your HTML entities
  • Quote correctly(正確引用)
  • Know your dashes(知道你的重點)
  • Define relationships, not absolute dimensions(活用排版吧)
  • Take control over line breaks
  • Space with care(空格)
  • Going further

還要思考一些除了形以外的東西,字體含義等。


The Amazing New Mobile Web

UX Design Guidelines For Smartphones

  • 移動設(shè)備帶來的限制
    1、形式限制
    2、輸入限制(各種指令)

3、工藝限制(屏幕啦,電池這些也會限制交互的設(shè)計)
4、數(shù)據(jù)傳輸和價格

一般設(shè)計的慣例

  • 移動端優(yōu)先
    本來就是移動端為主嘛,從移動端出發(fā)去設(shè)計,出發(fā)點。
  • 行為和原型
    就是兩大系統(tǒng)的設(shè)計指南吧,ios和android,同時還要根據(jù)用戶的期望,不能完全創(chuàng)新。
  • 鼓勵創(chuàng)新
    盡可能在保證體驗的情況下,多去創(chuàng)新,提升效率。
  • 提供及時反饋鏈接
    相當于用戶調(diào)研了,不斷糾正中前進。

響應(yīng)式網(wǎng)頁設(shè)計(RWD,Responsive Web Design)

集中創(chuàng)建頁面的圖片排版大小,可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境(系統(tǒng)平臺、屏幕尺寸、屏幕定向等)進行相對應(yīng)的布局。

意思就是可以根據(jù)設(shè)備來進行網(wǎng)頁的布局的調(diào)整,是自動的,直接識別移動設(shè)備!

技術(shù)手段就是:彈性化和響應(yīng)式圖片,頁面布局根據(jù)設(shè)備來調(diào)整,圖片也隨隨之調(diào)整分辨率。

這篇有好多技術(shù)內(nèi)容,看不懂....


Tools


一些UI設(shè)計工具推薦,挺多PS的,本身知道點,PS最終重要的一部分也是管理了,不僅僅只是做~


Typography in Product Design

就是強調(diào)文字排版在產(chǎn)品設(shè)計、網(wǎng)頁設(shè)計中的重要性,很多具體的內(nèi)容實際是屬于平面的知識。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,206評論 1 92
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,366評論 25 708
  • Swift版本點擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 26,325評論 7 249
  • 《最真實的你》 你的模樣 看起來有模有樣 卻是個假象 你的面具 看起來冠冕堂皇 卻令人荒唐 你的性子 看起來理所應(yīng)...
    詩人安閱讀 227評論 0 0
  • 從上個周五開始,開始有意識地養(yǎng)成一種習(xí)慣,早睡早起,每天盡量9點半到10點準備睡覺,早上5點半起床。 這個周因為想...
    花手鞠閱讀 397評論 0 0

友情鏈接更多精彩內(nèi)容