如果要設計產品或開發界面，我們通常會需要風格相同的圖標，若無法自行繪制或不希望付費購買也有很多替代方案，本文要推薦的「Basicons」是一款基礎、簡單的圖標設計，可用于產品開發設計，這套圖標一共收錄186種圖案，同時提供.svg向量圖格式可一次打包下載，利用Basicons界面快速預覽圖標，也能切換不同尺寸下的呈現樣式，包括12px、16px、24px和32px四種大小和1px、1.5px和2px筆觸粗細，可以快速下載圖標圖案或取得源碼。
Basicons也有一個內嵌（Embed）語法產生器，能產生帶入圖標圖案的JavaScript語法和HTML程式碼，如果要獲得更好的效能，建議直接從網站一次下載所有圖標，再依照需求使用即可。這套圖標集以MIT授權方式釋出。（即可以免費使用、修改、出售，附上協議即可）
使用教學
STEP 1
開啟Basicons 從首頁就能預覽完整圖標圖案，這套圖標特色是以非常精簡、干凈的線條繪制而成的圖形，每個圖案下方會有名稱，應該能夠很快速聯想到圖標代表的意思（否則就失去圖標的意義…），可以稍微預覽一下看看自己需要的圖案有沒有列在上面，依照說明，Basicons 每周都會更新加入新的圖案。
STEP 2
從右側的「Customize」自訂選項可以調整圖標尺寸、線條粗細，調整后會直接呈現于左側。
STEP 3
點選要下載的圖標后再按下右側的「Download」就能下載.svg圖標格式（或是從上方點選Download All將所有186個圖標完整下載），如果想直接取用SVG原始碼的話可點選「Copy SVG」復制程式碼。
除此之外，Basicons 還有提供直接嵌入的JavaScript 鏈結和原始碼。
文章來源：優設 作者：Pseric
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一直有很多朋友會問一些關于移動端實現動效的方法，平時也會給大家做一些解答，但是可能沒有那么系統性，這次抽點時間總結歸納下這方面的內容，跟大家分享下我日常設計中是如何完成動畫實現的。
設計輸出的方式大概可以分為位圖和矢量兩種，與常規的圖片輸出并無太大的差異。位圖方式：PNG序列幀、APNG、GIF；矢量方式：Lottie、SVG動畫。
當然除了以設計提供的方式之外，還可以設計完成好demo，開發通過代碼進行實現例如：javascript直接實現、SVG（可伸縮矢量圖形）、CSS3 transition、CSS3 animation、Canvas動畫、requestAnimationFrame由于超出個人能力范疇就不展開講了。
實現動畫，首先還是得了解有哪些工具可以制作及合成相關的動效，我日常主要使用的工具有Principle、AE、bodymovin插件、iSparta等軟件。另外最近準備學習一個新的專門制作svg動畫的軟件-KeyShape。
接下來講解下各個軟件輸出對應格式的方法，實際上操作并不會太難，動效本身更重要的還是在于創意本身，因此當你把握了這些方式之后可以考慮進行創意設計。
由于GIF文件多種工具都可以輸出，這里就不再作詳細說明
1. PNG序列
具體如下視頻
2. APNG
如上導出到PNG序列幀，拖拽到iSparta軟件中，合成即可。合成時可以選擇幀率、循環次數（0為無限循環）、導出質量等。如下視頻
3. Lottie
更多Lottie相關可以前往https://lottiefiles.com/學習，里面有豐富等Lottie動畫效果和一些插件下載，去研究下吧
4. SVG動畫
建議大家自己下載軟件后嘗試
5. 格式大小比
通過試驗幾種格式的大小大概是排序依次為：PNG序列>APNG>GIF(質量較差)>Lottie / SVG，json文件和SVG動畫文件比較接近，因此可以根據實際考慮決定即可，GIF雖然可以壓縮到比較小，但是本身圖片質量也較差，因此建議慎重考慮。
動效在UI設計中的應用場景很多，這里梳理了一下，之前我在項目中嘗試過的動效，給大家分享下一些案例，希望可以對大家有所啟發。
學習用什么工具導出什么格式的文件只是第一步，更重要的還是如何制造出一個有創意的動效，因此不要過于強調工具，更多應該培養自己思考設計的習慣。
文章來源：優設 作者：ID設計站
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
在今天的 UI 設計領域，由扁平化設計風格占據主導地位，已經是無可辯駁的事實了。扁平化應用除了提升用戶獲取信息的效率外，對設計師而言就是設計的難度大大降低了。
一個界面的 UI 視覺元素，僅僅只需要圖片素材、矢量圖標、幾何、文字，UI 設計師的工作僅僅是對內容進行組織和排版，涉及到繪制原創的也僅僅只有少量的圖標（大多數人還畫不好）。
這種狀態持續了很多年，看起來歲月一片靜好。
但是，這兩年市場發出了一些不同的聲音，那就是打破純扁平風格的 UI 風格、元素開始越來越盛行了。
比如新擬態風格在年初炒了一波熱度，各大平臺和公眾號都鋪天蓋地的發文和介紹，介紹它的設計理念和設計方法。
還有就是以餓了么、美團為首的國民級應用在主頁顯眼的位置里使用極具識別性的擬物圖標，引起設計圈的熱議。
首先講講新擬態設計，之所以之前只字不提，是因為我對這個風格實在沒什么好感，有種對純擬物借尸還魂的味道，且它的樣式對于信息密度高的應用是完全不適用的，只能活在飛機稿里。
而國內大型應用開始在實際項目中上線擬物圖標，意義就不一樣了，證明這樣的設計是經過幾個大廠團隊認可，且有共識的。
當然，這并不因為大廠用了就無腦推崇。而是純扁平的設計已經越來越難滿足部分需要強視覺效果的頁面設計了。
今天的互聯網和過去不一樣，用戶的增長留存不再是過去一樣通過裂變和口碑完成，一個產品只要認真打磨體驗、功能就能獲得用戶的青睞和駐留。用戶的精力時間是固定的，而互聯網產品又層出不窮，佛系的等待用戶臨幸是沒有出路，這種現狀也被稱為互聯網的下半場。
佛系不行，當舔狗更不行（成本太高），所以今天大型產品都在對待用戶的態度都選擇更具更具侵略性的霸道總裁人設。不僅是用色飽和度越來越高，運營活動越來越密集，廣告和強提示也越來越多。比如剛打開了三個應用，進入的首頁大家自己意會……
有點扯遠了，回到話題上。在這種掠奪用戶注意力的思路指引下，再做所謂的性冷淡、大留白、極簡風就不會合適。當對扁平的視覺效果已經開發到極限以后，那么進一步在一些細節處應用擬物就成為必然的選擇。
而擬物的應用并不可能鋪設到整個應用中去，因為完全擬物化的設計降低信息瀏覽效率是必然的，所以它只適合做局部的視覺強化，來加強用戶對特定區域的感知。
最常見的需要被凸出的要素，就是首頁中應用的快速入口圖標、分類圖標和底部導航欄圖標了。這些區域長期受運營活動支配，相信大家已經很習慣了。
只是，這些圖標開始在脫離運營活動的狀態下，也開始使用非扁平模式，那就不再是運營設計師的工作職責，而是 UI 設計師們繞不過去的檻了（知識盲區）！
且除了 APP 外，其它領域對于擬物設計的需求也會開始逐漸提升，尤其是目前越來越復（fu）雜（kua）的大屏數據展示、車載界面、定制系統等等。
作為新世代的 UI 設計師，多數人對擬物的設計可以說是完全空白的狀態，所以是時候要重拾擬物設計這個傳統藝能了。
前面我有提到，擬物主要應用在關鍵的圖標上，但應用的擬物風格并不是過去我們追求的那種極其真實、復雜的擬物，而是經過一定簡化、抽象后的擬物 —— 輕擬物。我們要先來明確一下輕擬物到底是什么。
首先我們看看，過去優秀的擬物圖標和設計案例，它不僅表現元素本身的光影、透視、構造，甚至會非常完整的表現物體表面的材質和肌理。
這種圖標單看起來確實很好看、細致。但是，把它丟進我們當前的頁面中是非常違和的，因為它們細節實在太多了，而且畫起來非常耗時間，不利于項目整體的推進。
所以為了符合畫面的質感，又要考慮項目效率，輕擬物這個概念開始被提出和應用，作為一個折中的解決方案。
它和純擬物設計的共同點在于，也表現光影、結構、透視，但它盡可能精簡了輪廓的復雜度、肌理和層級，呈現出更概念化、理想化、易于辨識的擬物圖形。
所以，我們主要去學習的內容是輕擬物的設計方法，而不是徒手畫照片（這個可以緩緩）！
而輕擬物雖然 「輕」，但它依舊也還具備擬物的基本特征，是有實體質感的。但是扁平從插畫到圖標設計經過多年的改版，有各種嘆（hua）為（li）觀（hu）止（shao）的設計，應用大量的漸變、投影、模糊的效果，比如下圖案例。
這在我們之前圖標的系列干貨中有提過，這類設計是面性圖標的進階版，它們依舊屬于扁平風格的范疇之內，不能和輕擬物劃上等號。
所以，先掌握這些概念，到下一篇中，我們就會展開具體的技法講解和演示了。
對于這幾年才開始學習 UI 設計的新手來講，擬物已經變成一個很陌生的事物，這對行業來說是比較悲哀的一件事。
因為擬物的設計不僅僅是畫圖標而已，對它的學習可以全方位的提升設計師的基礎素養，不僅包括對傳統美術（結構、光影、色彩、透視）知識點的剖析，還包含對 PS 使用的深入探索。
可以說，自從擬物不成為必修題材以后，九成以上的UI設計師是不會用 PS 的，這極大的限制了他們自身的可能性和作品的多樣性。
站內攻略作為每年大促玩法的預告者，承擔了向用戶輸出平臺節奏、吸引用戶預約回流的重要任務。 不同于著眼于轉化的賣貨會場，或是著眼于分享的互動H5，如何能讓用戶更好地了解京東的大促平臺玩法，便捷用戶的購物旅程，就成為了它的主要任務。
在開始設計之前，我們對比了2017年至今的所有攻略頁面，發現往年頁面存在缺乏延續性、定位不清晰的問題。作為大促信息傳達的先行軍，往期的攻略反而更多承擔了轉化型的會場類任務，對于優惠信息的預告往往是輕描淡寫地用文案帶過。而每一次的攻略樣式都是「船新版本」，也產生了較大的人力消耗。
然而盡管攻略的任務是信息傳遞，但作為整體大促鏈路中的一環，它終究還是需要為大盤GMV服務。那么應該如何平衡二者，以達成更好的數據效果呢？
首先，從攻略存在的核心意義——助力集團大盤GMV的提升出發，它需要達成以下幾個目標：
然而縱觀大促會場全局，許多賣貨會場也可以達成這些目標，那么站內攻略和它們相比有具有哪些差異性呢？我們可以從對內和對外兩個角度進行分析：
對內差異化：從站內來看，「我的」和「AI助手」也都承擔了向用戶進行活動會場推薦的功能，但「我的」是圍繞用戶已有的操作展開管理和推薦，是絕對精準的量身打造，「AI助手」是理性層級下的導購，需要用戶先產生「想法」，再指導操作；站內攻略則是引導用戶未來行為的指導和說明，先組織、篩選促銷信息，再使用戶產生「想法」，從而產生操作，有一定「逛」的性質。
對外差異化：從站外來看，站內攻略的定位與「什么值得買」有些近似。相比之下，站內攻略的優勢則在于它能更緊密地圍繞京東用戶的消費習慣進行定制化推薦，和近年來以長圖為主的阿里系攻略相比，則提供了更為豐富的操作（如預約），一定程度上能減少用戶的記憶成本。
基于以上基礎，我們對往年攻略的用戶畫像進行分析，并對攻略進行了橫向與縱向的對比，總結出了攻略作為一個長線產品視角下的迭代思路，并根據攻略的特性制定了分時期的北極星指標：提升預熱、專場期的預約加購率、提升全時期的活動分流以及提升高潮期的商品轉化。那么我們又是如何根據這三個指標來拆解細分策略的呢？
交互層面：動效輔助內容聚焦
作為站內優惠信息的聚集地，如何清晰簡潔傳達內容，一直是交互側需要重點思考解決的難題。于是在本次攻略中，我們對比了往期攻略中的預告樣式，在數據表現較好的日歷樣式基礎上，對頁面的層級進行了進一步的簡化，配合動效的引導操作，以便用戶能夠更聚焦地瀏覽日歷部分的核心內容：
視覺層面：視覺層級清晰
經過對交互稿的分析理解，以下3個痛點，對此次頁面的信息層級和畫面舒適度是一個考驗：
那么如何通過視覺的手段，讓視覺層級清晰展示且畫面顏色和諧呢？下面從最基礎的視覺構成里的構圖和色彩兩方面進行分析并落地：
「構 圖」整體用方形進行構圖和內容分割
方形是最簡潔的幾何形態，對于信息量較大的頁面，方形會讓設計空間利用最大化，并且可以排除形態上的干擾，結構清晰的展示信息內容，讓用戶通順的瀏覽頁面。
簡化視覺層級
在交互稿上，瓜分京豆模塊和日歷選擇器兩部分內容劃分較為明顯，但所留出的空間，會增加視覺層級的復雜度。為了盡量簡化視覺層級，找交互同學商量是否可以在保持內容劃分清晰的情況下，把瓜分京豆模塊背景和日歷選擇器拉通，同時，也咨詢了前端同學，視覺這樣處理在實現上是否會有問題。最終，三方達成一致后，采用了視覺最終呈現的方案。
「顏 色」
為了更好的覆蓋618全時期，挑選了色環上三種距離基本相等的色彩進行從暖色到冷色的色相漸變。
前端層面：復雜交互動畫與跨平臺功能適配
關于選中移動動畫
日歷選中動畫部分我們需要實現的一種跟隨移動的效果，那么我們需要考慮的是在當前日期是有可能去到任何一個可點擊日期的位置。
實現方式：
用純css方式控制，方塊使用背景圖的方式實現，通過控制類名移動位置，比如.move-[start]-[end]，缺點：需要寫好每個日期對應到其它日期的位置，不夠靈活
用js控制。把日期看成一個棋盤格子，每個格子都占相同的坑位大小。我們把當前日期看作a，移動至日期看作b。假設把a移動至b的橫向占格子數設為n，把a移動至b的縱向占格子數設為m。那么n=當前下標 % 行個數，m=當前下標 / 行個數取整。那么a移動到b的x = w * n，y = h * m (w為格子寬度，h為格子高度)。
注：寬度獲取使用block.getBoundingClientRect().width；clientWidth會忽略小數位
提升篩選效率
福利秘籍專區作為大促期間福利互動活動的集中地，承擔了為互動分流，為用戶提供快速查找篩選可參與活動的任務。而互動往往存在較為復雜的規則，對用戶而言存在較高的理解成本。此次除了集團主推的互動，又增加了對于事業部互動的展示，對于保證頁面展示效率也帶來了一定的挑戰。通過對往期迭代內容進行數據對比，同時參考其余會場對于多信息展示的策略，最終我們采用了BI展示，同時對用戶弱相關的互動卡片進行折疊的方式提升頁面的效率；而在卡片的信息展示上，選擇重點突出活動可得的利益點，讓用戶一眼即可篩選出對自己最有價值的互動進行參與。
視覺創新優化
雖然運營同學對雙11的秘籍視覺比較認可，但是仍然提出了希望有秘籍形式感的同時，能進行視覺創新的訴求。經思考后，我認為運營的訴求無法滿足：
于是帶著以上3點找運營同學再次溝通清楚對方的真正訴求到底是什么，經溝通，對方最重要的訴求是希望有視覺創新，秘籍形式感訴求較弱。接下來針對重要訴求集中發力，并結合此次618視覺概念（光點、光線），找到了視覺創新優化的解決方案，并和運營達成了一致。
「構圖」
上面提到了方形可以排除形態上的干擾，考慮到活動入口圖數量較多，且氛圍圖不可把控，左側以方形構成，右側結合了618主圖形——光線，把文字和氛圍圖分開，讓各部分信息更加聚焦。
「顏色」
結合雙11用研結論——活動入口主題不夠鮮明，除了活動文案類似的因素，我認為顏色也是影響因素之一。所以這次在上部分平臺級活動入口，采用了2種暖色的近似色交替構成，下部分事業部活動入口，統一采用了1種和上部分近似色的冷色構成；單個活動入口，文字和氛圍圖的背景進行統一色相的明暗深淺變化。從整體樓層來看，從上至下，由暖至冷，不僅活動主題有了明顯差異化，而且較好的過渡到下一樓層；從單個活動入口來看，左右深淺顏色的劃分，不僅對不可把控的氛圍圖適應性更強，且主題文案更加明顯。
「表現形式」
整體頁面在按鈕的部分采用新擬態風格，在保證吸引力的同時，也減少了顏色過多的問題，減少了信息層級。新擬態風格更適合工具功能類產品，本次只嘗試使用在了頁面的按鈕部分，風格上也會有眼前一亮的感覺。
分時期變化的樓層策略
針對高潮期的轉化指標，我們參考了往期的迭代經驗，發現隨著大促節奏的漸進，臨近高潮期時，頁面的轉化模塊表現往往有較大的提升。于是在本次設計中，我們針對這個數據表現，對樓層順序進行了動態調整，高潮期將轉化樓層前置，以更好地匹配不同時期的用戶需求。
同時根據往期的樓層數據表現，本次我們也延續保留了數據表現較好的模塊類型，例如增加了榜單的露出，以輔助頁面目標的達成（以下數據來自于lan.jd.com)。
樓層整體化、內容吸引力包裝
基于之前今日樓層視覺整體感較弱的問題，這次樓層背景色和頁面背景色有所區分，樓層內模塊顏色和樓層背景色同色，較往期此樓層來看更加整體化，又能讓頁面層級更加清晰。
其中，針對這次品牌入口和上海美影廠IP形象結合的策略，為了提升用戶吸引力，且不干擾信息內容的前提下，視覺上采用了和用戶共情，且和IP形象契合的元素——老電視機，同時按鈕文案也進行場景契合的包裝，增加趣味性。
與往期站內攻略對比，本次618站內攻略主要在以下方面有較為明顯的提升：
品牌視覺契合及創新
在延續主視覺元素的同時，視覺風格有所創新，在頁面的按鈕部分采用新擬態風格，減少顏色過多而導致的復雜信息層級問題，同時也保證了視覺吸引力
視覺精致程度
整體頁面顏色較有節奏，且更加清透舒適
元素細節（打光、投影等）的刻畫更加精致
信息層級清晰度
通過對顏色的合理規劃，有主次的文字信息，讓單個樓層更整體化，各樓層模塊劃分清晰
數據表現
根據上線后的表現，本次福利互動模塊的點擊數據獲得了顯著的提升，今日模塊的點擊轉化率相比往年也獲得了成倍的增長，頁面目標基本達成。
1. 好的經驗
針對攻略這類規律性存在的活動會場，我們可以針對其主要的功能組成模塊進行數據導向的設計與迭代，來更好地指導后續的優化方向；同時也可以輔助業務側更加清晰地規劃會場定位，提升頁面對用戶以及大促的整體價值。
2. 如何溝通
Q：需求方一味的追求熱鬧復雜的視覺樣式創新，該怎么辦？
A：熱鬧的氛圍對于大促活動來說固然非常重要，但也要根據頁面類型去判斷（重氛圍or重信息)。設計師要傾聽訴求并搞清訴求的根本原因，并用專業的角度判斷訴求的合理性，以及價值大與否。熱鬧氛圍塑造的前提是不能影響信息的識別，否則就會本末倒置，并且熱鬧氛圍的視覺樣式要和該場景邏輯匹配 。
3. 待優化項
雖然本次頁面大部分模塊基于產品化的思路迭代均獲得了一定的正向反饋，但產品的發展往往是個曲折上升的過程，活動會場也不例外。結合上線后反饋，站內攻略依然有以下可優化點：
日歷操作體驗
根據用研結果顯示，日歷操作體驗問題反饋較多，日歷模塊為滑動改變日期，而非點擊跳轉日期的操作方式，與用戶的認知不符，且首屏動效較復雜，在安卓機型上體驗較為卡頓。后續如有同樣的交互方式，需優化操作體驗。
福利互動入口主題文案
根據用研反饋，主題文案描述不直觀，不易理解，導致用戶容易滑過整個模塊。建議后續活動主題能簡單清晰的描述優惠和玩法。
綜上，未來站內攻略需要進一步探索主要功能模塊對用戶的價值，探索其在大促鏈路中獨特的差異性；同時保留高用戶價值模塊并持續優化，以求達到更好的用戶體驗，用設計策略為用戶與業務帶來更多的價值。
文章來源：優設 作者：JellyDesign
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天的這篇文章也將圍繞著「文字」展開，相信大家看完后會對「文字」有一個全新的了解，也將明白文字對于版面的意義是巨大的，處理好它，基本上你的版面也就編排的差不多了。好了，下面我們開始今天的內容吧。
首先來看幾張不同類型的海報，第一張文字占比較高，第二張圖片占比較高，第三張文字與圖片占比是五五開。
然而不管是屬于哪種類型的，它們的核心目的都是在傳達信息。因為對于一張海報來說，我們不光會看還會去閱讀它們。
平面設計就是通過文字來「說話」的。
而在廣告設計中，圖片的占比會非常高，因為廣告多以圖片為主，通過圖片我們能大致的猜測出設計師想要表達的東西是什么。
總結一下：廣告設計多以圖片為主，意在通過圖片傳達概念；而平面設計則多以文字或圖片為主，意在通過文字傳達信息。
那么作為信息傳達的載體，字體就顯得格外重要了。下面我會從字體的分類、字體的搭配、字體的氣質與設置細節著手，慢慢帶領大家去認識字體，首先我們來看看字體的分類都有哪些。
中文字體大致可分為：黑體、宋體、圓體、書法體與卡通體等。
其中書法體又細分為：楷書、行書、草書與隸書等。
在列舉的這些字體中，最常用就是：黑體、宋體和圓體，而在書法體中，最常用的是楷書與行書。為什么說這些字體常用呢？因為在許多優秀的設計作品中，這些字體的出現概率都非常高，尤其是黑體與宋體。
下面說一下英文字體，大致可以分為：襯線體、無襯線體、手寫體與展示字型等。
其中最常用的就是：襯線體與無襯線體。理由與中文一樣，它們也是使用率很高的字體，其次還有一個原因就是在以中文為主的設計中，它們與中文字體搭配起來比較契合。
拿黑體來說，與之搭配的英文字體就是無襯線體，因為它們的筆畫特征相似度很高。
宋體搭配的就是襯線體，因為宋體的筆畫特征是有粗細變化且有裝飾線，而英文的襯線體也剛好有與之相似的地方。
而圓體則是搭配擁有相似特征的無襯線體。
因為常用的書法體通常使用毛筆書寫，所以在筆畫特征上沒有與之相匹配的英文字體，大多數時候我們會選擇用襯線體來搭配，具體原因我會在后面的字體氣質環節為大家講解。
雖然也有別的搭配方式存在，但我給大家提供的這些都是最常用和最安全的。說完字體搭配問題后，下面我們來看看這些字體，所包含的氣質又有哪些。
首先是黑體，它具有科技感與現代感，這是由它簡潔干練的筆畫特征決定的。
其次黑體也能表現出運動與時尚的感覺，因為運動與時尚本就是偏現代的詞匯。
接著是宋體，它具有文化與歷史的氣質，這個比較好理解。
而除了能表現出歷史與文化感之外，宋體還能表現出清新與雅致的感覺，這是由宋體的筆畫特征決定的，橫細豎粗且末端帶有裝飾，與優雅精致的感覺十分契合。
圓體的特點也是非常明顯的，在看到它時腦海中的第一印象就是可愛與卡通。
除了刻板印象外，圓體那種圓滾滾的筆畫給我們的感覺還有安全和易親近，所以圓體也能用來表現兒童與溫暖感覺的題材。
一說到書法體，能直接聯想到的關鍵詞就是傳統與歷史，因為書法的演變就是我們漢字發展的軌跡。然后我們回過頭來講一下，為什么書法體可以和西文中的襯線體搭配。
原因就在于襯線體也具備書法體的某些氣質，比如傳統、文化、歷史等。與書法體在早期的東方一樣，襯線體在早期的西方也是主要的字體之一。
溫暖、人情味兒，說到書法體可能很難聯想到這兩個詞，但是書法體確實具備這種氣質。跟黑體這種棱角分明的字體相比，書法體是手寫出來的，它的筆畫特征給我們的感覺就是有「溫度」的。
在字符面板中，除了選擇字體與改變字號以外，這兩個區域相信大家用的還是比較多的，它們分別是：行距設置與字距設置。
拿行距來說，在使用時有幾個比較常用的設置方法，比如用當前文字的字號乘以1.2、1.732或是2。不過，通過這個方法所算出來的數值只是一個參考，也就是說你可以在這個基礎上做些調整。
比如：在計算出的數值的基礎上進行遞增或是遞減，這時你要做的就是用眼睛去觀察，覺得大了就減少一些，覺得小了就增大一些。
其中，用字號乘以1.2適用于標題。
比如上方那個標題的字號是40pt，那么行距的數值就是用40乘以1.2等于48。下方這個是在此基礎上做的一個調整，稍微增大了一些行距。
字號乘以1.2適用于標題，而用字號乘以1.732或2則更適用于小字號的文字，比如內文。
上方是用字號乘以1.732的例子，字號是9pt，用它乘以1.732得出來的數值是15.588，四舍五入取個整數得到的行距就是16，下方這個是用字號乘以2得到的效果。
大多數情況下我建議大家用字號乘以1.732的行距，大小比較適中。
跟行距不同的是，基本上來說字距是無需調整的。當然還是那句話，要靠自己的眼睛來衡量，如果你覺得字與字之間離的很近的話，那么可以增大一些字距，反之，則可以減小一些。
其次就是，當你遇到一些偏輕松慢節奏的設計，比如典雅清新類的文學小說時，就可以適當的增加一些字距來營造這個感覺。
比如這兩張海報，左邊的是經典的居中結構，右邊的是包圍結構，構圖都是可以的沒有任何問題，但為什么看起來還是怪怪的呢？因為文字組沒有刻畫好。
為了讓大家能更深刻地體會到文字組對于版面的意義，修改了這兩張海報，其中構圖不變只改文字組。
這個修改前后的對比還是非常直觀的，可見文字組對版面的影響有多大。如果說構圖是版面的骨架的話，那么文字組就是版面的五官，骨架再好五官不行結果也是可想而之的。
文字組分為：左對齊、居中對齊、頂對齊以及兩端對齊。
其中與左對齊與頂對齊對應的有：右對齊與底對齊。
給大家找了一些各種對齊方式的案例。這是左對齊的形式。
這是右對齊的形式，與左對齊相比右對齊屬于不常用的對齊方式，主要是出于易讀性的考慮，但并不是說不能用。
這是居中對齊的形式，最經典的對齊方式之一。
這是頂對齊的形式，是文字豎排時最常用的對齊方式。
這是底對齊的形式，跟頂對齊相比也是屬于不常用的對齊方式。
最后是兩端對齊的形式，橫排與豎排都可以使用這種對齊方式。
如果作品看得足夠多，應該見過這種形式的組合，它同時包含了多種不同對齊方式，我們稱其為「對齊組合」。
比如我們可以借鑒結構，以這個文字組為例，它的結構是這樣的：兩端對齊、中間的文字字號大，上下的文字字號小，按照這個套路我們來試著做一個組合。
在編排前，我們先閱讀一下文案，通過文字可以得知，這是一個與籃球明星有關的內容，氣質上來說會偏現代一些。
所以字體可以選擇一款黑體，英文部分則搭配一款無襯線體。
根據之前總結到的這些特征，下面就可以開始編排文字了。
按照那個組合的套路，我們先將兩端對齊中較大字號的文字給編排出來，而標題信息無疑是非常適合用來放大的。
接著再將上方和下方的小字號文字給編排出來。
其中要注意的就是這段文字的行距，我參考了logo的高度來進行設置。而整個組合中，字距是基本沒有進行調整的。
值得一提的是，在兩端對齊的文字組中，這種小大小的形式非常好用。因為它的節奏變化豐富，所以大家在做兩端對齊的文字組時不妨試試。
這就是借鑒結構的效果了，精髓在于要多去分析別人的形式與套路，并從中獲取做組合的靈感。除了能借鑒結構之外，我們還可以借鑒標題字數+結構，是什么意思呢？
以這個組合為例，它的標題有7個字，整個組合是由頂對齊與兩端對齊構成的一個對齊組合。
它的組合結構為小中大，按照這些特點我們來嘗試借鑒。
這是要用到的文案信息，通過閱讀文案可以得知，這是一個關于炸雞套餐的內容。
通過去看kfc的各種物料，發現運用黑體的場景還是比較多的。
所以，在字體搭配上選擇用黑體與無襯線體。
根據之前總結到的這些特征，下面就可以開始編排文字了。
按照小中大的特點，依次將信息給編排出來。
完成后可以在組與組之間，添加一根小線段用于連接，以起到過度的作用，如果大家現在回過頭去看原圖的話，也能發現這一特征。
其中，標題的行距就是用標題的字號乘以1.2算出來的。
字距我也做了調整，因為默認0的字距看上去有些擁擠。
可以看出跟原圖相比，在不破壞組合結構的情況下，針對文字信息的編排是做了些調整的，比如：原稿最左側是兩行頂對齊的小文字，在借鑒時將它換成了logo，因為我們是要借鑒它的結構，而不是為了跟原稿做的一模一樣，具體還是要根據我們的內容來合理編排。
首先我們來看這張圖，一個標準的兩端對齊、組合結構與之前那個是一樣的，中間的字號大，上下的字號小。
除去這些外還有一個小特征就是，在大字號中間還有一層小字號的文字。
接著我們再來看這張圖，它的特點就是圖片疊壓在了文字的上方。至于它的結構我們可以不用考慮，因為結構已經找好借鑒了。
這是要用到的文案與圖片。通過文字可以得知，這是一個關于介紹昆蟲的圖書，且配有一張插圖。這個插圖的風格是手繪形的，偏寫實一些沒有那么的卡通。
結合這些特點我選擇的字體搭配方式是，宋體配襯線體。
因為字體搭配這部分我又借鑒了一些相關風格的書，發現它們的字體搭配方式用宋體比較多。
分析完文案找到字體搭配方式后，在結合之前總結的一些組合特征，我們就可以開始編排了。
先將中間比較大的那層文字給編排出來，然后在它中間處置入一個小字號的文字。
中間層編排完成后再來編排上下層的文字，字號不用太大，整體注意好兩端對齊。
調整字距的地方有兩處，首先是標題，調整的原因在于默認值我覺得有些小了，其次是標題中間的那行文字，調整它的原因在于不想字號放太大。
因為是兩端對齊的結構，不調整字距的話。標題中間那行文字只能通過放大字號來達到目，然而這個效果并不是我想要的。
綜合考慮，選擇了這個，最后，把圖片置入進去疊壓在文字的上方。
圖疊壓在文字上有一個無法避免的問題就是，被壓住的文字會出現無法識別的情況，英文還好但是中文卻不行，因為在這個組合中，中文是用來閱讀的文字，英文僅充當裝飾用。
既然中文是重要的信息，那為什么還要去遮擋它呢？因為有提示，通過這兩個字你也能猜出來被壓住的文字是什么。
這就是借鑒結構+表現手法的例子，多一張圖片的加入，混合借鑒后的效果與原稿的相似度就會降低。
下面我們來看這張圖，它既有頂對齊又有兩端對齊的感覺，像這種組合我將它稱為頂部兩端對齊。
它的組合結構也是一個小大小的形式。
分析完上一個組合后，再來看看這個組合，值得借鑒的地方有兩處，首先就是整體的結構，其次就是字體搭配。由于已經借鑒了上一個組合的結構，所以這個組合要借鑒的就是字體搭配。
在原圖的這個字體搭配中，英文是最好判斷的，這個字體是襯線體，中文則比較陌生了，既不像黑體也不像宋體。
感覺是被設計過的，不像是字庫里的字體，我通過觀察發現，它既有宋體橫細豎粗的筆畫感覺，又有黑體干凈利落的特征。
所以，我在字庫字體中找到了一款具有類似感覺的字體：姚體。
在字體搭配上選擇用姚體搭配襯線體。這里需要強調的一點是，在挑選字體借鑒的過程中已經考慮到了與文案的氣質相匹配的問題，下面我們就來看看文案。
標題叫「遇見你之前」，給人的感覺比較文藝，而姚體我們前面也分析過了，它是具有宋體特征的，而且筆畫細長，整體給人的感覺就是比較文藝的。
分析完成后，結合之前總結的組合特點就可以開始編排了。
第一步，還是按照小大小的感覺將組合給編排出來，注意好頂部兩端對齊。
接著在組與組的縫隙處加入線條就完成了。
在這個組合中標題的行距與字距，默認狀態下是左邊這樣的，字距還好，行距卻非常大，這個時候你就不能套用之前講到的倍數去算行距了。那樣行距只會越來越大，所以這里我們要根據視覺效果來調整。
這樣，一個借鑒結構+字體搭配的例子就完成了。
這是要用到的文案與圖片素材，首先，老規矩分析一下文案，選擇與之契合字體。書名叫《流星之絆》，還是比較文藝的。
根據這個書名，搜索了一下原書的樣子，在這三個不同的版本中，所感受到的氣質有：溫情和雅致，在字體的選擇上與之較為契合的有：書法體與宋體，這兩個字體的選擇在這三個不同的原版本中也都有體現。
打算用宋體，與其搭配的英文首選就是襯線體了。
這是第一個要借鑒的對象，可能有人會說這不像文字組，這確實不是文字組，但并不代表它不能被聯想成文字組。
比如它的結構是由一個頂對齊與一個左對齊構成的對齊組合，而且下方的那個左對齊文字是放在了頂對齊的負空間處的。
其次，頂對齊的文字字號較大，下方左對齊的文字字號較小。
這就是根據那張圖所總結出的一些組合特征，下面我們就根據這些特征來編排文字。
先排出頂對齊的文字，然后在其負空間處置入左對齊的文字信息。
排到這發現右下角還有塊小缺口，既然是要做一個對齊組合的話，那么就要把它填滿。
關于頂對齊的中間部分為什么要這么做，是因為標題的字數不足以作出頂對齊的感覺，為了解決這個問題，選擇重復了一次標題并且將它的筆畫打散了，而打散的靈感來源于「流星」，它們就像流星一樣散布在天空中，不知道什么時候就會掉落下來。到這為止是書封的上半部分，下面我們來編排下半部分。
這是要用到的借鑒圖，它也是一個由頂對齊與左對齊構成的對齊組合。
除了這個外它頂對齊部分的文字跟左對齊的比，也是屬于較大的。
這是從那個組合中，總結出的組合特征，與上一個幾乎一樣。
按照總結出的組合特征，將文字給編排出來。
其中頂對齊與這段左對齊的文字，它們的行距是用字號乘以1.732算出來的，字距則是做了些微調整，因為當文字縮小后，它的字距在視覺上看著也會變小，所以我在默認0的基礎上將字距增加到了50。
這就是根據那兩張圖片所借鑒出來的文字組了，下面把它們置入進版面中。
整體是一個上下結構的，這種類型在構圖中屬于上下構圖。這也是為什么會找那兩張圖來當參考的原因，因為提前已經考慮好了構圖。
接下來做烘托氛圍的工作，先把底色換成夜空的黑色，然后配上圖片。
接著更換字體的色彩恢復識別性，其中黃色的部分是為了與白色部分做區分。
然后給腰封換上色彩以恢復下方的文字的識別性，再挑選一些信息，在它們的下方配上黃色，目的是為了與上方的色彩做呼應。
最后，將書脊編排出來，這個案例就編排完成了。
以上就是版式三部曲之文字篇的所有內容了，回顧一下，由兩個部分組成。第一部分是：字體的分類、字體的搭配、字體的氣質與設置細節。具體包括：字體有哪些不同的類型、在選中字體的類型后，要如何選擇與之搭配的英文字體。字體氣質主要講的是，不同類型的字體都有哪些味道，它的意義在于當你確定好項目的風格后，可以根據不同字體的氣質，快速的找到與項目定位契合的字體。
文章來源：優設 作者：研習設
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
構圖是在有限的空間內把文字、色彩、圖形等元素結合起來構成畫面，使作品不僅具有美感，還能清晰表達設計者的目的。不同構圖能使畫面產生不同的視覺變化，進而給觀者帶來不同的心理感受。同的心理感受。本期分享的是上下構圖的使用方法，此構圖形式具有良好的視覺效果，也比較容易掌握，是非常實用的構圖方式。
上下構圖形式是將版面分割為上下兩部分，或讓畫面中的元素整體呈現出上下的分布趨勢，主空間承載視覺點，次空間承載閱讀信息，呈現的視覺效果平衡而穩定。
最典型的上下構圖由「上圖下字」或者「上字下圖」兩部分構成，圖片及文字各占據一部分，互不干預，能清晰明了的傳達出版面的信息。
主空間還經常使用圖形化的標題文字充當畫面主體，可以很好解決畫面缺少圖片層級的問題。
上下構圖空間劃分比較固定，為了得到豐富的視覺效果和良好的設計感，需要通過精心設計的編排來豐富版面的視覺效果。比如文字的橫豎排版，元素之間的對比、點線面的運用、巧妙的留白等。
進行上下構圖設計時，可以根據版面內容的信息體量劃分畫面的空間，常用的版面分割比例有：1:1、1:1.618、1:1.414、1:2、1:3等。在設計時也可以反復進行調整，直到找到最為合適的構圖比例。
1. 1:1分割
把畫面平分為上下兩部分，形成對稱均衡的分割構成。
1:1分割比例構成方式，多用于版面中兩部分內容處于并列或對立的關系。
2. 黃金分割
「黃金分割比例（1:1.618）」被認為是最具美感的分割比例，具有嚴謹的藝術性、和諧性，蘊藏著豐富的美學價值。
在設計中有意識地運用黃金分割比例進行設計，可以營造出富有美感的版式效果。
3. 白銀分割
「白銀分割比例（1:1.414）」是日本率先采用的一種分割比例，目前廣泛運用在版式設計的布局中。
與黃金分割相比，白銀分割次空間占據的比例更大一些，能夠承載的信息量也更多。
4. 2:1分割
采用2:1的比例，圖片主體在畫面中占據主導地位，視覺焦點更清晰。
主要的信息（標題）常融入圖片中放在主空間成為畫面主體，閱讀性文字則放在次空間。
5. 3:1分割
3:1分割的比例與2:1比例相似，但圖片在畫面中占據主導地位更強，主空間承載視覺點，次空間承載閱讀信息。
通過比例，可以讓版面分割更嚴謹。但沒有那個比例關系絕對正確，需要根據畫面的項目調性、信息體量、信息功能與圖文主體而定。如使用其它比例分割的優秀案例：
把圖文按比例分別編排在版面上下方，是比較嚴謹規范的構圖方式，但是為了避免版面的呆板，可以通過調整版面空間變換出多種編排形式。如以下幾個案例：
縮小圖片和文字空間，使留白處形成外空間，增加層次感。
在背景（繪畫作品）上重新劃出新的空間，形成內外空間對比，既豐富了畫面層次，又讓版面變得生動有趣。
通過圖片文字的錯位排版和負空間的巧妙留白，讓原本呆板的上下構圖變得靈活多變，充滿個性。
讓圖片位置重心偏移，打破均衡穩定的構圖形式。標題的破圖處理，也增加了版面的靈活性與豐富性。
在上方空間上劃分出新的空間，這樣的手法可以很好讓空間具有多變性，也可以讓我們的設計更加靈動。
上下構圖的框架看似比較固定，但是也能通過設計手法，變換出多種編排形式，巧妙破除上下分割的單一性與呆板感。
1. 曲線分割
把生硬的直線改為呈現出動態的曲線或斜線進行畫面的分割，版面顯得更生動活潑。
2. 圖片裁切
把方形圖片裁切為其他形狀，使上下構圖沒有明顯的分割線，也可以呈現出良好的視覺效果。
3. 文字破圖
使用文字串聯起上下兩個空間，破除上下構圖版面的單一性。
4. 元素串聯
利用圖形、色塊等元素串聯空間，讓主次空間建立起聯系，具有豐富的視覺效果和良好的設計感。
5. 圖片退底
把圖片主體進行退底處理，重新營造場景，弱化空間的分區。
6. 空間留白
使用留白破除兩個空間的間隙，拉開畫面的空間感，具有良好的視覺效果。
什么是上下構圖
構圖比例
空間調整
靈活運用
總結
文章來源：優設 作者：藝海拾貝Design
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
今天分享一個很多設計師頭疼已久的問題，關于網頁響應式布局原理和設計方法。文章主要包含三個部分：
所以廢話不多說，我們直接進入正題吧！
在過去，網站通常就是為了電腦大屏幕展示而設計，如果用手機訪問，只能在巴掌大的屏幕里看縮小版的頁面。雖然還有手機專供的 WAP 頁面，但因為太簡陋也無濟于事。
隨著智能手機、3G、4G、HTML5 的普及，使用手機訪問網站的人越來越多，為了讓用戶在手機上看到更合適的布局，且兼顧開發的效率，響應式的概念就被提出了。
通俗解釋，就是通過一套代碼，可以無縫匹配符合電腦、平板、手機預覽效果的前端技術。比如下方 Nike 官網，就是應用了響應式設計后在不同客戶端、分辨率下的效果。
雖然響應式的應用越來越廣泛，但是從零開始去寫一個響應式效果的網站對于程序員來講是非常復雜的，因為當中包含了大量的邏輯、判斷、適配內容。
所以，今天市面上看見的響應式網站，多數使用了一些開源的代碼或者框架。而應用最廣泛的，就數 Bootstrap 了。
之所以提這個，是因為既然開發使用了別人寫的框架，那么對于我們的設計稿也就上了緊箍咒，我們需要根據框架的要求來設計界面，這會稍后具體解釋。
還有個問題，就是為了實現平板、手機和電腦不同的預覽效果，并不是只有響應式布局一種技術，還有另一種技術 —— 自適應。
通俗點說，自適應就是為不同客戶端分別提供一套獨立的前端代碼，和響應式使用一套代碼適配多種客戶端不同。
響應式適合應用在一些簡單的官網、展示類頁面，展示的內容大致相同。而自適應適合應用在需要在不同客戶端類型有較大差異的網站，這樣只使用一套前端代碼就完全行不通了。
比如愛奇藝的官網，為了符合用戶體驗，在移動端網頁布局中精簡替換了大量的內容，和電腦版已經沒有太直接的聯系了。
兩種做法并沒有好壞之分，只有適不適合項目之別。了解了它們的不同，我們就可以進一步學習響應式的規則了。
響應式布局的規則并不是特別復雜，只要注意兩個問題：
1. 分段響應規則
敲黑板，響應式的響應，面向的核心對象是瀏覽器窗口的寬度，而不是設備類型。所以打開使用響應式的網站，我們通過改變瀏覽器的寬度，就可以看見不同的展示效果，比如下圖的星巴克官網。
我們可以發現，瀏覽器寬度每達到一個數值（Breakpoint）的時候，頁面的排版和樣式就會發生明顯的變化，而這就是響應式設計最重要的功能 —— 分段展示。
也就是說，響應式規則就是為頁面分配不同的寬度區間，每個區間有各自展示的樣式，用來應對不同的場景和設備類型，常見的適配區間大致如下：
包含圖片截圖 320-800 ：移動端收集屏幕 800-1200：平板或上網本屏幕 1200-無窮：一般的電腦顯示器
面對分段式的布局、樣式變更，我們就要關注到底發生了哪些變化?？偨Y起來，可以簡單的歸納成三種組件的調整：內容增減、布局調整、樣式調整。
第一種，內容增減。即部分模塊在不同的分段內會有顯示和隱藏的狀態，尤其是一些網頁端的內容覺得在小屏幕上展示會太多了，就在小屏幕場景中隱藏掉。
第二種，布局調整。主要是模塊的排列和順序發生變化，常見的就是模塊一行的列數發生改變。
第三種，樣式變更。即針對不同的分段設計完全不一樣的樣式，最多應用在導航欄的設計中，會為最小的分段使用 iOS 的 Tabbar 或安卓的 Menu 樣式。
所以，歸納起來，就是頁面針對不同的分段展示不同的結果，即頁面中的組件觸發了對應的變化類型。每個組件都可以應用不同的變化類型，而無需進行統一。
2. 組件寬度適應
分段式響應，是響應式布局的第一層邏輯。而在觸發關鍵值（Breakpoint） 之間的區間，我們拖動窗口的寬度，會發現組件的寬度也隨之改動，這就是 —— 組件寬度適應。
組件寬度適應在手機 UI 的適配中非常重要，即完成不同屏幕寬的手機適配所應用的邏輯，所下面我們簡單講講它的規則。
組件的寬度適應模式主要有兩種類型，一種是容器寬度適應，一種是容器比例縮放，比如下面的圖例。
容器是一個比較抽象的概念，類似設計軟件中的編組，它集合了所有下級元素，但本身并沒有實際的內容和樣式。在響應式規則中，下級元素并不會和這個容器等比變動，出現下面這種錯誤的效果。
正確做法是會定義下級元素針對父容器的響應方法，做到容器變更的同時其自身的顯示也是合理的。比如相對容器左右間距一致、對齊方向一致、尺寸固定等設置。
而這種規則的設置，就是 Sketch/Figma/XD 中的響應式設置功能。只要設置得當，就可以獲得一樣的寬度適應效果。
如果對軟件響應式功能了解不全面的同學，就可以自己多搜索一下對應的說明，我就不在這里過多的展開了。
再總結一下，響應式的規則就是頁面組件先遵循當前分段展示的布局效果，并在這個區間內支持小范圍寬度的變更和適應。
響應式設計是一種源自技術的概念，而不是單純的設計風格、方法，所以設計響應式設計其實就是 「面向編程設計」。
設計界面要吻合編程的真實方法和需求，而不是根據我們想怎么做就怎么做，所以整個流程不能只站在設計師自身的角度考慮，而要和前端程序員緊密溝通，首先確定響應幾個寬度區間，以及它們對應的數值分別是多少。
然后我們就要完成對應數量頁面的設計，因為前面我們說過，分段響應規則中會有明顯的樣式變動，這就要求設計師是一定要給出設計示例的，而不能依靠口頭描述或程序員自由發揮。
完成這些設計稿以后，我們再進一步確定同一個區間內，組件的寬度適應規則是什么樣的。多數情況下，這個階段使用口述就可以，如果規則比較多，那么就可以在標注階段把你要實現的效果記錄上去即可。
全部設計稿和規則都溝通完畢以后，才進入切圖導出的階段。要提醒一次，在一些特殊的情況下，響應式的背景切圖會和普通頁面的背景切法不一樣，盡可能讓前端程序員檢查一遍導出的文件。
只要根據上述的流程，在遇到不確定或者不清楚的情況，就和前端程序員做溝通，那么很快就可以將項目輸出出來。
響應式這個概念雖然高大上，但并不是任何項目都要無腦往上套的。因為框架規則上的限制，導致我們很難在響應式頁面中使用一些特別復雜、高級的視覺樣式，導致最終呈現的效果往往非常簡單或者過度依賴圖片的質量。
所以，如果在功能較為復雜或需要復雜視覺支撐的網頁中，就可以選擇應用固定頁面內容寬度的設計來完成。
響應式頁面是什么
響應式布局的規則
響應式的設計流程
結尾
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
版式設計在我們的設計中是非常重要的技能，無論是UI設計還是平面設計，都會運用到版式設計相關的知識，在版式設計中最常見的就是圖文排版、文文排版。一張圖片一段文案在不同的需求情況下我們都可以排版出很多種樣式，每一種樣式展現出來給人的感覺也是不一樣的，美的排版總是會使人眼前一亮，也會使整體的設計更耐看。
排版也是會根據重要程度劃分層級，我們都知道主題文案都需要醒目，讓人一眼就能看到，這樣才能達到宣傳的作用，當然僅僅只是展示主題文案也是遠遠不夠的，達到主題排版，主圖排版，小到副標題排版，我們都需要精心的排版，還可以更精細到小到輔助文案以及圖形的排版，而今天我們就來看一下日期這樣的文案我們可以怎么排版呢？
日期在一些重要的活動中也是比較重要的信息，比如展會時間，我們需要突出時間，不能用極小的文字排版在角落，用戶不注意的地方，這樣會給人一種焦慮的情緒，既然是展會活動，那么用戶關心的是展會的主題是什么？活動時間是什么時候？活動地址在什么地方？所以這些重要的信息就需要重要突出。而在一些做紀念性的日期我們就可以小化（例如我自己記錄自己的學習打卡練習）
我們常見的日期有年、月、日、時、分、秒，接下來我們就通過對日期的展現做一些不同的排版方式，通過與日期的普通排版方式做對比，我們就可以看出微小的日期排版對整體的設計展現也是有很大影響的。
簡單的日期排版我們通常就只是將年月日對齊排版就算完成了，但是這樣的排版方式會影響整體畫面的美觀，我們對于小文案也需要花一定心思去整理以及排版出更精細的樣式，這樣給用戶的感覺就會覺得你的每一步設計都是用心設計的，并且為了整體的美觀，我們 也不得不從細微之處出發。
日期排版01
例如下面對于日期的排版，TIME這個文案有時候我們也可以去掉，因為用戶看到時間就會明白這是什么，在一定的情況下也是可以去掉的，當然有時候為了整體頁面的展示效果，我們也可以加上，便于排版，左邊只是將年、月、日并排，時間節點作為一個點排列，下面的文案我們可以根據實際情況選擇一些特殊的提示文案做裝飾
而通過對左邊簡單的日期排版進行改版后，我們會發現右邊的日期排版會顯得更美觀，排版更精妙，也有更多的細節之處，例如2020后緊接著年（YEAR)的提示，08后面標識是周六(SAT.），年月日和時間節點也同時做了層次區分，這樣更有利于閱讀。
日期排版02
對于上面同樣的日期文案，我們還可以排出右邊不同的樣式，整體采用橫排的方式，將年、月、日同排，時間段縮小處理，使時間之間也能有層次感
日期排版03
下面的日期是年、日期段、時間段的組合，左邊的排版顯然是比較常規的分層排版，卻主要突出了2020，而一般時間我們在這一年將要發生的事，我們更關心的是哪一天那個時間點，而右邊的排版主要突出時間段/點，更能讓用戶看到自己關心的事件。
日期排版04
下面這一組日期是有不同年份的，所以我們在排版的時候可以突出顯示年份，這樣在排版的時候就可以注意層級關系，排除層次感
日期排版05
這一組日期是比較簡單的，只有一個時間點，沒有時間段，如果直接按照左邊這樣的日期排版方式，顯然整體看著就很單薄，把這樣的日期排版方式融入到版式整體畫面中，也一定會顯得毫無設計感，而我們只需要將簡單的日期經過簡單的排版，從年、月、日、時，從上至下依次排列，這樣就可以顯得信息有層次感，并且閱讀也不會有困惑，加上精致的icon做裝飾，這樣的日期排版就顯得更耐看。
日期排版06
這一組日期也很簡單，只有月、日、時，都是屬于時間段的信息，通過分析這個時間，月都是10月，是相同的，所以我們可以將月份單獨拿出來，作為共用信息，這樣就可以精簡畫面重復的信息，依然采用月、日、時這樣從上至下的順序排列，時間小化，但是利用色塊突出，也不會柔化時間點的閱讀，再通過一條線的連接，將斜線和時間icon相連，形成一個有趣味性的時間裝飾，這樣的排版更容易吸引用戶的眼球
日期排版07
下面的日期也是年、日期段、時間段的組合，和第三個日期排版的案例類似，所以存在同樣的問題，左邊的排版顯然是比較常規的分層排版，卻主要突出了2020，右邊改版后，我們同樣弱化年份（2020），提取相同的月份（8月），突出顯示日期
日期排版08
這一個和第五個也是一樣的，左邊都是年、月、日、時的時間點，沒有時間段，第五個我們是采用豎排的方式，而這里我們改版后采用的是橫排的方式，突出顯示月、日，讓整體的層次更加清晰
日期排版09
下面這一組時間改版，我們主要采用錯位豎排的方式，像這樣的排版方式，我們可以多用于一些比較有設計感或者比較唯美的畫面中，顯得每一個小的點，都有用心設計，并且也符合這樣的氣質
日期排版10
這一組日期只有年、月、日。左右兩邊的排版看起來很相似，但是通過對細節的調整，例如2020的弱化，間距的把控，星期幾的友好提示，這樣就會使整個日期排版看起來更精細、耐看。
我們通過對上面日期的排版分析和總結，會發現小小的日期排版也是很關鍵也很追重要的，所以下面我們將通過一張海報案例，來真正體現日期排版對整體畫面的重要性。
海報主題是選擇的立秋，雖然立秋以及過去兩天了，但是我又學會了這個立秋新的排版技巧，所以我想將這一技巧分享出來，但是這里就不詳細講解海報的設計過程了，主要還是分享日期排版對整體畫面的影響作用
這里就簡單的說一下海報設計的思路，海報主題是立秋，所以我現在一片黃色的楓葉作為畫面的主視覺，畫面整體體現秋天的感覺，一片黃燦燦的畫面，給人感覺就像是秋天到了，畫面元素簡約，只選擇了一片楓葉加上它的投影，體現空間感，主題文案排版在楓葉上，與楓葉融為一體，這樣用戶得分第一視覺就會被主圖吸引，同時看到主題相關文案，下面的其它文案通過從|秋|字垂落的豎線，分別右對齊以及左對齊，顯得畫面規整
第一張海報的日期排版就是采用普通常規的排版方式，我們會發現這樣的日期排版方式，在整個畫面中會顯得有點僵硬，并且左右兩邊不對稱的關系，會顯得右邊偏輕，使畫面的平衡感缺失，也正是日期的排版太粗糙的原因，導致整張海報的精細度大減。
樣機效果
我們保持其它元素以及排版都一致，只改變日期的排版方式，我們就會發現右邊的海報整體給人的感覺更精美，平衡感更強烈，所以我們在做設計的時候不要忽略每一個點。將每一個點都細心的設計，這樣的作品才會更耐看。
版式設計是我們設計中最基本的知識，我們在做設計的時候，通常會注意主題主圖的排版，而經常會忽略哪些不是很重要的信息，但是我們在分析文案信息的時候，也需要考慮整體設計的目的，有時候日期信息也是非常重要的信息，所以我們在做排版的時候，也需要認真考慮日期與整體需求的關系，并且日期排版風格也會影響整體的氣質。
案例分享
案例實操
總結
文章來源：優設 作者：設計小余
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
接下來的訪談翻譯自微軟官方博客，微軟的 Office 設計部門的兩位主管 Jon Friedman 和 Deepak Menon 在訪談中聊了一下 Surface Duo 背后的設計故事：
在過去的幾十年當中，數碼產品制造商經常會為了適應用戶的習慣和需求，來不斷創造產品。我們傾向于讓事物變的更小、更輕、響應更快、更具包容性。我們將不同感官融入程序，創造而優雅的產品。
隨著日常生活節奏和生產力的觀念變化，我們經常需要反思一個問題：如何賦予人們在創作和消費、專業和個人之間流暢切換的可能性？
即將發售的 Surface Duo 是一款獨特的雙屏移動設備，它有著一套專門為它的硬件所定制化的產品體驗，而它的設計也折射出我們探索問題的方式。
對于設計師來說，創造這樣的獨特產品的機會是難得的，就像你在一個住了十幾年的房子里面，發現新的房間一樣。會打開的是哪扇門？會通向哪個區域？會延伸出哪些創意？
對于 Surface Duo ，我們想知道，它的兩塊屏幕會延伸出哪些全新的工作流程，它的接縫要如何處理，怎樣減輕用戶的認知負荷？
受多年來我們在用戶研究上的成果所啟發，我們通過軟硬件結合的方式來進行 Surface Duo 的研發，讓它能適合你日常的需求，還可以帶來獨特的體驗，比如在雙屏上并排打開文檔。
Surface Duo 仍然處于起步階段，我們知道，它還有很多待解決的問題，這也是為什么微軟會引入更多的用戶和設計師，來不斷地完善它。
為了讓大家更好地了解 Surface Duo 的設計歷程，我們請來了 Deepak Menon ，他不僅參與了 Surface Duo 的研發和設計，還是 Office 設計團隊的負責人，讓他來告訴大家，Surface Duo 背后的創意、研究和設計決策。
Jon：謝謝你能來，Deepak，在過去的2個月時間里，我們一直在非常密集地使用和測試 Surface Duo~
Deepak：實際上，我干脆是拿它單主力機，現在我都覺得我已經不需要其他的任何設備了。
Jon：我們當然會這么說，畢竟是我們設計了它。但是，我想這也證明了一件事情，就是這種拓展式的雙屏，已經具備應對日常工作的能力，并且貼合大家的需求了。
Deepak：對。這不僅僅是「2塊屏幕智能手機」所帶來的體驗，它更接近于是一款「折疊式的平板電腦」的感覺。它是新事物，盡管是通過鉸鏈和轉軸來實現這種可能性。
Jon：我們接觸 Surface Duo 的時候，我們首先想到的一問題是：人類還有哪些需求是未曾被實現的？人們在達成目標過程中，有哪些問題是需要工具來彌合的？我們要如何來幫助用戶達成這個目標？雙屏的這種形態，讓我們有重新思考生產力的切入點。
Deepak：對，尤其是在移動端的生產力上。
在雙屏界面下，使用 Office 在 PDF 文檔上簽名，然后使用 Outlook 發送出去，簽合同的便捷操作。
Jon：確實，你的團隊在中國和印度這樣移動端優先的國家做了非常深入的調研。
Deepak：我們注意到很多用戶在同一設備上執行并完成一系列的任務，他們需要更快地切換。同時，企業也正在倚靠我們過去認為非?！笂蕵坊沟拿浇閬磉M行必要的經營。
Jon：在過去，生產力有這非常清晰的定量標準，比如一秒生產多少零件。但是如今，生產力和創意息息相關，你的情緒狀態和輸出的內容是一樣重要的。我們在不斷消費又不斷創造，反思和行動來回切換。其實這都涉及到一種傾向或者流程，你會按照一定的方式來處理信息，或者當你腦中突然劃過一個想法的時候，你會想立刻構建或者制作某個東西，而這也需要一系列的操作和任務來支撐。
從整個數字設備的發展歷程來看，雙屏的設備可能是最適合處理這種帶有步驟的「流程」。Surface Duo 最精巧地的地方，就在于它可以按照你的各種需求來折疊翻轉和交互，可大可小，同時也是一款貼合你的口袋尺寸的設備。
在橫屏模式之下，你可以像翻書一樣瀏覽 Word 文檔
Deepak：當然，它將內容消費提升到一個全新的層次，對于豐富內容的處理，Surface Duo 更加適合和專業。在 Outlook 當中，你可以快速瀏覽整個星期的工作安排，在 Word 中，你可以像翻書一樣閱讀內容。屏幕 折疊所賦予的空間讓更多的信息有了自然的展現空間。
借助 Surface Duo ，創造性的工作也得到了增強。當我使用 PowerPoint 來制作幻燈片的時候，我喜歡在一個屏幕上編輯，在另外一塊屏幕上預覽，兩塊屏幕當中，一塊幫我保持專注內容制作，另一塊幫我統領全局。另外，我也會在屏幕上開啟多個不同的應用。
將團隊的視頻通話和 PowerPoint 并列擺放，讓你一邊溝通一邊查看內容
Jon：使用它來進行遠程會議可能是我最喜歡的場景之一。我喜歡在開會的時候使用雙橫屏模式，將視頻置于頂端，在下面的屏幕瀏覽文檔。
Deepak：或者用另外一塊屏幕來調用嬰兒監視器！哈哈，疫情讓我們和家庭的關系更加密切，Surface Duo 讓我可以更多兼顧到家庭這邊。
Jon：對，很多人認為在疫情期間，家里有這么多人，移動設備的使用量可能會降低，但是很多數據表明，情況恰恰相反（僅2月初到3月下旬，微軟的 Team 移動端的用戶數量就增加了超過300%）。就我個人而言，我不想一直待在一個房間里面，盯著一塊屏幕，其他人也都反映，需要四處走動，或者在外面工作。當我開始使用Surface Duo 的時候，開始從中獲得更為強大的支撐，獲得更加有效的體驗。
當然，它最優雅的還是在窗口的管理上。打開多個窗口是一種非常常見的 PC 體驗，但是在單屏的移動端設備上其實還不算太普遍和舒適，但是在 Surface Duo 上則很自然。
Outlook 中雙屏帶來的額外空間讓你可以更快查看相關的收件箱和日歷
Deepak：關于用戶如何使用窗口來提高生產力，有過很多研究，并且兩塊屏幕之間的天然接縫，或者說轉軸，其實很自然地造就了「兩塊屏幕」和「多窗口」的認知。在某些情況下，因為接縫的存在，在兩塊屏幕上打開完全不同的兩個應用，其實是非常自然的事情。
在很多其他的情況下，用戶可能會在一個屏幕中打開一個新的程序，打開新的界面，執行單獨的操作，或者通過一個程序，在另外一個屏幕中打開下一步操作，然后再在兩個界面之間來回操作，這都是非常平穩的。這種被分割開的兩塊屏幕，創造了一種全新的交互契機，而不是制造約束。
Jon：對于 Surface 的軟硬件團隊，我最為欣賞的一點，就是這種共生和互相促進的模式。使用 Surface Duo，你可以擁有更大的屏幕空間，而且擁有眾多不同的使用應用的新方法，而 Surface Duo 也正好可以適應各種各樣不同的使用場景。而我們在創建這個產品的過程中，想要兼顧到如此之多的場景和需求，其實是需要兩個團隊親密無間地協作，才能做好。
對了，你剛剛說道關于照片、視頻、語音等內容——這些輸入方式的協作，對于創造性的工作到底有多重要？
Deepak：的確，在移動端設備上，攝像頭和麥克風是必不可少的。我們希望最大限度地讓 Office 最大限度地利用這些傳感器，在移動地使用過程中進行協同。用戶在通勤過程中如何參與到線上課程的互動？老師如何更快地給孩子批閱作業，家長要如何協助孩子？其實，Surface Duo 在研發探索的過程中，就有意識地在兼顧這些場景和問題。
從媒體庫當中，將媒體拖放到 PowerPoint 當中
Jon：我喜歡這些富有包容性的解決方案。人們的學習方式和工作方式通常是截然不同的，這些自適應性良好的輸入模型，能夠幫助能力各異的用戶完成他們所需的工作。
Deepak：當我們將新的輸入模型和智能化的功能結合到一起的時候，有趣的事情就開始發生了。我們幾乎還沒有涉及到創作方面的內容，用戶就已經擁有很多契機自由發揮，他們可以輕松、清晰地借用這種交互模式來表達自己。比如可以更加順暢地利用模板來制作精美的 Word 文檔和 PowerPoint 。
Jon：物理世界中有太多東西，我們可以將其逐漸的數字化。
Deepak：的確，將智能化的程序和多樣的傳感器耦合到一起，提高生產力的方式有很多——無論是提升工作效率、家庭安全性還是讓內心更加平靜。其實第三方開發者身上，我看到了更多思維和想法的延展，以及可能性。
Jon：對，我們已經看到很多非常有趣智能的東西了！在 Microsoft Hackathon 大會上，有人為 Surface Duo 設計了一款雙人游戲，兩個玩家各占一塊屏幕，隔著轉軸來來操作，彼此面對面，非常有趣！
Deepak：確實如此！
Jon：我們很高興 Surface Duo 最終能夠面向普通用戶，我很期待它最終會在普通用戶手中會迸發出怎樣的創意和靈思，他們能夠構建出什么樣的創新軟件。
Deepak：有太多值得期待的東西了 ！
譯者按：
微軟在硬件產品上，有著豐富的翻車歷史。90年代的事情太過久遠姑且不說，最近十幾年，出過很多比較失敗的產品，比如上架僅 6 天就全線下架的時尚社交手機 Kin One 和 Kin Two，比如被支付寶團隊戲稱為「1%」的 Windows Phone 系統和手機，比如幾乎不存在兼容性的 Surface RT 系列的平板電腦。這些硬件我全都買過，可以說全是坑。
這些產品單獨來看是失敗的，但是放在更長的時間跨度上來看，卻又是微軟整個生態和產品鏈條的構成和發展上，不可或缺的部分。Kin One 是整個 Metro 設計美學真正成型并走入移動端智能設備的里程碑（之前僅用于Zune系列播放器上），Windows Phone 則是 Windows 系統向小屏幕探索的必經之路，而 Surface RT 固然失敗，但是它是帶著桌面端 Windows 系統從傳統 X86 架構走上 ARM 的一次大膽嘗試。
失敗總是難免的，而微軟這種大廠更是有著試錯買單的底氣。從內部設計和產品團隊各自為戰，到統一到一個部門來統一管理，Surface 系列產品的誕生就是分水嶺，而這件事情是在 10 年發生的。
當然，在此之后翻車的產品依然會有，但是成功的概率比起更早的階段（比如應對 iPad 誕生時，倉促推出的觸摸屏PC），已經提升很多了。
如今只剩下拼硬件參數數字產品的世界簡直是太無聊了。我很期待 Surface Duo 這類雙屏折疊硬件能帶來改變。
文章來源：優設 作者：Jon Friedman
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
