<var id="7zf1j"><font id="7zf1j"></font></var>

          <sub id="7zf1j"></sub>

            讓設計細節更高級的4個實用小技巧

            來源:彩云Sky 發布時間:2018-05-19 17:50:21 閱讀量:4583

            本文記錄了國外大神在工作中對于一些UI細節的經驗總結,仔細閱讀,相信會有一些收獲!

            本文共計3029詞,閱讀大約需要10分鐘。

            以下是譯文全文:

            我猜想我們大多數人都是從了解一點UI,或者根本不了解的情況下開始從事設計的。但即使開始時我們并沒什么優勢,我們仍然想方設法的通過眾多設計書籍和文章來了解顏色,排版,布局等方面的知識。

            因此,在本文中,我將分享我從不同設計師那里學到的和在設計用戶界面時學到的東西,還包括我自己的一些新發現。

            聲明:以下的“不好的”示例并不一定意味著它們是錯誤的。這只是我們從良好的設計方案改進到更優秀方案的基礎。

            1. 讓重要的文字更加突出

            當文字需要分清層次結構時,單純使文字變大來強調通常不能解決問題,就像下面的問題一樣:

            文字的層次結構不只是小和大的關系,它需要文字在大小、字重和顏色三個方面進行正確的組合,形成對比,對比度越大越好。(譯者注:我認為對比度也不能太大,合適即可。)

            那么如何設計更好的對比呢?

            1、不要使用一種字重不同字體大小的方式來建立對比和層次。

            2、相反,把主要內容加粗加深,把次要內容變細變淡(不太重要的)。

            3、創建三種不同的文字顏色,從深色到淺色(參見下面的示例)。通常我使用我設計的基礎顏色作為正文文字顏色。

            4、不要害怕使用大的字體比例(例如:24px標題、16px正文、10px標簽等)。更大的字體比例=更好的對比。

            5、打開網站Modularscale在線計算器可以用來創建更好的字體層次。

            記住,對比度=大小+字重+顏色。

            6、最后,一定要回頭再檢查下它的對比??梢允褂眠@個計算器來檢查它的可讀性。

            上圖是我常用的基本色,我把深色用來做大標題,把淺色用來作為輔助內容。

            2. 不要使用多種復雜的顏色值

            不要在你的顏色選擇器上下移動,只是為了選擇一些深色色值,這樣做會讓你的工作變得復雜。

            我們都知道使用黑色文字顏色(#000)會給讀者眼睛造成疲勞,因此我們的替代方案是用比較暗的顏色。使用不同透明度的黑色作為解決方案,而不是去用復雜的十六進制顏色值。

            在我上面的實例中,我使用黑色作為主要顏色(#000),并根據其應用的位置(如主要內容,次要內容等)降低其透明度。

            3. 用數學方法理解顏色

            我們大多數人都會喜歡合適的顏色組合,每當我們看到一個精彩的配色時,我們都會問自己:“他們是怎么做到的?”(就像下面的那幅圖)

            圖片來源: momoandspirits

            直到我了解到,理解色彩不僅僅是對那些從一開始就有設計天賦的人,在色相,飽和度,亮度(HSB)上做簡單的加減法也會達到一些神奇的效果(我們將使用HSB代替RGB)。你可以輕易的就擺脫單調的白色背景,把它變成像畢加索的作品一樣,就像下面的例子:

            那么HSB的加減法在哪里體現呢?

            理解兩種顏色模式的方法

            實際上有兩種方法,我們可以看到,兩個選項都有相同的基礎顏色#B9F4BC(圓圈背景),但在文件夾和條帶顏色上有不同。在我們開始的時候,請記住第一個數字對應于色相,其次是飽和度,最后是亮度。

            選項A

            選項A

            在選項A中,我們可以看到色相值123在全部形狀(圓、文件夾、條帶)上始終未變,而飽和度和亮度則都發生了變化。

            現在,以飽和度24和亮度96為基礎值去改變。當我們為文件夾設計深綠色時,這兩個值都會變化。從飽和度24變到40(增加+16)和從亮度96變到82(減少-14),這說明飽和度在變化,無論是遞增還是遞減的,都需要與亮度成反比例調整,以設計出良好的對比(反之亦然)。同樣的事情也發生在條帶中,使用文件夾的飽和度和亮度作為基本值,飽和度從40遞增到44(增加+04),亮度從82降到75(減少-07)。從而引出公式:

            深色色調=飽和度增加亮度減少

            淺色色調=飽和度減少亮度增加

            每當我想知道我的設計應該使用什么正確的顏色時,這個公式幫助了我。我認識到,最好是有一個基本色,并從那里開始調整飽和度和亮度,同時保持色相值不變。

            選項B

            選項B 

            在選項B中,同樣的原理仍然適用(我們上面的公式),但這次色相值會改變。我們在各種設計材料中適用的術語RGB和CMY,現在對我們來說是有意義的。

            RGB代表紅色,綠色和藍色,而CMY代表青色,品紅色和黃色。當我第一次開始時,這些術語對我沒有任何意義,直到我發現了可以使用RGB和CMY進行顏色組合。

            現在在選項B中,如果我們想要使底色變暗,我們需要做的就是將我們的拾色器在調色板上移動到最近的RGB方向,或者將它移動到CMY方向,從而得到更輕的變化。例如:

            顏色拾取界面

            因為想要設計一個更深的底板背景顏色#B9F4BC(圓形背景),并應用到文件夾圖標中。這個時候就需要把顏色選擇器移動到最近的RGB方向(在這個例子中是藍色)。但是如果想要一個更淺的文件夾,就需要把顏色選擇器往左邊移,靠近CMY方向(在這個例子中是黃色)

            常見的情況是,RGB方向選擇顏色會讓顏色變得更深,而CMY方向則會讓顏色變得更淺

            在將顏色選擇器移動到想要的結果后,我們現在應用選項A中的公式,結果我們得到了下面這個配色:


            紅色,綠色,藍色(RGB)+選項A公式=深色色調

            青色,品紅色,黃色(CMY)+選項A公式=淺色色調

            4. 使用留白對內容進行分組

            留白要大膽

            除了在兩個組之間添加一行表示分離以外,使用更大的留白是一個更好的方案。

            就像臨近原則所說的那樣:

            彼此靠近或接近的對象會被看成是一個組的內容。

            以我上面的例子來看,我的目標是要把標題和作者區分開,用一個更大的24px作為間隔會更加合適。

            標簽: PHP 設計 行業新聞
            分享:
            評論:
            你還沒有登錄,請先
            2019年92午夜视频福利_五月丁香久久综合网站_三级网站视频在在线播放_日本漫画全彩3d口工漫

                  <var id="7zf1j"><font id="7zf1j"></font></var>

                    <sub id="7zf1j"></sub>