<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ThinkChat2.0新版上線,更智能更精彩,支持會話、畫圖、視頻、閱讀、搜索等,送10W Token,即刻開啟你的AI之旅 廣告
                **成也字,敗也字** 可以這樣說,字體可以成就設計也可以毀掉設計 當年這么說,今天還是這么說! ![](http://bbs.uigreat.com/uploadimgs/201606150947360_929441024.jpg) 看完上面這張圖你就能明白了 是不是閱讀起來非常的難受? **那就對了!** **其實折磨你的問題有以下幾點** 1.字體樣式太多,雜亂無章 2.使用的字體不易識別 3.字體和內容的氣氛不匹配 怎么避免這樣的結果發生呢? 一句話:**通過常用字體規范可以幫助你做出符合要求的設計** **一.字不過三!** 很多大神說過色不過三,其實在同一個APP或在同一個設計作品中字體也不要過三種樣式,一般在每個項目設計中使用**1-2個字體樣式就夠了,**然后通過對字體大小或顏色來強調重點文案。 ![](http://bbs.uigreat.com/uploadimgs/201606150947371_531333371.jpg) 看到上圖中的幾個界面,都是通過字體的大小來區分出界面內容中的層級關系的。 其中包括了螞蟻花唄的banner里只用了一種字體來區分主標題和副標題的關系。 其實網頁也是一樣,使用一種字體樣式,通過字體大小的對比也能做出高逼格的構圖和設計。 ![](http://bbs.uigreat.com/uploadimgs/201606150947372_210175975.jpg) **講真!字體用的太多,會顯得你不夠專業!** **二 .字與背景的層次要分明** ![](http://bbs.uigreat.com/uploadimgs/201606150947373_1835244135.jpg) ![](http://bbs.uigreat.com/uploadimgs/201606150947374_1403684201.jpg) 看完上面兩張Banner圖是不是發現了同樣的問題,字體和背景融到一塊去了,在閱讀的時候非常的不方便 這樣的Banner如何才能達到廣而告知呢? 包括做移動界面也是一個道理,選擇下面這樣的一個背景,用戶在光照很強的時候能看清嗎? ![](http://bbs.uigreat.com/uploadimgs/201606150947385_1718046964.png) 所以**易讀性和易用性是用戶的根本訴求!** **三.字體樣式與氣氛要匹配** **![](http://bbs.uigreat.com/uploadimgs/201606150947396_645112272.jpg)** 看完這個圖 第一個感覺就是**看不懂!**仔細看才知道是眼部精華油。 文字的風格和整體的設計風格不一致,沒有帶動用戶的購買欲。 我們再來看看下圖 ![](http://bbs.uigreat.com/uploadimgs/201606150947397_1019467324.png) 結合文案內容,設計風格采用了比較明快剛勁的設計風格,字體也選擇了比較剛勁有力的造字工坊勁黑體。氣氛匹配,用戶代入感強。 ![](http://bbs.uigreat.com/uploadimgs/201606150947408_1998565041.png) 活動banner的氣氛非常重要,選擇合適的字體樣式能加強購買欲和點擊欲。 **以風格分類常用的字體有以下幾種類型** **1.平穩型字體** ![](http://bbs.uigreat.com/uploadimgs/201606150947429_375508061.jpg) **![](http://bbs.uigreat.com/uploadimgs/2016061509474210_936073395.png)** 在陌陌APP歡迎也中使用到了比較平穩的方正正中黑,整體風格比較直接明了。 **![](http://bbs.uigreat.com/uploadimgs/2016061509474411_1691060456.jpg)** 方正蘭亭系列是網頁設計中必用的字體,穩重而細膩,還具有時尚科技感。 看看下面這個蘋果的網頁,就造了 用了方正蘭亭超細后的感覺,是不是高端了許多~ ![](http://bbs.uigreat.com/uploadimgs/2016061509474412_1137596902.jpg) ![](http://bbs.uigreat.com/uploadimgs/2016061509474413_1608783261.jpg) 當然用在科技產品的官網中更合適不過了。穩重而富有科技感。 **![](http://bbs.uigreat.com/uploadimgs/2016061509474414_1663011712.jpg)** **2.剛勁有力型** **![](http://bbs.uigreat.com/uploadimgs/2016061509474415_529699843.jpg)** 張海山的字體非常的好用,可以試試,清晰明了,年輕有力 ![](http://bbs.uigreat.com/uploadimgs/2016061509474516_820210094.png) 華康儷金黑有種大字報的感覺 **![](http://bbs.uigreat.com/uploadimgs/2016061509474617_1153054842.jpg)** **3.可愛型字體** ![](http://bbs.uigreat.com/uploadimgs/2016061509474718_1523828764.jpg) 使用方正經黑設計的內涵banner 是不是很可愛很有深度~~~ ![](http://bbs.uigreat.com/uploadimgs/2016061509474719_1078640179.png) 漢儀小麥使用在插畫中的感覺,不解釋 ![](http://bbs.uigreat.com/uploadimgs/2016061509474720_1444940780.png) (by 白茶) **華康海報體** 專題和引導頁面中經常會用到 ![](http://bbs.uigreat.com/uploadimgs/2016061509474821_1797068236.png) **騰翔金磚體** 這也是一個非常不錯的字體 設計師利用了騰翔金磚體的原型將美食的元素融入到了設計中 ![](http://bbs.uigreat.com/uploadimgs/2016061509474922_1667564999.jpg) (注意合法使用字體,字體都是有版權的哦~) **當然我們還可以使用毛筆字生成器** 通過自由的書法網站在線生成 在網址中輸入文本,再進行選擇書法字體樣式 通過這種方法我們能很快的找到需要的書法字體 這招非常管用! ![](http://bbs.uigreat.com/uploadimgs/2016061509475023_2000734016.jpg) 推薦大家來兩個毛筆字生成的網站: http://www.akuziti.com/mb/ http://www.51poca.com/ **二.界面中文字使用的規則** **1.了解系統字體** **iOS系統中用的是蘋方字體系列** 為了加強層次關系蘋方系列從細到粗有著不同的樣式 ![](http://bbs.uigreat.com/uploadimgs/2016061509475024_1191103921.jpg) **Android的默認字體是Roboto和Noto系列** Roboto有6種字樣 Thin、Light、Regular、Medium、Bold 和 Black ![](http://bbs.uigreat.com/uploadimgs/2016061509475025_496549405.png) Noto有7種字樣 Thin, Light、DemiLight、Regular、Medium、Bold 和 Black ![](http://bbs.uigreat.com/uploadimgs/2016061509475026_1965751025.png) **2.統一字號** 一個App,不同位置的字體字號 **你能準確地說出來嗎?** 如果不能,說明你還不了解規范,沒有去制定規范。 那我們先了解一下常規的一些大小(應用于2倍尺寸中,即iphone5/6) **導航主標題字號:****34/36px** 蘋果默認標題字號為**34px**,而有些軟件也會用到**36px,更加強頁面位置關系** 比如**微信導航標題字號36px,導航字體醒目易于對應頁面位置。** ![](http://bbs.uigreat.com/uploadimgs/2016061509475127_1825597732.jpg) 在內文展示中字號大小又是多大呢? **正文字號32px-34px** **副文是28px-24px** **最小字號不低于20px** 字在正文字號使用中,閱讀類的APP更注重文本的閱讀便捷性 正文字號34px,會選擇性的選用蘋方粗體 ![](http://bbs.uigreat.com/uploadimgs/2016061509475128_281917466.jpg) 而列表形式、工具化的APP普遍是正文32px (**由于屏幕使用變大正文大小趨勢變成了34px**) 副文案28px,時間文字24px ![](http://bbs.uigreat.com/uploadimgs/2016061509475129_2023550601.jpg) 26px的字號還會用于劃分類別的提示文案 因為這樣的文字希望用戶閱讀,但不要搶過主列表信息的引導。 ![](http://bbs.uigreat.com/uploadimgs/2016061509475230_253949078.png) 34px的字號還經常運用在頁面的大按鈕中。為了拉開按鈕的層次,同時加強按鈕引導性,選用了稍大號的字體。 ![](http://bbs.uigreat.com/uploadimgs/2016061509475231_1211358491.jpg) **注意了!**在選用字體大小的時候一定要選擇偶數的字號。因為在開發界面的時候,字號大小換算是要除以二的 **那網頁中常用的字號有哪些呢?** 網頁字號最小12px 常用微軟14px/16px作為正文 大號字體是18px、20px、26px、30px (注意使用雙數字號,單數的字體在顯示的時候會有毛邊) **好的設計不應該永遠是“人家的設計”** **一定是看得不夠多,琢磨不夠透,練手太少**
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看