不同的階段，臨摹的目的不盡相同。一般來說，前期臨摹更多的是練習軟件、技法，后期練習別人的風格表達，綜合運用。所以，我把臨摹分為技法臨摹、半原創到原創 3 個階段，每一個階段沒有絕對的界限，都是在積累創意，完全是可以用到自己的項目中去的。
今天會分享一個我當年做臨摹練習并融入實際項目中的小案例。
大概是在 15 年左右，在網上看到錘子設計師設計的一個圖標，覺得非常驚艷，當時就想把它臨摹下來，這是當時臨摹的一個效果。
△ 原作
△ 這是我當時臨摹的圖
我在臨摹這張圖的時候，想達到的目標是能根據自己的 logo 色及文字，做一個半原創的設計。
然后實際練習中，不斷觀察原作發現有一些細節值得學習：
當時，對我來說，在練習的過程中有一個難點就是關于第 3 個細節水的紋理執行有些難度，因為其中包括了粗細變化、虛實變化、明暗變化等等，單純的用圖層樣式或者矢量去畫的話，難度都比較大。這個細節當時耗費了我不少時間，后面突然想到其實也可以用合成的辦法來實現，然后我去找了真實水紋的圖片進行疊加，很快就搞定了。所以，只要能達到效果，不能太過于局限某一種思路。
分析并完成這些細節后，就是你在做這個練習中學到的點，嘗試把它們學以致用。
記得當時在 360 時需要設計一套關于摩洛哥藍色小鎮的官方定制版主題圖標。從搜集的當地代表性的圖片中發現，多彩顏料是當地的一大特征，所以決定以染料為關鍵詞去畫一個圖標，又因為顏料本身自帶多彩的特點，所以以它為主題圖標就很合適了。
然后在思考這個圖標的時候，首先會應用參考圖中的配色，并結合染缸的造型做出了第一版的效果。
這個效果雖然是表達了那個意思，但缺乏亮點，聯想之前練習過水的技法表達（臨摹中第 3 點細節運用），正好可以利用水的紋理做下強化，這樣就優化出了第二版。
嗯，看起來感覺有了一些特點，但感覺缺乏細節，接著思考水除了有紋理高光，應該還會有邊緣高光（結合臨摹中第 5 點細節），所以在邊緣嘗試加了高光，增加體積感，做出水要漫出來的感覺。
如果只有這一層高光的話，細節度感覺還是不大夠，在之前的文章《如何從優秀作品中偷師，用一個游戲案例教你思路》我有分享到在 UI 大佬的作品中能學到他們對于 1px 高光的使用（臨摹作用中的第 7 點），這里因為是液體的材質表現，所以增加一個高光點增加水的通透感。
到目前為止，似乎看起來已經差不多了，但考慮到現實世界中，溢出的彩色液體在透光性很好的情況下，也會對周圍環境產生影響，所以我在顏料設計的四周，配上對應的四種顏色的模糊投影（臨摹練習中的第 6 點）。
在思考下，在臨摹的圖標中為了使得圖標更加自然，作品中其實結合了很多真實世界中會發生的情況，比如水的折射，氣泡的比例，深淺等等，那對于染料來說，會有怎樣的真實情況發生呢？我當時想到一點是，染料在用的過程中其實很容易灑出來，所以圖標背板上現在太過于干凈了，增加一些細節能夠使得背板能夠跟主體物產生關聯，也更加自然。嗯，又是一個小細節。
最后，我們對比下第一版和最終版的效果，細節確實豐富了很多。
一張動態圖可以更加清晰的看到變化。
這次圖標的優化過程，我覺得有幾個要點對我來說印象深刻的：
圖標的風格可以是扁平的，但想要增加自然舒服的細節，一樣可以像畫寫實風格那樣仿照現實。你需要留心觀察這個世界，就算是一張照片中也能有非常多可以利用的細節。
碰到難做出來的細節，多想想有沒有更效率的辦法。比如在做水紋理的時候，一開始就想著完全靠鼠繪畫出來，結果效果一直不大好，然后利用 PS 合成的方法，很快就能把效果做出來。
對于圖標來說，要注意其整體性。比如圖標中的主體物不要跟背景脫離，不要讓圖標背板只是作為一個容器，而要讓背板也成為圖標本身的一部分，這樣圖標的整體性會更好。
臨摹的過程中，一定要多分析，多記錄自己覺得是細節的點。每一次記錄，都可能是將來設計時提升細節的靈感來源。
以上內容只是我在日常練習中應用到實際項目中的一個小案例，其實還有非常多的靈感想法都來自于你平時做的練習，關鍵是要多動手，多總結，才能增強自己對細節的把握能力。
文章來源：優設網 作者：彩云譯設計
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近負責的新項目快上線了（感覺我好像一直在做 0-1），給大家總結了5個一定會遇到的新項目盲區及最新的解法，希望能幫助大家在交付開發前就順利完成設計輸出。
2020 年 4 月后，我們在設計 iOS 登錄界面的時候都知道必須加上蘋果官方強行要求的 Apple 賬戶登錄按鈕，但關于這個按鈕的設計規范其實有比較硬性的規定，沒有注意的話到了開發還原的時候就容易踩坑。
在國內的 iOS 登錄設計中通常突出的主流登錄方式是“微信”，手機登錄以及其他的第三方登錄都會以更弱一點的視覺方式呈現。
蘋果官方是允許對 Apple 賬戶登錄按鈕進行一定的自定義的，其中就包含將其弱化為一個圓形的圖標按鈕，只是圖標與圓形按鈕的大小比例是官方固定的比例（這個大家直接下載官方提供的圖標，它是自帶留白的區域的，保持圖標與高寬一致就符合要求了）。
而國外的 iOS 登錄設計中通常沒有那么多的第三方登錄方式并存，主要的“Facebook”與手機登錄通常會與 Apple 賬戶登錄按鈕同一級出現在界面中。
這個時候需要特別注意的是，蘋果官方對于這種大按鈕的限制主要在于 3 個部分：
剩下的按鈕樣式，比如顏色和描邊也非常有限，只可以使用白色填充黑色描邊與純黑色底這 2 種。
想了解更多具體內容，可以參考官方貼：https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
還記的早幾年做安卓項目的時候上架應用商店的啟動圖標輸出還是和 iOS 差異不大的，基本就是尺寸換換。這次輸出啟動圖標，被安卓的開發大大告知，安卓可以出這種帶動效效果的啟動圖標了，它的原理和效果，如下圖：
實現這個效果的設計配合輸出也很簡單，只需要整理一下的具體啟動圖標輸出就可以：
1. 啟動圖標（前景，不帶背景的）-108dp（324px）
當然以上僅針對純色背景，可以與 logo 主體輕易分隔的啟動圖標。如果是混為一體的話就需要調整輸出方式為以下：
想了解更多具體內容的鐵汁，戳底下官方傳送門：https://developer.android.com/guide/practices/ui_guidelines/icon_design_adaptive
這次新項目又遇到了開發中改稿的問題，大部分都因為全屏的背景圖切圖大小問題。
個別全屏視覺的界面，比如閃屏、登錄頁、音視頻語音等等，我們通常設計時不考慮切圖的大小問題就會比較放飛去設計。
但實際情況是一張全屏的花色 3 倍 png 切圖基本都在 2M 左右，就算把壓縮率提到 80%+（市面上大部分壓縮軟件的壓縮率都很有限，比如大家常用的 tinypng、pp 鴨等），就算你重復壓縮，也有至少 200 多 KB，遠遠超出開發 100k 以內的切圖大小限制。
所以不得不要求我們在輸出格式的時候拋棄 png 格式，啟用 JPG。
不過實際設計時候我們可能仍然會遇到不能用 JPG，必須用 PNG 格式的情況（透明度蒙層），那么建議大家可以嘗試以下 2 個小技巧：
最后不想屈服于樣式限制的鐵汁，一定記得提前輸出格式大小康康會不會超標嚴重（盡量控制在 100k 以內），不然無法落地再好看也沒有用咯。
目前關于移動端界面里個別小動效的導出比較主流的幾種格式是：Gif、逐幀圖、Lottie（Jason）、Webp、Apng。
Gif、逐幀、包括前幾年流行的 Lottie 大家應該都比較熟悉了，這里稍微科普 2 個陌生一點的格式：
目前我覺得性價比最高的就是 webp，它的優勢主要在于：
唯一的 2 個問題在于：
我度娘過一些導出 webp 的方式都不是很好用，問了我司的動效設計師，推薦一個比較簡單靠譜的方式分享給大家：
1. 先從 AE 導出逐幀圖（記得需要循環的動效做好循環）
不知道如何到逐幀圖的看這里：渲染→渲染設置→格式→選擇“PNG”序列→導出即可
2.下載 isparta
3. 直接將 AE 導出的逐幀圖文件包拖到 isparta 里導出 webp 格式（可選）
設計交付的協同平臺現在市面上很多，很多大廠也有自己內部的協同平臺來承載設計交付，俺們豬廠用的叫 dbox（非常滴不好用），在強推之下開始申請經費改用 Figma 了。之前為了更換協同平臺，把交付的協同平臺都做了一番調研，這里給大家直接看表格吧。
看完圖大家就會發現除了 Figma 大家的使用情況不會差很多，差的主要還是錢?？偟膩碚f的建議就是，如果已經從sketch改用Figma的土豪團隊就可以直接分享Figma文件鏈接給開發搞定切圖標注以及文件存檔這2件事兒了。
如果還在用 sketch 和 XD 的鐵汁，交付型的協同平臺我個人比較推薦 Zeplin，雖然有的人會說它服務器在國外很卡，我覺得其實還好吧，同時 Zeplin 近幾年還解決了 Win 系統適配的問題。
然后最后小吐槽下騰訊的 Xshow。一開始我覺得它是最香的，因為高清度、流暢度到美感幾乎都比較完美。一直到我發現了它居然是個完全開放的交付協作平臺，也就是別人知道你的賬戶 ID 之后就可以搜到你并看到你的所有項目文件，瞬間安全系數降為 0。作為一個明顯對標企業級的協作平臺這么瘋狂的植入社交功能，到底是企鵝的社交基因太強大還是怎么肥四？
文章來源：優設網 作者：Nana的設計錦囊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
編輯導語：社區團購作為2020年的一大風口，雖然伴隨其火熱程度，社區團購基本上是人盡皆知，但是真正深入了解這個行業的人還是占少數的。本文作者從團長、產業模式和業務競爭關系三個方面出發，對社區團購的優缺點展開了分析討論，與大家分享。
整個大零售產業至今沒有誰站出來，對于社區團購市場的影響力和跨界沖擊力做過很系統的闡述。少數幾個產業知名人物給出過零散的意見，步步高超市的王填在兩會提案中直接表態，有關部門必須嚴格監管社區團購的擴張，嚴格落實市場總局“九不得”規定，禁止社區團購互聯網大公司通過價格手段傾銷。
當然，步步高自己一年前就在長沙做著社區團購。名創優品的葉國富說社區團購再干一兩年的話，500平方以上的超市基本沒戲了。盒馬的侯毅說社區團購是電商真正意義上，可以讓全品類進入了中國所有地方，尤其是下沉市場。但是目前社區團購的交易形態和業務模式還很早期，整個賽道的模式還有很長的演變可能性。
整個賽道少數幾個站出來發言的玩家，基本上都對社區團購的存在，以及三大互聯網公司過去半年高舉高打的重視，來自傳統零售的防御心尤其重。
不過，按照此前相關部門監管互聯網新業務的慣例來看，只要一個創新消費互聯網業務的最終價值倒向于消費者，而且能夠優化原來賽道的產業效率，監管在逐步觀測和意見調整的總體態勢，一向都是開放和支持的。
基于實體店業務的傳統零售行業，對于社區團購的防御心應該是遠超過此前傳統電商和數字化零售跨界物種。社區團購提供批發式零售的家庭購買的成本和效率優化，顯而易見的具備模式優勢，代表著家庭場景購買的更先進生產力。
家庭購買一直是此前電商并未完全占領，或是僅有部分占領的一塊最大零售陣地。就像以3C&家電起家的京東，會在財報分析師會議上，明確喊出京東未來第一品類是快消品——通過電商解決方案滿足家庭購買一站式需求。
家庭購買的場景優質性和解決難點在于，它是需求和供給在履約層面最具確定性的零售流通方案。簡單的說，它只是庫存和房屋之間的確定性流通關系。
我們通常以為，一個人去沃爾瑪為家里采買日常即時用品，是他自己和沃爾瑪的買賣關系。其實對于沃爾瑪來說，它的門店周邊三公里內所有房屋里住著哪個人，其實沒有差別意義。張三搬出去李四住進來，沃爾瑪的來客邏輯都是一樣的，這也是傳統零售極度講究門店選址的原因（除了美國Costco）。如果新搬來的李四不去沃爾瑪，不是門店和李四房子的流通關系有變，而是李四認為沃爾瑪在三公里覆蓋圈的有效條件下，都不能替代沃爾瑪逐步喪失家庭購買的一站式價值（假如沃爾瑪確實不能滿足的話）。
社區團購的出現，帶來門店和房屋之間的確定流通關系，升級為門店和社區（多個房屋）的確定關系。購買場景的量變擴充，帶來這種確定關系的規?；?，很好的優化了單一訂單（無論是到店、到家、電商）的成本與效率。自此，多個有利條件開始匯集到社區團購業務場景：家庭購買的商品普遍類同確保單品量相對集中、家庭品類價格空間微薄下還能創造價格優勢、社區級集約化履約的成本優勢、預售制集單的備貨確定性（完全平臺化作業的話，甚至可以做到零庫存）等。
社區團購屬于真正意義上第一次，實現了業務模式的先進性、平臺組織機制先進性、前端體驗價格的先進性，三位一體的同步進行。美團優選這種完全平臺化組織業務鏈路的社區團購，甚至能在零庫存的條件下，短時間內快速提高訂單量規模。這讓美團優選的主要平臺任務，就是擴展入駐城市。而據我們36氪-未來消費 通過各種信息來源了解到的是，美團優選目前確實是訂單量整體相對最高的社區團購平臺。
與之相比，社區團購帶來直接競爭關系的業務，應該主要發生在跨界但有交叉的其他提供購買的零售流通渠道。這種跨界又交叉的跨界關系，類似便利店的主要競爭者，其實發生在門店周邊跨界的餐飲、烘培、茶飲等業態。彼此業態模式很不相同，但都是提供社區級的家庭日常購買。
社區團購的模式創新很大一部分確實在團長，脫離了團長的社區團購，很容易和社區門店自提業務混淆，即很類似此前破產的合肥呆蘿卜做的社區店隔日自提業務。有了團長，平臺才徹底放開手腳，專注做好平臺特有且主導整條鏈路議價權的幾個事情。
第一，不用直面終端用戶的營銷拉新和履約服務，全部交給團長。但是，2020年美團，滴滴，拼多多三大互聯網巨頭大規模砸錢投入，打破了此前由興盛優選這種小公司創新才有的行業默契，直接把補貼給到終端用戶。目的是短期內快速結束這個賽道的競爭和地盤劃分?？偟膩碚f，社區團購搶不了小菜販的賣菜生意，但是確實很傷興盛優選的心，也很影響社區超市、百果園、錢大媽這些渠道商的業務。
第二，平臺可以專注打造一套以團長為交互節點，以平臺-團長-終端為交互關系（類似傳統零售的經銷商-小店-終端消費者），以社區級為履約交付單位，形成一套基于社區級場景的家庭日常購買生意。這樣，平臺就可以像一個傳統零售的批發經銷商，專注做好三個事情：小店拓展、品牌貨源、供應鏈物流。
第三，簡單地說，就是平臺和團長，分工程度變深，彼此有限的資源和精力，更好的專注一個業務節點，做出更深度的能力。有了深度能力，效率自然就會變得更高。有了這些綜合特性的驅動，分工優化彼此的效率，這個生意的魅力就形成：有了互聯網的信息流效率及規?；亲叩挠质莻鹘y批發生意的成熟商流模式。
第四，社區團購主打的是家庭日常穩固購買，因為家庭購買與個人購買的最大區別，就是家庭購買是根據物流地址決定供給流通。簡單地說，個人購買：服飾，手機，美妝，餐飲，一個人去全國任何地方的體驗，其實都是一樣。但是家庭購買：快銷、食品、糧油、生鮮、清潔洗護，那就必須是在家里用。家庭購買的需求起點，也是圍繞著家庭和住址發起。
平臺的供給，自然圍繞著家庭設計整個供給路線和效率公式。這也是為什么，傳統零售辣么講究開店選址的重要性。
社區團購更升級三步：
第五，這種生意集中下來，就成為零售業很理想的一種生意：批發式零售，美國Costco就是批發零售的集大成者。這種生意還有一個優勢，就是所有的競爭力全在商品和價格。因為批發式零售，價格即使沒有補貼，也比一般零售渠道便宜。
只要再做到東西品質很好，那簡直就是零售最硬朗的實力：好貨低價。做到這種程度的零售業，競爭力是空前的，互聯網都打不贏的優質商業模式。美國Costco在全球第一消費互聯網大國的中國開店，生意比所有線下店和電商都好，人家就沒有互聯網。
社區團購的問題也有，而且目前暫時還不好輕易解決，導致這個生意的現狀和服務力，并沒有發展的太成熟，業務鏈路上還有很多服務細節、品控和效率優化存在問題。
第一，暫時無法解決出貨規模和品類豐富的函數關系。即規模是社區團購這種批發式零售的獨特特性，但是一旦單品和品類走了豐富路線，鐵定會稀釋單一商品的規模。沒有規模，就沒有價格優勢，就會反過來反噬社區團購這個商業模式的很有優勢。
第二，暫時無法提供完整的一整套解決方案，這點生鮮最為典型。因為一盤菜的烹飪，中餐需要至少5-15種主料、輔料、配料、佐料。導致一盤菜的烹制，傳統生鮮提供的購買體驗，都是少量而多種的購買。這種購買是菜市場這種低門檻做生意，分散化的攤位設置又豐富配置菜品的線下場景強項，超市和電商直到今天都搞不贏菜市場。社區團購沒那么大本事，搶不了小菜飯的生意。擔心會搶小菜飯生意的人，骨子里還是看不起農民工。生鮮電商和社區團購，目前的產業能力還要大大的進化。
第三，對于三巨頭、京東、阿里來說，各家企業也很清楚，生鮮只是當前快速積聚訂單的起步手段。社區團購不能等于生鮮零售，這是大家心里揣著明白嘴里不說的共識。但是社區團購如果專注賣家庭高易耗的品牌快消品，它的價值也不高，利潤率也很低。這里面的未來方向之一，還是要加強自建供應鏈，堅持走自有商品，或是品牌專供的路子。
第四，社區團購目前還有一個具備但沒有很強發揮的模式能力，就是深入到村鎮一級做下沉最徹底的團購。城市小區是社區，村鎮也是社區。目前中國電商最下沉的地方，還只是到鄉鎮，還不能到鄉鎮下面的村子。因為電商一個訂單一個物流包裹的履約模式，絕對玩不起深入到廣袤分散，訂單又不是很集中的村子?？墒寝r村家庭除了極端貧困戶，哪家不是完整意義上的家庭購買需求？社區團購的價值，在于它首次用最效率和經濟的方案，讓人看到了信心，可以做農村家庭一站式購買的渠道商，而且還可以深入到村落這個最下沉最末端單位。
生鮮前置倉、到家即時零售、到店購物、社區自提……這些圍繞著社區場景做的家庭購買，社區團購與他們在模式也不具有可比性，但是業務方面未來的競爭關系會越來越強。
第一，前置倉和社區團購，模式很不一樣，但是在生鮮品類、家庭客群單位、社區場景的履約線路設計三個方面，高度重合，導致雙方在城市社區家庭的生鮮購買，確實存在直接的競爭關系。
2020年社區團購主要在二、三線城市作戰，現在開始往北上廣深一線城市拓展（上海還是最少）。這些一線城市都是前置倉重點布局的城市，兩者的訂單競爭短期內會有一定的直接關系。美團同時押寶了前置倉的美團買菜，社區團購的美團優選。而且美團的社區團購走的是更徹底的平臺化模式，整個庫存管理和拓城速度都做的很不錯，外界確實對美團未來發展很看好。
反過來說，今天阿里社區團購，即盒馬集市整合了零售通小店資源，反而堅持在供應鏈和物流方面走類自營的強控模式。加上盒馬本身也在自營模式下做了社區到店和即時到家零售，以及還有手機淘寶流量扶持，阿里生態的潛在可用資源。預計美團和阿里，加上京東（如果京喜也有一個亮點模式），三家在社區級零售的競爭，在社區團購賽道的競爭，未來會非常好看。
第二，前置倉和社區團購的競爭力對比，兩者現在有差異，但是對比的不公平。
因為前置倉所有能力都是圍繞著品類——生鮮展開的。社區團購的所有能力是圍繞著鏈路——團長展開的。當前階段社區團購有了大投入而很火爆，才顯得盤子很大。就好比自己家里今天結婚辦喜事吃得好，就說自己可以過上一貫大魚大肉的好生活。
因此，兩者不在一個投入高潮期，不能代表社區團購可以替代前置倉，或是優越于前置倉的生鮮流通的模式，或是綜合能力兩者孰強孰弱（效率方面，目前來看前置倉的成本履約偏貴，但是綜合體驗更好）。
第三，即時到家零售背后，還有一個類似的平臺化模式——同城零售。
他們這個玩家是用電商平臺的規模效應，也在做著前置倉的生鮮生意，而且旱澇保收的只賺傭金。相比自營類且專注生鮮的前置倉，對于商品的操盤風險承擔的更少一些。當然，這種平臺天然要龐大，目前市面上也只有京東到家、美團（又有美團）、餓了么、天貓超市淘鮮達、淘寶買菜。
第四，即時零售天然是個大生意，也就是說，誰做前置倉，哪怕是創業公司，一開始就是正規大公司的規模來建構生意。
同城零售的規模更大，剛才提到，市面上就幾家在玩。但是社區團購可以很小，只要團長搞定一個社區，再搞定貨源，就能玩起社區團購生意。還是那句話，團長是社區團購生意的關鍵，而團長又是一個門檻極低且個體化的角色。
這也是為什么，武漢疫情封城期間，大量有貨源的小菜販，搞定一兩個社區的物業公司或居委會，就能在各個小區玩起社區團購。畢竟，要說社區團購還需要什么互聯網工具，微信群聊+微信支付，老人小孩都會用。
但是，團長既不屬于平臺的員工，也與平臺沒有強綁定的合作關系，導致團長的能力建設與長期成長都很有風險，團長的流動性（流失率）也非常頻繁。團長角色的價值定義，興盛優選此前并沒有為行業提供一個成熟版本，這是擺在所有社區團購玩家面前的一個很復雜的問題。
文章來源：人人都是產品經理 作者：aria在這里
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
設計系統基本就是組織如何構建數字產品的故事，在公司內部，設計系統改善了產品團隊之間的協作，而設計和工程團隊之間面臨的一個常見問題是：共享品牌準則和界面信息。在開發過程中，應該遵守還原設計的內容，但是我們都知道這并不是那么簡單。
從目標達成的角度來說，設計規則的創建與執行同樣重要。我們期望參與產品的每一個角色，都能記住設計規范，結合設計原則（Perceptual Pattern ）最終達成界面展示在用戶面前的樣子。這也就需要設計系統內，有一套控制性強、拓展性高的方法來維系產品的風格呈現，也就是我們今天將要討論的設計變量（Design Token）
什么是設計變量（Design Token）
在數字產品的概念中，許多中心和微小的UI信息片段將在多個平臺上使用，被稱為：設計變量（Design Token），他們是設計系統中設計語言的構建塊，也是設計決策的呈現。他們維護核心樣式的所有值：間距，顏色，版式，斷點，動畫，字體，平臺比例尺，組件狀態等，最終通過數據表示。命名規范和結構化的約束，可確保產品體驗的統一度與靈活性，更進一步可為產品打造賦有情感的品牌認知。
而對于SaaS類或者APass類的公司而言，設計變量還可提供給多個合作商所用，滿足多種定制化的訴求。
在以往的真實產品中，示例（如下），設計人員會發現，實現和樣式管理的環節在開發過程中是完全斷掉的，設計語言轉化為開發的語言時，缺少風格系統完整性的延續。我們通?？吹降膕tyle代碼都是一些幾乎沒有體感的參數，且公司產品體量越龐大復雜，想要全局迭代就越是痛苦。
但如果我們將這些參數封裝起來，用語義化的方式來進行描述，就增強了“系統下的畫面感”，如“font-size-level03”、“border-distinguish-background” 等，就是設計準則下情景化的歸類與描述。
但語義命名只是一個最終呈現，真正讓設計與開發者都能”讀語義，識運用“。還需要我們在設計系統中建立一整套完整的設計變量對應表，并讓大家對它們有著清晰的記憶。
這里我們將以群核科技旗下，工具設計系統（Tools ）中的設計變量為例，來給大家進行詳細分析。首先在設計原則下，我們引申出設計變量規則的制定原則：精準、靈活、易讀。
意指歸類與對象的精準性，配置化的靈活度，語意命名上的易讀性。
對所需范圍進行定義，命名規則與前端書寫規則達成約定。
變量的“結構完整”，有助于設計與工程團隊在長期維護上，提升靈活度，3層繼承結構，很大程度保證了“精準”“靈活”這一原則。
主題定制
我們找到產品界面中定義“核心樣式”的部分，例如顏色，字體大小，空間，動畫，陰影，斷點等等。通過這些具有統一命名規則的實體，用于代替硬編碼的值，直接集成到設計系統下的組件庫里，也在日常的產品界面開發中使用。
通過繼承，別名變量起到了銜接全局變量和指定變量的作用，指定變量影響了最終的樣式呈現，從而實現主題功能。
單個主題可供多個產品團隊使用，主題本身也提供可配置化，即擁有不同的主題外觀體驗能力——如“客戶訴求”、“用戶自定義”，“產品定位差異”等，也可通過創建新的主題，完成新的對應表，繼而產生相應的風格模式，例如“暗夜/日光模式”或“舒適/緊湊”布局模式，“企業品牌”定制模式等等。
主題功能在產品中體現
跨平臺呈現
多端設計是未來發展趨勢。最新的iPadOS 14還為許多應用程序添加了側邊欄，包括音樂，照片，文件和快捷方式，更加高效。它使iPad更具Mac感，也降低了學習成本。
目前我們很多產品都要考慮在 Web、iOS、Android 上設計。如果有新的功能增加，設計和開發會消耗較多的時間在上面，而且很難去統一把控。
Design Token 在跨多端設計中不僅是存儲樣式的變量，更是一套用于各操作系統間進行翻譯的口令。我們希望通過變量來控制一些樣式的屬性，在不同終端做到自動化的映射。
假設在移動端正文字用14x，而在pc端為12px，雖然它們值不一樣，但他們都是使用的color_text__primary，在不同終端變量會自動根據設備來取不同的值，通過一套設計就能實現多端運行，提升效率節約成本。
擁有了強大的設計變量樣式庫之后，它對我們的工作流程將帶來什么革新呢？
顯而易見的是，團隊將節省非常巨大的工作量，我們不再依賴單個工程人員的修改質量，且能更大程度減少跨組依賴。此外，早期設計工具無法與設計變量生成器進行本地通信，我們通過優化Sketch插件，完成了變量命名數據的輸出，使得工程人員可直觀看見變量名稱。這將為設計驗收節省大量時間。
產品的大批量的歷史問題也得到解決。數字化的自動識別效率遠高于痛苦的人工調整，設計師和產品團隊都將收獲全新的迭代方式，這是有歷史意義的一刻。
簡而言之，設計變量作為一個管理風格樣式的有效手段，可集成主題管理，對跨平臺開發也同樣起到作用。簡化團隊合作協作流程，提升迭代維護效率。尤其適用于需要構建多個Web應用程序和跨終端應用程序的組織。
文章來源：站酷 作者：酷家樂UED
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
隨著移動網民數量增速放緩，流量紅利逐漸消退，平臺競爭愈發白熱化，優質創作者成為平臺的必爭對象。在后流量時代，抓住優質創作者的核心是平臺流量所能附加的多元價值，因此對流量的深耕與私域的變現成為了必定的解題走向。
面對這樣的趨勢，研究者應該如何走進創作者的世界，深入洞悉他們的私域運營需求？我們在對多名短視頻創作者的研究中沉淀了一些思考。
為什么關注私域變現？
——理解行業和業務是選題關鍵
行業趨勢：創作者的收入結構正在變化
短視頻創作者的傳統收入來源是依靠播放量獲得的平臺流量分成。但隨著短視頻玩家的不斷涌入，公域流量瓜分緊張，基于粉絲沉淀的私域變現成為創作者多樣化收益的來源。
從行業公開信息以及我們所接觸的創作者的鮮活案例中均能發現，非流量分潤的收入占比正在提升，多元的私域變現已成為他們收入的重要組成部分。
公域流量紅利見頂
私域流量收入可觀
業務思考：平臺對創作者多元變現需求越發重視
短視頻領域目前呈現創作者多平臺分發的趨勢。我們在研究中發現，多平臺混合運營的作者占比已接近七成；頭部作者也是如此，抖音和快手百萬粉以上的作者中有三成為雙棲作者。創作者精力被多平臺瓜分，而影響創作者對平臺的重視度和運營投入度的最核心因素就是經濟收益。
在“主陣地+重點運營平臺+純分發平臺+其他關注平臺”這種金字塔型的混合經營模式下，平臺只有向塔尖挺進，才能留住創作者。于是，支持創作者私域營運及多元變現也成為業務后續發力的重點方向，我們便順理成章的將研究聚焦在這一主題上。
經濟收益影響創作者平臺投入
私域運營拉動平臺成為主陣地
研究誰？——找準關鍵角色
私域運營是一個相對宏大的研究主題，要讓研究具備可行性，就要鎖定明確且合理的研究對象。找準關鍵角色，能夠起到讓研究事半功倍的效果。
考慮等級能力差異，研究鎖定頭部作者
內容創作的生態中，作者等級是影響需求差異化的核心變量。新手作者大多是視頻創作小白，還處在能力突破和粉絲積累的初始階段，更加關注成長收益，即創作能力的提升和流量的增長。而偏頭部作者已經積累了一定的創作經驗和粉絲基礎，更在意經濟收益，對于內容價值最大化需求強烈。
頭部作者也往往意味有著更好的粉絲基礎、更多的實戰經驗、更深的行業理解，對研究而言有更深的挖掘價值，也能在更短的時間內輸出更多有效信息。所以本次我們圈定頭部作者作為目標首選。
考慮不同垂類覆蓋，避免信息產生遺漏
短視頻的創作和運營日益走向細分化和垂直化，不同的細分垂直領域，也存在不同的變現方式和需求。因此，垂類領域是創作者研究中不可忽視的另外一個核心變量。
目前短視頻多元變現方式主要有電商帶貨、付費專欄、咨詢服務、打賞送禮等；我們在選擇創作者的內容垂類時，也有針對性的確定生活、家居、教育、情感、影視五個垂直方向，覆蓋所有變現類型。
研究什么？——梳理私域變現流程，搭建研究分析框架
在具體執行前，研究者首先要確定研究的關注重點，劃定研究的邊界。前期需要做大量的案頭研究工作，充分了解行業現狀。短視頻領域研究中有一些常用的信息獲取渠道，略作梳理，以供參考。
充分的信息獲取決定著研究的下限，能為研究洞察打好基礎，也能幫我們形成后續研究的系統性框架。我們基于私域運營的主要流程梳理，提取出影響私域運營效果的四個核心環節，形成最終研究產出的分析框架，后續關注創作者在該框架下各環節的具體需求及問題點。
如何理解創作者？
——5種思路，讓深入分析成為可能
創作者對于需求的表達往往是主觀和模糊的。對于B端創作者而言，由于具有更明確的平臺利益訴求，他們對于需求的表達甚至會表現出更多的“私利”和“怨念”——“我想要更多的流量分成”，“我想要完善的運營服務”，“我辛辛苦苦做內容，卻沒有收益，真讓我寒心”……
但是作為平臺，流量和資源的有限性決定了無法彌合多方矛盾，滿足無限需求。那么，作為研究者，我們不應該只簡單傳遞“用戶要什么”，而應該從用戶需求出發，剖析需求背后的形成原因和深層問題，告訴業務“為什么會這樣”以及“我該給什么”。
下面我們將以研究中的一些發現為例證，提供幾種研究分析思路，讓大家更好的理解如何還原創作者需求的本質。
一.不僅呈現事實，更要有底層思考
平臺的流量分配已經從粗放式的內容引入時代發展到精細化的內容建設與資源分配時代，策略不斷積極調整，向更多優質的內容傾斜。創作者們在尋求流量更持續、有效的利用時，也越來越意識到優質內容有著更大的增值空間，希望在平臺的引導和扶持下，生產更優質的內容不斷“圈粉”。
然而不同的平臺有不同的調性和內容偏好，這時候創作者困惑的是：到底何為優質內容，我又該如何去創作平臺喜歡的優質內容？這就需要平臺通過激勵政策和創作活動的引導給出答案。
在研究者的分析中，我們不能僅僅暴露“平臺政策不清晰”的問題，也不能只對競品的做法做簡單的羅列和復制。值得深入思考的是，現有政策和用戶需求的差距點在哪，后續優化的原則和方向是什么？
我們基于對于作者需求的理解和競品差異點的分析，提煉出平臺政策引導的三個優化方向：
1.垂直化：內容消費需求日益多元化，平臺創作激勵活動也要深入覆蓋更加多樣化的垂直細分領域；同時，為了增強創作者感知，應將各種激勵計劃顯性化進行包裝，清晰傳遞平臺扶持的垂類和方向。
2.日?；?/strong>：平臺創作活動應當多樣且高頻，充分契合不同領域創作者的興趣點，且需具備較強的時效性。
3.矩陣化：內容創作不再只是作者的單打獨斗，更需要在重大運營事件上聯合平臺和MCN機構進行內容共建、資源聯動，最大化內容的影響力。
二.不僅要看自身，還要看行業先行者
在短視頻賽道上，存在著諸多優秀的先發競爭者。競品在平臺管理、運營服務、產品功能等諸多方面都能為研究提供較好的借鑒作用。在研究中，作者的表達只是我們研究的“引子”，關注競品、對標行業標桿、分析差距，才能夠對作者需求形成更準確的判斷，對滿足需求的方式和重要性層級形成有效啟發。
以平臺運營服務支持為例，競品平臺的做法為我們提供了良好的借鑒意義，也形成了行之有效的業務參考。平臺與作者的理想關系是共贏共生，在服務過程中，需將平臺的玩法透明地傳遞給作者，讓作者對于如何運營、如何變現心里有底，建立“只要跟著平臺走就沒錯”的信賴感，與平臺之間形成更強的依存關系。
三.關注生態各角色，納入C端視角
內容創作生態包括平臺、B端創作者、C端用戶三種主要角色。創作者運營的目標受眾是C端用戶，對用戶更有吸引力的內容才更容易形成粉絲沉淀。因此，研究B端創作者，B-C聯動的分析視角尤為關鍵。我們可以從“C端用戶要什么”，推導出平臺需要幫“B端作者做什么”，進而給出更貼合創作者實際運營情況的賦能措施。
研究發現，在粉絲沉淀環節，從C端視角出發，內容是形成作者關注關系的關鍵，也是塑造作者IP形象的關鍵。那么，對應到對B端需求的滿足上，平臺就應該為其優質內容的露出提供更多能力支持，包括內容的自主管理、內容的連帶互通功能，最大化發揮內容的價值，充分賦能創作者。
四.聚焦群體差異，對細分需求保持敏感
不同類型的作者有不同的訴求，研究中需要更多關注差異、滿足差異。
以變現轉化環節為例，建立用戶信任感是創作者的一大需求。商業社會、信任為王，信任是形成購買的起點。平臺要重視對創作者身份的包裝與強化，外露關鍵信息，快速建立用戶對作者的信任感，從而促進付費轉化。在這個過程中，不同垂類下促成用戶下單購買的信息是不同的，作為研究者，應該對差異化的信息需求保持敏感。研究發現，電商購買中用戶更看重優惠折扣和交易信息；而專欄購買、付費咨詢，則更需要強調身份背書、作者榮譽等專業信息，以及增強作者和粉絲的溝通與交流，提升用戶信任度。
基于以上分析，業務在信息外露、增強作者身份形象感知上也規劃了進一步的優化措施，促進用戶付費轉化。
五.不僅看短視頻，還看垂直行業賽道
依托于短視頻平臺的私域變現，本質上還是電商/知識付費，短視頻只是在商品之外額外提供了一個內容展現、IP塑造的自媒體營銷方式。因此，研究視角不能僅僅局限在短視頻本身，更要學習垂直賽道的玩法，如：電商領域對標淘寶、盒馬；知識付費領域對標得到、小鵝通等成熟玩家。他們在其各自領域已經形成較為成熟的變現模式，短視頻平臺在交易閉環的實現效果上需要向這些垂直賽道產品看齊。
縱觀行業趨勢，短視頻平臺也在不斷引入產業鏈上的更多合作伙伴，例如：上游引入電商服務商進行供貨服務和產業帶打造；中游引入內容服務商提供創作者運營能力培訓、代運營服務；下游引入品牌服務商助力營銷推廣，以此提高平臺變現能力，共建生態繁榮。
結語：理解創作者，先要成為創作者
B端創作者的研究相對而言對研究者具有更大的挑戰，需要具備更豐富的行業知識儲備和更深入的問題洞察能力。理解創作者、理解內容創作生態才能為業務提出更切實可行的落地建議。
理解創作者，不能僅僅是走近創作者，而是要成為創作者，親身經歷才能更有感悟，這也是無論做任何領域的研究，作為研究者都應該具有的態度。
短視頻行業正經歷著它蓬勃的生長，未來有著無限的可能性，希望你和我們一起經歷、一起探索，也希望我們的思考能夠為你帶來一些啟發。
文章來源：優設 作者：百度MEUX
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
全文1萬4千字，講解文字編排有兩個層面的作用。其一，它做了一些傳遞信息的工作；其二，它自身在合理地編排下就會有韻律的美感。
在通常版式設計中，一般是由文字、色彩、圖形三個要素組合而成的。通過這三個要素的有機搭配，從而給人視覺上造成一定的沖擊，激發人們的閱讀興趣。
其次，文字組合編排是構成版式設計中最主要的構成要素，也是傳遞信息的重要的設計手法和策略。字體的選擇是否合適則會直接影響版式的效果，雖然能現在可供選擇的字體五花八門，但是所選擇的字體要能夠與版式的主題相吻合。除此之外，文字的字號也會影響閱讀，在排版時要注意文字信息的等級關系，做到有主有次。
如果文字從發明出來的那一刻起，就是為了記錄和傳遞信息，那在版式中的文字就是通過設計設計手法來更好的傳遞信息。
怎么去理解這句話呢？如果大家看過《王牌對王牌》這節目，里面有個游戲叫傳聲筒，里面的游戲規則是“每隊輪流參賽，每隊任選5名成員，每個成員用隔板隔開，第一人將對手所出題目，演繹給隊友，只能通過音效和動作表達，依次傳遞給下一位隊友，經過三四個人傳遞后最后一名隊友，猜測題目上的信息。猜對得一分，最終積分高的一隊獲勝?！?
這種形式像不像設計師的日常呢？老板或者領導有個“牛批卡拉斯”的想法,然后他在想法告訴運營總監或者文策劃總監，然后在由下面的運營/策劃專員做成方案，最后在交給設計師做成圖片來傳遞老板那個“牛批卡拉斯”的想法。
那么文字組合怎么去編排就成為將老板的想法完美的傳遞出來的關鍵要素，為了不南轅北轍，我們需要將文字編排的形成方案，并在實際的工作中通過不斷的實踐去完善，那讓我們一起來了解下文字組編排的技巧吧。
一般的軟件里面都會有字體選擇器，我們需要找想要的字體的時候都是直接在里面去搜索，然后再去點擊使用，那么今天我來看看怎么通過觀察字體家族的特征來找到我們想要的字體吧。
家庭中的所有成員都有各不同的稱謂來辨別身份，在字體家族中也是如此，我們通過不同的前綴后綴的縮寫來區別字體的樣式。
例如：字體前面的LT代表的是萊諾字體公司，如果我們使用的字體前面或者后面帶有LT，那就說明這個款字體是由萊諾字體公司出版的。
當然，我們日?？吹阶煮w廠家也會有很多，例如常見的MS是微軟公司，MT是蒙納字體，ITC是國際字體公司等等，一般字體公司的名稱的縮寫為連著的大寫字母，所以我們看到字體中帶有2-3的大寫字母，我們可以默認他們是字體公司的名稱縮寫。
那剛剛我們看到LT后面還有STD，那個是什么意思呢？STD是英文單詞“Standard”的縮寫，代表著這個字體只支持基礎的字符集，它的字體字符集相對會少點，與其相對應的“PRO”是英文單詞“Professional”，則是代表字符集比較多的后綴。
既然字體家族的縮寫那么多，那我們怎么把它規整好方便記憶呢？方便我們通過不同的前綴后綴來區別字體的樣式。正常的我們講字體家族系統一分為三類，1.字體的寬窄，2.字體的造型，3.字體的字重。
寬窄系統：只有比較大的字體公司去做這類型字體，因為不常用，所以做的就比較少，漢字里面好像漢儀旗黑又寬窄系統，那我們怎么去識別呢，以Ai為例子，如果我們在字體后綴發現帶Condensed，那么我們可以確定這個字體為窄體，以后如果我們在字體后綴發現帶Extended，那么這個字體則為寬體。如果設計中有特殊的需求，需要我們可以通過后綴去識別。
造型系統是為給不同應用場景下字體做區分的，正常的分為：常規體，意大利斜體，空心體，裝飾花邊，老式數字。
常規題：常規體的后面一般帶Roman或者Regular,帶著著這個字體里面最常用也是最適中的字體。
意大利斜體：英文后綴一般帶Italic,這類型的字體一般是專人設計過的傾斜體，比軟件生成看起來更加舒適和諧。例如有的字體公司為了區分窄體的傾斜體，有的也會用這個單詞，oblique,但是意大利斜體（Italic）代表的是常規字的傾斜體。
空心體：英文后綴一般帶Outline,在一些大型的字庫公司設計的字體會有，他打出的字不是實心的，而是空心字類型的，常見會在比較粗的字體上會有，因為這個的字體變成空心字不容易破壞字體的負空間。
裝飾花邊：英文后綴一般帶Ornament，這種類型的字體一般比較少見，只要一個字體的字庫做到比較全的時候，才會考慮開發類似的字體。這個可以理解為字體類的素材，一般的應用場景比較少。
老式數字：英文后綴一般帶Oldstyle Figures，比較明顯的特征是高低不一樣，這類型的字體一般應用在小寫字母的編排中讓數字看起來更和諧。
標題專用字：英文后綴一般帶Titling，這類型的字體在放大后使用看起來比較精致，細節相對比較豐富，但是也有特殊的，例如Caslon字體的標題字用的是540的后綴。所以當找不到的時候我們可以通過細節去分辨。
字重的選擇一般是根據當前的選擇的字體去跳兩個字重去選擇，這樣才會有對比。字重也是我們設計中常用的選字模式。
我們認識了字體家族對我們做設計有什么作用呢，一個字體家族越全面，我們做設計是可以選擇的范圍就越大，也就越方便，所以我們接到需求，需要選擇字體排版的時候，大致看下字體家族，就可以分辨出這款字體是否適合我們去使用。
需要做好文字組合的編排的基礎是需要選擇合適的版面氣質的字體和相對應的中英文混合編排。
中文字體屬于方塊字，具有字體的輪廓性，并且每個字符占據的空間都是相同的，限制較為嚴格，如段落開頭必須空兩格，豎排文字必須從右到左等規則。中文字體是一種非常規整的文字，因此靈活性相對較小，編排難度較大。
一般情況下，英文字體采用流線型方式，靈活性很強，能夠根據版面的需求靈活變化字體的形態，以解決版面僵硬、呆板的問題，創造出豐富生動的版面效果。
在版式設計中，經常會遇到中英文對照的情況。中文字體的象形、會意等特征和英文字體的簡單、圖形化的特征充分結合，展現兩種字體的優勢。編排時應該注意中文字體與英文字體的設計創意與主次關系，做到層次明確，并且要注意字體的統一性，如果字體變化過多，很容易造成版面的混亂。
我們在聊中西文的編排之前我們需要先了解下西文的歷史，就像我們在打王者榮耀一樣，要學習某個英雄，就先得了解英雄的技能，然后才是這些技能怎么去搭配使用，學習文字組編排也是一樣的道理。
設計的目的一般是為零解決一些生活中的問題，字體的演化設計之路也是一樣的，都是通過外部能力能觸達的能力加上內部的需求所達到的最優的解決方案?，F在我們將西文字體在歷史上的進程可以分為“文藝復興體” “古羅馬襯線體”“過程型襯線體”“粗襯線體”“無襯線體”。
我們可以大致簡單的把基礎款的字體分為兩種，一種是一種是襯線體和無襯線體，襯線體（Caslon,Baskeville，Bodoni,Didot,Garamond,）,無襯線體（DIn,Helvetica）,
襯線體
Garamond是一個早期字體，有老式數字，雕刻感比較強，有傾斜體，
Baskeville修飾比Garamond要粗點，稍微有點厚重感，偏向優雅，特征明顯，
Bodoni筆畫有明顯的過度，比較現代，
Didot比較常見，特征更明顯，現代感更加強，女性感強，多用品牌，雜志，簡化大膽。筆畫對比更加大，出現的比較晚
無襯線體
Helvetica，特征，比較平穩，沒有特征，沒有華麗的裝飾，在國外特別受歡迎
DIN，和Helvetica區別：變化性特殊，切口有角度性的變化，更加簡單干凈。偏向美術字體數字的幾何形強，比較抓眼球
Futuer:菱角分明，幾何無襯線體，冰冷，升部比較高，比較高挑，多用于科技感比較足的設計中。
因為基礎款的字體很多字體公司都會去做，我們可以通過谷歌可商用字體庫去尋找免費字體尋找：http://www.googlefonts.net/
中文的基礎款排版字體一般為黑體，宋體，圓體，楷體和一些風格多變的美術體。
襯線體
最早是為適應印刷而出現的一種漢字字體，筆畫粗細有變化，而且一般是橫細豎粗，末端有裝飾部分，（即字腳，襯線），點，撇，捺，鉤等筆畫有尖端，屬于襯線字體，常用于書籍雜志報紙等正文排版，趙集，瘦金體。
思源宋體，前身是小塚明朝體改進的，筆畫特征比較相似，小塚明朝橫筆畫要細點，思源宋體橫筆畫要粗點。
無襯線體
黑體，屏顯字體，無論放大還是縮小都能看的清晰，黑體可塑性比較強，常用于標題字的制作，小的可以作為內文，黑體有稱作方體或者等線體，沒有襯線裝飾，字形端莊，筆畫橫平豎直，筆跡全部一樣粗細，結構嚴謹醒目，筆畫粗壯有力，撇捺等筆畫不尖銳，使人易于閱讀。由于其醒目的特點，常用于標題，導語，標志等。
思源黑體：是最廣泛知道的字體，質量高，7個字重，
漢儀旗黑：可以滿足所有的排版的需求，寬窄系統也有。
在我們日常的設計工作中，襯線體和無襯線體該怎么選擇呢？我相信很多設計師都在這個問題上糾結過。我們來結合歷史來看看這個問題吧
我們把時間倒退到歐洲17-18世紀，這個時期盛行一種藝術“巴洛克藝術”和“洛可可藝術”，巴洛克是一種更早期的宏大而華麗的藝術風格，后世有人將洛可可風格看作是巴洛克風格的晚期，即巴洛克的瓦解和頹廢階段。它產生在反宗教改革時期的意大利,發展于歐洲信奉天主教的大部分地區,以后隨著天主教的傳播,其影響遠及拉美和亞洲國家。巴洛克作為一種在時間、空間上影響都頗為深遠的藝術風格,其興起與當時的宗教有著緊密的聯系。然而它不僅在繪畫方面，巴洛克藝術代表整個藝術領域，包括音樂、建筑、裝飾藝術等，內涵也極為復雜。
基本的特點是打破文藝復興時期的嚴肅、含蓄和均衡，崇尚豪華和氣派，注重強烈情感的表現，氣氛熱烈緊張，具有刺人耳目、動人心魄的藝術效果。所以它代表那個時期最流行風格。同時我們可以看看那個時期所產生的字體，也是一樣浮夸，裝飾性明顯。
我們在把時間撥20世紀德國，一所代表著現代主義設計風格的學校誕生了，包豪斯學院，德國魏瑪市的 “公立包豪斯學校”（Staatliches Bauhaus）的簡稱，后改稱“設計學院”（Hochschule für Gestaltung），習慣上仍沿稱“包豪斯”。在兩德統一后位于魏瑪的設計學院更名為魏瑪包豪斯大學（Bauhaus-Universit?t Weimar）。它的成立標志著現代設計教育的誕生，對世界現代設計的發展產生了深遠的影響，包豪斯也是世界上第一所完全為發展現代設計教育而建立的學院。包豪斯風格成為了現代主義風格的代名詞。
而包豪斯的設計理念：把簡單的問題把形成標準化，強調一些構成上的東西，所以在這種觀念的影響下，就產生了一些非常好看的無襯線字體。
而在現代化風格的影響下，產生出了工業衍生品也非常簡約，現代。
做設計是一個入世學，所有的問題都需要結合現有的場景來看，我們上面聊完每個時期藝術熏陶下所產生的字體，那么我們結合實際情況來看下，我們和我們的父母都是在不同文化體系下所產生不同審美觀的人。左邊度圖是我們絕大數父母喜歡的裝修風格，像洛可可那時候一樣浮夸，而我們卻喜歡簡約的現代風格。
那么字體也是一樣的，有襯線的字體屬于比較古典的氣質，簡約的無襯線字體則是比較現代的工業風。
也不是所有的襯線字體都是比較古老的，而Didot這款字體因為它造型的特性，也會經常出現在雜志封面和一些奢侈品的設計中。從時間的角度來講，最有歷史痕跡的是括弧線襯線又稱古典型襯線，其次是過渡型襯線到粗襯線，最現代的就是極細型襯線。
而中文的襯線體沒有明確的區分，但是我們可以根據字體特征按照西文的類目去區分。
那上面談到，不是所有的襯線體都代表古典或者歷史的厚重感，所以無襯線體也不是根據出現時間和之前的應用場景也是有區分的。
西文的無襯線體分為傳統型無襯線，人文主義無襯線，和現代主義無襯線（幾何形無襯線），傳統型無襯線的G開口的地方都是水平的，開口的地方也比較小，看起來比較保守，母A它的筆畫是由粗到細，落差不是特別的大，字體造型也比較穩重。人文主義無襯線它慢慢的開始出現一些傾斜的特征，這樣它的開口處可以做的更大一點，它的負空間也會更大一點，字母A為了讓它的負空間也就是字谷變的更大，它的筆畫粗細變的更大了，手寫的感覺會更多一點，現代主義無襯線體字母G它不僅開口要大，而且還有很多圓形切割的特點。幾何的特征會更濃厚一點，我們把這個特征稱為幾何型無襯線字體。
中文的無襯線則分為傳統型無襯線，中間無襯線，現代型無襯線。在漢字的黑體里，分為2類字體，一類是有喇叭口的，一類是沒有喇叭口的，喇叭口的造型特征是在筆畫的轉折或筆畫造型豐富的地方會有一些向里面凹陷或微微凸起的造型特征，沒有喇叭口的字體特征是在任何筆畫造型都收拾的比較干凈利落。像傳統和中間型無襯線都是慢慢像現代型無襯線演化，喇叭口慢慢的演化成工業的切口風。
字體的選擇我們應該基于合適的主題，合適的用字場景以及使用平臺或者場景，這樣才可以選出合適的字體。
合適的主題：這點適用可以在運營設計或者平面設計中，我們接到的需要適用何種風格，例如國潮肯定會選用毛筆字這種張力比較強的字體，在例如比較有工匠精神的工藝品可以選用有手工感的宋體字。
合適的用字場景，看選用的字是用在標題還是還是正文，標題字可以選用張力比較強的字體，因為標題的文字需要醒目，可以直接傳遞版面需要表達的主題，而正文需要閱讀文本則選擇無個性的黑體比較合適。
適用的平臺，設計展現的平臺也是對字體選用的影響的關鍵因素之一，例如在iOS上選用蘋方字體，安卓上選用思源黑體，PC選用微軟雅黑都可以減輕開發打包的大小。
我們為什么要做中西文的那我們在中西文搭配的時候應該怎么去搭配呢？下面是我總結的三個方向：
1.細節類似，細節類似我們可以觀察字體的細節進行搭配
2.時間相同，就是在某一個時間節點下同時產生的兩款字體。
3 .氣質相同，這個是在漢字里面才有的，我們常見的字體除了宋體和黑體外，還有是書法字體或手寫體，這類型的字體在通常是不太好搭配字體的。
那要是原字體的西文不太好看，我們怎么去搭配呢？、
外形類似
帶有這種轉角圓滑的裝飾線的宋體字我們一般是搭配古典型的襯線體，這樣搭配起來會更舒服，或者漢字的黑體搭配西文的無襯線體，因為它們特征是一樣的，然后就是中文的圓體也同樣會搭配一個西文的圓體，這些都是細節類似的搭配方法。
時間相同
是看筆畫相似來匹配的，我們可以看到下面這個中文的筆畫特征是帶有喇叭口，這種類型的黑體很明顯是印刷工業時代的產物才會有的特征，而右邊的西文是粗襯線字體，也是帶有工業時期復古的感覺，而且產生的時間也是比較近似的，一個是20世紀左右產生的字體，一個是19世紀產生的字體，這兩款字體搭配在一起可以凸顯工業感，穩重感，復古感都有，這也是時間匹配法。
氣質相同
例如在中國像楷書字體的特征獨特，但是英文的字體沒有類似特征的字體，所以楷書和宋體在中國都可以列為書法體，在氣質上是相同的，所以搭配在一起也是比較常見的。
另外我也總結了一些常用的字體搭配方法，放在下圖了，這些只是給大家平常搭配字體時候的一個參考依據。
我們在日常的的設計工作中，無論是哪種設計，都會涉及文字組的編排，我們可以觀察到一般的文本分兩種組合，一種是標題文本+說明性文本。
標題文本主要放置版本需要傳遞的重要信息，說明性文本是輔助傳遞標題文本的含義。
對比廣泛的存在于我們的生活中，對比的形式也是多種多樣的，例如身高的高矮對比，體重的胖瘦對比，速度的快慢對比等等。在設計領域內，對比是最常出現的形式。對于信息來說，適當的對比可以讓信息層級更加清晰明了，同一層級的信息更加豐富。對于畫面整體來說，恰當的對比可以很好的制造出焦點(畫面主體)當我們需要突出某一個元素的時候，其他的元素相應的就要做出對比關系，才能保證主體的突出。
字號對比是最快可以提現內容層級關系的一個設計點，一個版面里面不會有太多的文字層級，一般保持在3-5個層級，大部分的軟件都會自己自帶的推薦字號，為什么最小的字號是6號，因為印刷里是可視的極限。
常見的字號比例有1:1.5,1:1.618,1:1.732,1:2等等。這些比例在正常使用能很快可以做出層級關系且不會有特別大的問題。例如1:1.618是黃金比例，也是很多植物生長的規律，符合人正常的審美感受。
行距比例如果沒設置合適，對閱讀會造成影響，很容易造成眼睛是視覺疲勞，看來不舒服且文本不容易閱讀。
當行距設置到合適的時候， 我們閱讀起來會比較舒服，也會提高閱讀效率。
行距的設定也可以套用固定的算法：字號*倍率＝行距。
我們在日常的設計工作中，當行距調整到比較合適的大小的時候，版面會具備層次感 ，但超過一定限度也不太好。那行距的調整具體有哪些用途呢，1.平衡版面，2.閱讀效率
例如現在整個版面看起來比較輕盈，那么我們可以選擇一個比較大的行距，因為中間的空比較多，所以看起來并沒有那么重。例如我們現在的版面非常重，我們需要平衡他，那我們的行距就可以給近一點，讓文本塊在視覺上更重，這就是平衡的作用。
行距的設定大小會影響我們閱讀的效率，例如行距比例小的，一般用在標題文本，因為標題的文本一般需要我們快速閱讀并了解清楚。
字距大設定也對人的閱讀也會有影響，字據過大的時候像樹懶說話一樣慢，字據小的時候感覺說話比較快。
當字距是-800時候的感受，感覺想動漫里的樹懶一樣，說起話來慢吞吞的。
當字距是--100時候的感受，感覺像和人在吵架一樣，說話的語速比較急切。
在一般的平面設計中字據設定為正負40-70之間去選擇，但是在UI設計中，字距一般為0.
同時字距也會受到中宮的影響，在同字號的情況下，微軟雅黑會比其他字號大一號，中宮越大，字面也會越大，因為筆畫外擴，中宮大的字體，字面大，默認間距小
中宮大的字體，字面大，默認間距小，他的字距可以給大點，中宮小的字體，字面小，默認間距大，他的字距可以給小點，
例如平方字體，正常0間距做內文會比較舒服，但是作為標題，調了之后會讀起來比較連貫。
無論是西文還是漢字，他的形狀都會不一樣，有圓形的，正方形的，三角形的等等，不同的形狀，負空間是不一樣的，不同的字號是需要微調字距的，我們需要軟件視覺來調整。
在AI中有個功能是基于視覺對齊，我們開啟便可以解決這個問題。
分欄的寬度，決定了一行的長度和字數，當欄寬太長的時候，我們閱讀可以會比較吃力，總感覺一眼看不到頭。
一行多少字合適呢？一般的是20-30字之間，極限是15-30之間比較合適，一行字太少和太長都會讓人很累，，這也是為什么有的書為啥讀不下去的原因。
這也是為什么很多娛樂消遣方便的書一頁的字很多，也是為為了提升閱讀的興趣。
文字設計的成功與否，不僅在于字體自身的書寫，也在于其運用的排列組合是否得當，文字層級之間的關系，適用規則，欄距＞行距＞字距。
上面的舒服，因為粗細對比比較平衡，下面面的對比過度，什么時候下可以做強對比呢？做了字號對比，就不要做過大的字重對比，
在現在的板式設計中，有一個被忽略的知識點，就是標點符號。標點符號在當今社會不僅僅是用來斷句，也是可以用來傳遞情感，例如下圖，同一句話因為加了不同的標段符號，所傳達的意思就完全不一樣了。
所以標點符號的運用與文字組的編排在板式設計中同樣的重要，例如在聊天的時候，我們隨意的時候的問號在正式排版中，“！”和“？”的疊用不能超過3個。
你一句話表達驚訝和疑問的時候，我們應該將問號放在前面感嘆號放在后面。
例如有書名號的文本段是不在需要用頓號去隔開的，如果當書名號后面有括號則是需要用標點符號去把他們分割開來的。
當然還有就是逗號和不能在一段的前面等等，這些都只是給各位小伙伴一些拓展知識，有興趣的小伙伴如果想自己的板式更加規范可以自己去查閱相關資料。
梳理信息層級有哪些作用呢？我們在自然界中會發現很多與階級有關的現場，例如狼群里，一般都會有頭狼，也叫狼王，主要是統領狼群的行動及群體意識，在企業中，老板作為一個公司的核心人物，一般正常的普通員工去離職，不會影響公司的正常運作，但是如果涉及到公司的老板不知下落或者企業的核心管理層離職，會對公司的股價和正常的業務流程造成很大的干擾。
在我們日常設計中編排文字組也是一樣的，我們首先需要確定接到的需求哪些是重要且關鍵的信息，哪些是次要信息。當它的重要層級越高，他在版面中所扮演傳遞信息的角色就越重要，我們接下來便是通過設計手法，例如通過字距，筆畫粗細，顏色，以及字體等等來做出層級的區分。
那我我們一起來看看實際的案例吧！
梳理信息層級有哪些作用呢？我們在自然界中會發現很多與階級有關的現場，例如狼群里，一般都會有頭狼，也叫狼王，主要是統領狼群的行動及群體意識，在公司中，老板
1.首先是它會便于傳遞信息的中心思想，有助于用戶快速理解，所以一般大標題文字很對都會做效果，有助于提升視覺的焦點，2.信息層級分明，主次有序的在版面中傳遞信息，3.降低視覺噪音：當版面中的文字信息案例主次有序的排列后，版面看起來比較和諧，所有的元素感覺是本應該就在那里的。
如果信息層級沒有梳理過的版面，則會閱讀起來非常的吃力卻效率低下。
關于文字編排節奏感，很多人應該好奇了節奏不是音樂的范疇嗎？怎么文字編排也說有節奏嗎了？
其實節奏感隨著地球開始有生命開始便存在了，因為太陽升起到落下是有著自己每天固定的節奏的，太陽升起人開始勞作，看著周圍的動物和植物都一天天有變化，感受著自己由青澀稚嫩到遲暮之年；這些有規則的事物形成的固有的節奏。
在文字編排中也可以感受到這樣的節奏，例如，字體是直線還是曲線，垂直還是水平，傾斜還是正立，緊湊還是寬松，對稱還是不對稱……這些都體現著文字的節奏。段與段之間的留白多少，字間距的大小都是有規律可以尋找的，如果文字組合被有規律的設計、排版，那在設計稿中本身就具有了一種節奏感的吸引力。沒有節奏就不會有生命，也不會有任何創造。
好聽的因為是因為音樂的節奏會有起有伏，有前奏有副歌有高潮部分，這樣的音樂才不會讓人覺得平淡，我們轉換到文字組編排也是一樣的道理，當我們把一些沒有節奏感的書籍拿出來看是會覺得很困的。
如果我們加以設計的手法，把文字組合好好的排版一下，這是可以提升我們對內容的閱讀興趣的。例如我們閱讀的雜志和一些資訊類的APP，他們對文字和圖片的排版就會很下心思。
那我們怎么打造自己設計中的節奏感呢？那接下來我們聊聊怎么通過閱讀視線心理去引導用戶。首先是基礎的視覺邏輯，讓用戶漸入佳境，通過常規的的閱讀習慣，其實是根據大小、色彩、線的指向去引導用戶的視線節奏，其次是視線引導，根據用戶的常用邏輯打造版面中的節奏感。
我們平時在看版面的時候的視線觀看邏輯是怎么確定的呢？1.根據日常的書寫邏輯：我們看圖習慣和我們日常的書寫習慣是密不可分的，一般是從左至右，從上到下，所以我們很少會看到從右往左的排版和從下往上的排版，因為這樣的不符合人的邏輯，
因為每個人都心理感受都不一樣，所以當視覺引導不一樣的時候，傳遞的感受也是不一樣的，文字組合的目的是為了增強其視覺傳達功能，賦予審美情感，誘導人們有興趣地進行閱讀。因此，在組合方式上就需要順應人們的心理感受。人們的一般閱讀順序是:水平方向上，視線一般是從左向右流動；垂直方向上，視線一般從上向下流動；大于45°斜度時，視線從上而下流動；小于45°時，視線從下向上流動。
板式的閱讀順序有兩種：從左到右和從右到左。這是人們平時慣性的限制，就好像寫文章一樣，一旦決定了從左到右寫，就不會更改，板式也是如此，一旦決定了板式的閱讀順序，許多元素都會隨之被限制。
橫排文字
正常我們去閱讀橫排文字就是先從左到右，從上到下的規律去閱讀。
豎排文字
豎排文字的閱讀順序是從上到下，整體在從右上至左下。我們無論是橫排版還是豎排版，行距都是要大于字距的。
版式設計的核心就是吸引人的視線。當我們在觀看某些東西時，大部分的人都有自己習以為常的觀看習慣。人們往往在一瞬間就會判斷出這是什么？這一現象導致的結果是人們會想起與所看到的東西相近的信息，并判斷畫面中信息的價值，我們將這種心理傾向稱之為視覺心理。視線的引導是建立在視線的移動之上的，在引導視線前，我們需要先建立焦點。
視覺聚焦是在文字組編排中先建立視覺的突破口，然后就再去引導其他的內容。設計師，有一個重要的瓶頸就是，無法在版面中快速的傳達主題的中心思想，明明什么信息都有，就是讓人抓不住重點。如何一秒吸引別人的注意力，快速get要表達的點？那就是需要在版面中埋下引導別人實現的點。
引導方式可以根據版面現有的內容做大小層次對比，顏色對比，空間對比及元素具有的特有指向性。
人們在日常生活中，通常會先注意到大的東西，在有較大的元素在版面中，我們的視線往往會向大的元素是聚集，從大到小，這樣一步一步的去看，在版面設計運用這樣的小技巧，我們閱讀起來相對來說比較順暢。特別是當兩件物體顏色或材質相同的時候，視線往往會集中在大的物體上。根據這一原理，應該盡量放大希望吸引讀者注意的東西。
通過有序的色彩的引導視線是版式設計中不可或缺的主要元素，同時也頻繁應用于視覺引導中。色彩的心理效果在視覺引導中的運用就是：人的目光首先會注意眾多色彩中不同的那一個。例如下圖中，當色彩是藍色的時候，是沒有焦點的，當出現別等顏色是特別吸引人的目光的。
然后在加上大小的對比之后，吸引我們眼球的肯定是下面這個大圓形。
如果在下面這個大圓形去改變顏色，這個便會更加大吸引人
其次是亮明度高的顏色比明度低的更吸引人的目光。
暖色調比冷色調會更加吸引人
我們正常的瀏覽順序是從左至右，從上至下，那當我們怎么打破這個順序呢？首先是暖色＞冷色，明度高＞明度低的，元素大的＞元素小的，那下圖我們瀏覽順序應該是先看紅色，在上面開始看，其次是右邊和下方。
引導是一種視覺的語言。一幅好的設計作品，用戶的視線一定是被控制在主體和興趣點上，而不是被其他與主題無關的雜物所吸引，只要用好視線的引導，才可以傳遞我們想傳遞的。
當版面中出現箭頭或者人臉等相關指向性的圖片或者元素出現，是因為古希臘畢達哥拉斯學派和柏拉圖認為眼睛在捕捉物體時，視線、目光和力量會以物體為目標，從眼睛向物體方向傳送，把這一想法用設計原理來表示時。這時候的帶有指向性的圖片或者元素，便是視覺的切入點。
線作為板式中的引導，也是非常常用的，它既可以作為引導視線的切入點，也可以填補畫面中的空白點。
線除了是直線，還可以是曲線，文字組成的線或者負空間形成的線，都是具有引導視線的作用。
我們從小在學校學習了數字的大小順序，在在考試時，我們會順著考生號找座位，坐車時順著車票找座位。我們生活中還有很多地方會應用到編號。所以我們的目光會隨編號移動，是因為我們一直就有這樣的習慣。如果看到1，就自然會找2，看到A會去尋找B，視線就會這樣一直移動下去。
設計離不開構圖，構圖通俗地講：就是為了表現畫面的主題思想，而對畫面上的人或物及其陪體、環境作出恰當的、合理的、舒適的安排，并運用藝術的技巧、技術手段強化或削弱畫面上某些部分，最終達到使主題形象突出，主體和陪體之間的布局多樣統一，畫面疏密有致，以及結構均衡的藝術效果，使主題思想得到充分、完美的表現。
當我們把文字組編排好了，可以通過構成形式將他們串聯起來，這才是好的排版，能快速想到版面的效果。
居中構圖是最常見的構圖，指的是將畫面的主要元素放置在版面的中軸線上，目的是快速吸引眼球，占據視覺焦點，突出主體。中心構圖的版式簡潔、利落，給人以雅致的視覺感受。在突出主體的同時又能賦予畫面穩定感，并使整體畫面具有一定的沖擊力，需要表現規整穩定、醒目大方的版面時，可以使用居中構圖。其次對稱構圖是居中的一種特例。
對稱的形態在視覺上有自然、安定、均勻、協調、整齊、典雅、莊重、完美的樸素美感，符合人眼的視覺習慣。平面構圖中的對稱，可分為點對稱和軸對稱。在平面構圖中應用對稱法則要避免由于過分的絕對對稱而產生單調、呆板的感覺。有時，在整體對稱的格局中加入一些不對稱的因素，反而能增加構圖的生動性和美感，避免了單調和呆板。能夠突出主體，聚焦視線，當制作的圖片沒有太多文字，并且展示主體很明確的情況下，可以使用對稱構圖，在電影海報中也是比較常見的。
斜線式構圖又稱傾斜構圖，是將文字或者主體物以傾斜的方式放置在版面當中。傾斜的角度產生勢能，給人以引導作用。優化視覺層級，清晰的傳遞信息。讓比較呆板的畫面具有活力和生機，當制作的版面需要沖擊、不穩定效果時，可以使用傾斜式構圖，需要沖擊感和不穩定感時可以嘗試，也可以做透視，讓他有近大遠小的空間感。
曲線式構圖指的是版面中重要元素呈曲線排布，其他元素填充剩余空間，曲線具有靈活的屬性。其中“S”形狀從前景向中景和后景延申，畫面構成縱深方向的空間關系的視覺感，所以曲線構圖的版面常常顯得充實、熱鬧、生動、空間感。具有曲線的優美而富有活力和韻味，需要有力的表現場景的空間感和深度時，可以選擇S形構圖，例如瑜伽海報。
要表現畫面的空間感和縱深感也可以用S型購物，這也是S型構圖的特性，讓畫面更有空間感。
壓角式構圖適用于標題字數較少的版式設計，標題作為絕對重要的元素放置四角，一眼就能被看到。要做好壓住四角的版式設計得進行網格構架，控制好版面之間的比例。這種構圖形式使得畫面更加穩定，突出中心主體。
散點式構圖是指主體數量較多，散落在畫面當中的構圖方法。在應用散點式構圖時應防止散亂，宜用隱性結構線或結構形將各個“點暗連起來，相互呼應形成聯系。”適用于標題文字稍多的平面版式設計。文字排布時，拉開字的間距，在版式上化作為元素。標題文字的縱向距離要大于橫向距離，否則容易誤導閱讀順序。當文字信息比較多的時候，可以選擇散點構圖。
三分法是一條法則，同時也不是一條規則。 這個說法很拗口，我們來理解一下。 從本質上講，它就是我們的眼睛自然感知圖像的方式，這些圖像被限制在一個邊界之內（例如畫框）。 這些框架，都有一個固定的長度和寬度; 將這兩個屬性分別分成三個相等的部分，這會包含兩條水平和垂直穿過框架的等距線，形成四個線相交的點，并創建九個相等大小的框架，如下圖的九宮格。
而當版面的主要元素分布在三分線或點上，多數人會感覺這個畫面會比較和諧舒服，這接近是一種天性和本能了。當然，你還可以舉例說很多不是三分構圖的例子來反駁我，但這不重要，只要你要知道大部分遵循三分法構圖的畫面看著都是比較舒服的事實就行了。
古時候的文人墨客的門檻是“知句逗”，我個人覺得設計要想入行設計的門檻便是最基本的文字組的編排，
我們的感覺，即我們的視覺和我們的美感，優于幾何結構，當我們在處理黑白對比的平衡時，我們必須訴諸感，
在文字組的編排中，其中包含的技藝、功能和形式設計是絕對不能分開的。當我們作為設計師，做好每一處設計的細節，也是對觀看版面用戶最基本的尊重吧！
文章來源：優設 作者：Endings
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
!DOCTYPE html
功能是：告知瀏覽以哪個版本來解析HTML的元素
注：必須放在第一行
DOCTYPE 文檔聲明定義
document 文檔
type 類型
charset
utf-8
字符編碼集
告訴瀏覽器用哪一個版本來解析文本（包括標點符號，文字）
viewport
視口（可視窗口）
title
標簽頁標題
HTML元素的組成部分
元素：起始標記、內容和結束標記
某些元素的起始標記內有屬性
屬性：屬性名和屬性值
例如:
<a href="/classroom/17">班級</a>
1
起始標記：
結束標記：
內容：班級
屬性：href="/classroom/17"
屬性名：href
屬性值："/classroom/17"
空元素
類似img元素
<img src="" alt="">
1
沒有元素內容和結束標記，稱之為：空元素、自閉合元素
亂序銘文
功能：批量生成文本
書寫格式：lorem數量（單詞個數）
p標簽
p標簽不能包含（嵌套）p標簽，也不能包含標題、div，語義化標簽
解析
將我們寫出的代碼，轉換成計算機可以看懂的語言
渲染
再將解析好的語言，通過瀏覽器渲染展示出來，給用戶看。
HTML
是用于定義文檔的結構內容（標題、圖片等）
HTML英文全稱：Hyper Text Markup Language
中文全稱：超文本標記語言
CSS
用于定義HTML文檔的樣式（外觀）
CSS英文全稱：Cascading Style Sheets
中文全稱：層疊樣式表
語義化結構
header 頁面的頭部或者某個區域的頭部，一個頁面可以使用多個header元素
nav 表示導航欄
article 代表文檔、頁面或其他可獨立部分，常用于定義一篇日志、一條新聞或用戶評論。
aside 用于表示當前頁面或文章相關的附屬信息，可包含該頁面或內容相關的引用、側邊欄、廣告、導航條等
section 用于表示一個整體的一部分主題
footer 用于表示頁面或者某個區域的腳注，可以包含所有放在頁面底部的內容
div與語義化結構的區別
div與語義化結構標簽的功能是一樣的，但是使用語義化結構標簽可以讓頁面結構更加清晰。
a標簽
元素書寫格式
<a href="目標">內容</a>
1
href屬性
頁面地址（路徑）
多個頁面中相互跳轉
錨點
可以在同一個頁面之間，相互跳轉
先將要跳轉的位置加上id屬性
<h1 id="title2">標題二</h1>
1
將#+屬性名
<a href="#title2">跳轉到標題二</a>
1
功能鏈接
打電話
<a href="tel：12345678910">給我打電話</a>
1
發郵件
<a href="mailto：123456789@163.com">給我發郵件</a>
1
返回頂部
<a href="#">返回頂部</a>
1
a標簽的打開方式
書寫方式：
<a target="_blank" href="目標"></a>
1
屬性 target
屬性值
_blank 新頁面打開
_self 當前頁面打開（默認值）
link外部引用的好處
批量修改
復用
絕對路徑和相對路徑
絕對路徑
從根目錄開始寫，寫到要找文件的位置
當網站部署到服務器后，網站中的所有資源都可以通過一個地址（路徑）訪問
書寫格式：協議：//域名/目錄
使用場景：
訪問站外資源時，只能使用絕對路徑
訪問站內資源時，若網站已部署到服務器，可以使用絕對路徑，并可以省略協議和域名。推薦使用相對路徑
相對路徑
相對路徑是相對于當前資源的位置，只能用于訪問站內資源
相對路徑的書寫格式為：./路徑
./ 表示當前資源所在的目錄，必須作為相對路徑的開始，可省略
…/ 表示返回上一級目錄 （…/…/可以返回上兩級目錄，寫幾次就可以返回幾次
轉自：csdn 作者：小王小王 輔助在行
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
HTML概念和元素（標簽）
什么是HTML
HTML(Hyper Text Markup Language),中文譯名為超文本標記語言，它包括一系列標簽，通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。簡單來說，就是我們用它所包含的一系列標簽來定義網頁的布局結構。
什么是HTML標簽（元素）
HTML 文檔是由 HTML 元素定義的，元素由三部分組成：開始標簽、元素內容、結束標簽。
HTML 元素以開始標簽起始，以結束標簽終止，元素的內容是開始標簽與結束標簽之間的內容。在VSCode中，使用標簽只需要輸入需要使用的標簽名，再按Tab鍵，編輯器會自動補齊開始標簽和結束標簽的樣式。
溫馨提示：
1.標簽的括號我們用的是尖括號，這也是HTML代碼和CSS（層疊樣式表）代碼的區別。
2.HTML 標簽對大小寫不敏感，也就是說不管我們用大寫還是小寫瀏覽器都能成功識別，但是為了統一標準，最好還是寫小寫。
元素的層次結構
大多數 HTML 元素可以包含其他 HTML 元素，形成嵌套結構
如圖，div元素內部包含一個p元素，形成嵌套。在嵌套結構中，p的上一級元素是div，我們稱div是p的父元素，p是div的子元素，他們之間是父子級關系。
若是如圖這樣body、div、p三個元素嵌套，p的上一級元素是div，div的上一級元素是body，那么div是body的子元素，body是div的父元素，body和div是父子關系。而p和body中間隔了一個div，那么p就是body的后代元素，body是p的祖先元素，他們是祖先和后代的關系。
若是兩個元素擁有一個共同的父元素，也就是兩個元素的上一級元素是同一個，那么這兩個元素互為兄弟元素。
需要注意的是，兩個元素之間不能相互嵌套
p的起始標簽在div內部，結束標簽卻在div外部，這樣的嵌套結構是錯誤的，瀏覽器在解析的時候會自動在p的起始標簽后補上結束標簽，在結束標簽前面補上起始標簽。
當我們打開瀏覽器檢查器之后就會發現div和p的層次結構已經發生了改變。
元素的屬性
屬性是元素的附加信息，比如超鏈鏈接的地址就是元素的附加信息，屬性一般寫在元素的起始標簽里。
這是一個a標簽，起始標簽的href="。
空元素（自閉合元素）
空元素沒有元素內容和結束標簽，只有起始標簽?？赵貎瓤梢约由蠈傩?，例如插入圖片的img標簽
img標簽沒有元素內容和結束標簽，起始標簽內有屬性，屬性值是圖片地址。
一般情況下，圖片用空標簽，音頻視頻不適用空標簽
HTML注釋
注釋是對代碼功能的描述，一般是寫給開發者和維護者看的，瀏覽器并不會解析注釋里的內容。因為在代碼編寫的過程中，代碼繁多雜亂，寫上注釋能幫助我們快速理解當前代碼的功能，給維護提供方便。
VSCode注釋的寫法：在尖括號內寫上 !–和--，中間寫上注釋的內容，或者選中想要注釋的行，按下快捷鍵CTRL+？。
語義化標簽和div
div是無語義標簽，就是沒有含義的標簽。而所謂語義化標簽，就是有含義的標簽，一看就知道其內部含義。我們平時使用語義化標簽和div來劃分區域，他們在功能上是沒有任何區別的，只是語義化標簽能幫助開發者和維護者清晰地理解劃分的每個區域都是用來干嘛的。在HTML5之前都是用div來劃分區域，就會導致整篇代碼全是div，看得人眼花繚亂不易于閱讀，語義化標簽的出現就能解決這個問題。
在HTML5中新增了幾個語義化標簽：
header：用于表示頁面的頭部
nav：表示導航欄
article：表示文章或其他可獨立存在的頁面
section：表示一個整體的一部分主題
aside：表示跟周圍主題相關的附加信息
footer：表示頁面或某個區域的注腳
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
最近負責的新項目快上線了（感覺我好像一直在做 0-1），給大家總結了5個一定會遇到的新項目盲區及最新的解法，希望能幫助大家在交付開發前就順利完成設計輸出。
2020 年 4 月后，我們在設計 iOS 登錄界面的時候都知道必須加上蘋果官方強行要求的 Apple 賬戶登錄按鈕，但關于這個按鈕的設計規范其實有比較硬性的規定，沒有注意的話到了開發還原的時候就容易踩坑。
在國內的 iOS 登錄設計中通常突出的主流登錄方式是“微信”，手機登錄以及其他的第三方登錄都會以更弱一點的視覺方式呈現。
蘋果官方是允許對 Apple 賬戶登錄按鈕進行一定的自定義的，其中就包含將其弱化為一個圓形的圖標按鈕，只是圖標與圓形按鈕的大小比例是官方固定的比例（這個大家直接下載官方提供的圖標，它是自帶留白的區域的，保持圖標與高寬一致就符合要求了）。
而國外的 iOS 登錄設計中通常沒有那么多的第三方登錄方式并存，主要的“Facebook”與手機登錄通常會與 Apple 賬戶登錄按鈕同一級出現在界面中。
這個時候需要特別注意的是，蘋果官方對于這種大按鈕的限制主要在于 3 個部分：
剩下的按鈕樣式，比如顏色和描邊也非常有限，只可以使用白色填充黑色描邊與純黑色底這 2 種。
還記的早幾年做安卓項目的時候上架應用商店的啟動圖標輸出還是和 iOS 差異不大的，基本就是尺寸換換。這次輸出啟動圖標，被安卓的開發大大告知，安卓可以出這種帶動效效果的啟動圖標了，它的原理和效果，如下圖：
實現這個效果的設計配合輸出也很簡單，只需要整理一下的具體啟動圖標輸出就可以：
1. 啟動圖標（前景，不帶背景的）-108dp（324px）
當然以上僅針對純色背景，可以與 logo 主體輕易分隔的啟動圖標。如果是混為一體的話就需要調整輸出方式為以下：
這次新項目又遇到了開發中改稿的問題，大部分都因為全屏的背景圖切圖大小問題。
個別全屏視覺的界面，比如閃屏、登錄頁、音視頻語音等等，我們通常設計時不考慮切圖的大小問題就會比較放飛去設計。
但實際情況是一張全屏的花色 3 倍 png 切圖基本都在 2M 左右，就算把壓縮率提到 80%+（市面上大部分壓縮軟件的壓縮率都很有限，比如大家常用的 tinypng、pp 鴨等），就算你重復壓縮，也有至少 200 多 KB，遠遠超出開發 100k 以內的切圖大小限制。
所以不得不要求我們在輸出格式的時候拋棄 png 格式，啟用 JPG。
不過實際設計時候我們可能仍然會遇到不能用 JPG，必須用 PNG 格式的情況（透明度蒙層），那么建議大家可以嘗試以下 2 個小技巧：
最后不想屈服于樣式限制的鐵汁，一定記得提前輸出格式大小康康會不會超標嚴重（盡量控制在 100k 以內），不然無法落地再好看也沒有用咯。
目前關于移動端界面里個別小動效的導出比較主流的幾種格式是：Gif、逐幀圖、Lottie（Jason）、Webp、Apng。
Gif、逐幀、包括前幾年流行的 Lottie 大家應該都比較熟悉了，這里稍微科普 2 個陌生一點的格式：
目前我覺得性價比最高的就是 webp，它的優勢主要在于：
唯一的 2 個問題在于：
我度娘過一些導出 webp 的方式都不是很好用，問了我司的動效設計師，推薦一個比較簡單靠譜的方式分享給大家：
1. 先從 AE 導出逐幀圖（記得需要循環的動效做好循環）
不知道如何到逐幀圖的看這里：渲染→渲染設置→格式→選擇“PNG”序列→導出即可
2.下載 isparta
3. 直接將 AE 導出的逐幀圖文件包拖到 isparta 里導出 webp 格式（可選）
設計交付的協同平臺現在市面上很多，很多大廠也有自己內部的協同平臺來承載設計交付，俺們豬廠用的叫 dbox（非常滴不好用），在強推之下開始申請經費改用 Figma 了。之前為了更換協同平臺，把交付的協同平臺都做了一番調研，這里給大家直接看表格吧。
看完圖大家就會發現除了 Figma 大家的使用情況不會差很多，差的主要還是錢?？偟膩碚f的建議就是，如果已經從sketch改用Figma的土豪團隊就可以直接分享Figma文件鏈接給開發搞定切圖標注以及文件存檔這2件事兒了。
如果還在用 sketch 和 XD 的鐵汁，交付型的協同平臺我個人比較推薦 Zeplin，雖然有的人會說它服務器在國外很卡，我覺得其實還好吧，同時 Zeplin 近幾年還解決了 Win 系統適配的問題。
然后最后小吐槽下騰訊的 Xshow。一開始我覺得它是最香的，因為高清度、流暢度到美感幾乎都比較完美。一直到我發現了它居然是個完全開放的交付協作平臺，也就是別人知道你的賬戶 ID 之后就可以搜到你并看到你的所有項目文件，瞬間安全系數降為 0。作為一個明顯對標企業級的協作平臺這么瘋狂的植入社交功能，到底是企鵝的社交基因太強大還是怎么肥四？
文章來源：優設 作者：Nana的設計錦囊
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn
