亚洲综合小说另类图片

<dfn id="4z7un"><s id="4z7un"></s></dfn>
          1. <nav id="4z7un"><sup id="4z7un"></sup></nav>
            <th id="4z7un"></th>

          2. <output id="4z7un"><small id="4z7un"><input id="4z7un"></input></small></output>
            八周年活動月
            歡迎訪問長沙友點軟件科技有限公司旗下產品友點CMS官方網站!
            友點CMS

            7條實用法則讓你制作好看的UI界面(二)

            來源:友點CMS 日期:2015-08-15 11:11:56 屬于:網頁美工

            本文編譯自Medium,作者是一位UX(User Experience, 用戶體驗)設計師,他通過自己學習UI設計的過程,總結出7條實用的法則,為UI設計新手提供了寶貴的經驗。文章分為2個部分,這里是第2部分。第1部分請移步:7條實用法則讓你制作好看的UI界面(一)

            7條實用法則讓你制作好看的UI界面(二)

            以下是 UI 設計入門你需要掌握的 7 條法則:

            1. 光線來自天空(第1部分)
            2. 黑白優先(第1部分)
            3. 增加空白空間(第1部分)
            4. 學會在圖片上呈現文字
            5. 做好強調和弱化
            6. 只用合適的字體
            7. 像藝術家一樣偷師

            法則4:學會在圖片上呈現文字

            在圖片上優雅地呈現文字并不容易,這里給出6種方法。

            如果你想要成為好的 UI 設計師,你必須學會在圖片上美觀地呈現文字。優秀的設計師在這方面做得都不錯,而水平較低的設計師往往在這方面也比較差,甚至完全不會。在學習了這部分以后,相信你會有很大的提升。

            方法0:直接在圖片上放文字

            我很猶豫要不要講這種方法,因為應用起來十分困難。不過直接在圖片上放文字從技術上來說也是可行的,下面這個網站的首頁就很不錯,所以說說也無妨。

            直接在圖片上放文字時,有幾點需要非常注意:

            • 圖片應該比較暗,而且顏色不能有太大的反差。
            • 文字必須是白色的,我知道你也能找到用其它顏色的案例。但是我覺得,你最好還是用白色。
            • 在不同屏幕,不同尺寸的窗口調試頁面,確保各種情況下文字都是清晰、易于辨識的。

            上面這 3 個方面調整好就 OK 了,不要再做其它處理。

            我自己從來沒有在任何專業的項目上直接把文字放在圖片上,這種方法是可行的,也能做出酷炫的效果,但還是小心點。

            方法1:暗化整張圖片

            可能在圖片上放文字最簡單的方法就是暗化整張圖片,如果原圖顏色不夠深,你可以用半透明的黑色在上面覆蓋一層,比如下面這個案例就加了一層不透明度 35% 的黑色。

            如果你直接放原圖,底色太亮,和文字的反差不夠明顯,看不清文字。

            類似的方法同樣適用于小圖。

            加一層黑色是最簡單、普適性最強的。當然你也可以用其它合適的顏色,比如這樣:

            方法2:給文字加個框

            這是一種簡單有效的方法。在白色文字下方加上一個略透明的黑色方塊,就可以放在各種各樣的圖片上了,而且顯示效果非常清晰。

            當然,你也可以放別的顏色,只是需要小心謹慎。

            方法3:虛化圖片

            虛化圖片是增加文字易讀性的好方法,把文字下方的圖片虛化了,同時把虛化部分亮度調低。

            iOS 7 用毛玻璃的效果虛化了背景,而 Windows Vista 也使用了這種虛化效果。


            虛化圖片的方法也有局限性,你需要確保在不同屏幕上圖片尺寸調整后,文字依然是在虛化的區域上的。

            看看下面這個例子,你能看清小標題嗎?真不知道這樣的設計是怎么通過審核上線的。

            方法4:底部褪色

            所謂底部褪色是將圖片的下邊緣變暗一些,然后在放上白色的文字。這是一種非常有獨創性的方法,我不知道在 Medium 之前有沒有人用過,但我是先在 Medium 上看到的。

            乍一看,你可能覺得這就是把文字放在了圖片上。其實不然,圖片上有一些非常細微的變化,中間完全沒有黑色覆蓋,而底部有不透明度大約 20% 的黑色覆蓋在上面。

            這樣的變化很難看出來,但確實存在,而且確實提高了文字的可辨認性。

            此外,Medium 還給文集圖片上的文字加了些許陰影,進一步提高了文字的易讀性。最終的效果就是 Medium 可以把任何文字放在任何圖片上,閱讀體驗非常好。

            有人可能會問了,為什么是把圖片的底部變暗呢?為什么不能是圖片的其它區域?要回答這個問題,請看法則1:光線來自天空。光線從上面照下來,圖片的上方亮一些,而底部較暗,看起來更自然。

            此外,你還可以把虛化和底部褪色結合起來,做出底部虛化的效果,比如下面這張圖的效果:

            方法5:把圖片部分區域的光線變得更柔和

            Elastica的博客的題圖并不是太暗,而且對比都較強。為什么文字的辨識度還這么高呢,就像下面兩張圖顯示的這樣:

            這里實際上是把圖片局部區域的光線變得更柔和,突出了文字。如果我們在瀏覽器上縮小 Elastica 博客,會看出到底發生了什么。

            在圖片左下角有一塊陰影區域,文字置于其上,就很容易辨認了。

            這可能是在圖片優雅呈現文字最細微的一種方法。我還沒在別處見過,保存下來,說不定將來什么時候就用到了。


            法則5:做好強調與弱化

            把文字設計得又美觀又得體通常就是通過放大或縮小文字,做出反差的效果。

            我認為,UI 設計最困難的地方就在于文字的裝飾,因為設計文字時需要考慮的因素太多了:

            • 字號
            • 顏色
            • 字體粗細
            • 大小寫
            • 斜體
            • 字母間距
            • 頁邊空白(準確的說不是文字的一部分,但是容易影響閱讀時的注意力,所以也算在這個列表里了)

            還有其它一些方法調整文字吸引讀者的注意力,但是不常用,也不推薦你使用。

            • 下劃線。下劃線現在基本上等同于超鏈接了,我覺得你還是不要挑戰人們的常識比較好。
            • 文字背景色。這個有時候也被當作超鏈接,只不過不是那么常見。
            • 刪除線。一邊待著去吧,你這個怪人。

            就我個人經驗來說,當我覺得一段文字設計的不好時,通常不是因為用了大寫字母,或者顏色太重,而是因為各種要素的搭配出了問題。

            強調和弱化

            你可以把所有的文字樣式分成兩類:

            • 增強可讀性的樣式:大字號、粗體、大寫等;
            • 減弱可讀性的樣式:小字號、與背景對比不明顯、空白較少等。

            上圖“Material Design”這個標題就很突出:字號大、反襯明顯、字體較粗

            上圖頁腳的字就是弱化處理的,字號小、反襯不明顯、字體較細

            我認為文字設計的核心在于:

            標題是唯一需要全部強調的元素,其它的部分則應該將強調與弱化結合使用。

            如果網頁上某個元素需要強調,把強調和弱化結合在一起,可以避免整個頁面看起來太有壓迫感,同時又讓各個元素的呈現效果恰到好處。

            下面這張 Blu Homes 的首頁堪稱是這方面的典范:上方文字較大,突出顯示,但是用了小寫字母。沒有給人強烈的壓迫感。

            網頁上的數字字號較大,是網頁上的重要信息。但是請注意,數字的字體很細,與背景色對比也不明顯;而數字下方的單位雖然寫得很小,卻全部加粗,用大寫字母。

            這就是設計中的平衡。

            上面這張圖是 Contents Magazine 的網站,也是學習強調和弱化的一個好案例。

            • 文章標題是唯一沒有用斜體的部分,而且還做了加粗處理,更容易吸引讀者的關注。
            • 作者姓名寫在文章標題下方,字體加粗,與沒有加粗的”by“區分開來。
            • “ALREADY OUT”獨立出來,字號很小,與背景區分不明顯,但是用了大寫字母,字間距很大,文字外圍空白較多,當你想要找它的時候一眼就能看見。

            鼠標懸?;蜻x中時的樣式

            設計鼠標懸?;蜻x中時的樣式也是同樣的道理,只不過更難一些。

            通常情況下,改變字體大小、大小寫、粗細時會改變文字所占空間的大小,讓人們理解鼠標正懸停在這里。

            此外,下面這些要素也能夠影響人們的感受:

            • 文字顏色
            • 背景色
            • 陰影
            • 下劃線
            • 細小的動畫——上升、下降等

            這里再推薦一個比較普適的方法:給白色的元素上色;或者當背景顏色較深時,把有顏色的內容變成白色。

            裝飾文字是非常難的,但是每當我感到“這些文字不可能再變好看時”,我的判斷都是錯的。我需要做的就是不斷優化,不斷嘗試。

            所以想開點吧,如果你設計出來的文字不好看,不要擔心,你需要不斷地提升自己的能力,讓自己變得更好。


            法則6:只用合適的字體

            有些字體很不錯,就用它們吧。

            注意:這一部分沒有太多知識要學,我只是給你推薦一些好用的免費字體給你。

            有的網站很有個性,會用到比較特別的字體。但是,大多數產品的 UI 設計只要保持干凈、簡潔就可以了。所以,把那些太花哨的字體放到一邊吧。

            我在這里推薦一些免費的字體。因為這篇文章是為初學 UI 設計的人所寫,這些免費的字體完全夠用了。

            我希望你把這些字體下載下來,在你開始項目設計之前,瀏覽一下它們。

            以下是我推薦的字體:

            Ubuntu(上圖)——字體偏粗,對于有些 app 來說太張揚了,但是對于大多數 app 來說還是不錯的。在Google Fonts上可以找到。

            Open Sans——非常易于辯讀,是一款很流行的字體,用在正文非常合適,在Google Fonts上也能找到。

            Bebas Neue——適合作標題,都是大寫字母,在Fontfabric上能找到,這個網站上還有一些 Bebas Neue 的應用實例。

            Montserrat——只有兩種粗細,但也足夠了。是 Gotham 和 Proximate Nova 最好的免費替代品,但不如那兩種好。在Google Fonts上能找到。

            Raleway——適合作標題,但不適合用于正文。有一個極細的版本(上圖沒有展現),在Google Fonts可以找到。

            Cabin——在Google Fonts可以找到。

            Lato——在Google Fonts可以找到。

            PT Sans——在Google Fonts可以找到。

            Entypo Social——一個社交網絡圖標集,在Entypo.com上能找到。

            這里還有其它一些資源:

            • Beautiful Google web fonts——有Google Fonts的運用實例,我經常在這里找靈感。
            • FontSquiirrel——收集了不少可以免費商用的好字體。
            • Typekit——如果你用Adobe Creative Cloud(也就是用Photoshop或Illustrator等),你就可以從Typekit中獲得包括Proximate Nova在內的大量字體。

            法則7:像藝術家一樣偷師

            我第一次坐下來試著設計按鈕、圖標、彈窗等各個 app 元素時,我感到我對于什么是“好”知之甚少。但是我也很幸運,我并不需要完全設計全新的 UI,因為有很多優秀的作品可以借鑒。

            下面列出一些資源,肯定會對你的設計非常有用 (按照重要性從高到低排列)

            1. Dribbble

            這個專為設計師而做的網站集合了網上最好的 UI 設計作品,在 Dribbble 上你能找到幾乎各種類型的案例。

            你可以關注一下我的dribbble作品集。下面是其他一些推薦給你關注的人:

            • Victor Erixon——有著非常明顯的個人風格,非常厲害。他的作品很漂亮、簡潔,扁平設計。他做 UI 設計師已經 3 年了,是這方面數一數二的人才。
            • Focus Lab——這些人是 Dribbble 中的名人,他們的作品非常多樣化,絕對是一流的。
            • Cosmin Capitanu——他是個通才,做出來的東西很瘋狂,有未來感,但又不太花哨。他用色非常棒,但并不只專注做 UX 設計的。

            2. Flat UI Pinboard

            這里面有一些特別棒的手機 UI 設計,你能找到很多精美的 UI 設計實例。

            3. Pttrns

            這里面有大量 app 截屏,它的一大好處在于,它是按照 UX 模式分類的,因此,你在搜索你手頭正在做的這一類作品時非常方便。

            我堅定地認為每個藝術家初期都該像鸚鵡一樣,不斷的模仿和學習,直到能把頂尖的作品模仿得惟妙惟肖,然后再開始找到自己的風格,引領新的潮流。

            所以,像個藝術家一樣偷師吧!

            總結

            我之所以寫這篇文章,是因為我很遺憾自己當初在學 UI 設計時,沒有這樣的教程。我希望這篇文章能幫到你。如果你是一名 UX 設計師,在畫好框架和線框圖之后,做出個漂亮的實物模型吧。如果你是一名開發者,把你下一個項目做得更美觀一些吧。

            UI 設計的學習不可能一蹴而就,而是需要不斷地觀察、模仿并且和他人交流。以上是到目前為止我所學到的,我也會保持著初學者的心態,繼續前進。

            亚洲综合小说另类图片
            <dfn id="4z7un"><s id="4z7un"></s></dfn>
                    1. <nav id="4z7un"><sup id="4z7un"></sup></nav>
                      <th id="4z7un"></th>

                    2. <output id="4z7un"><small id="4z7un"><input id="4z7un"></input></small></output>