• <nav id="z1nxc"><center id="z1nxc"><dl id="z1nxc"></dl></center></nav>
  • <th id="z1nxc"><pre id="z1nxc"><rt id="z1nxc"></rt></pre></th>

    企業網站建設 · 首選XSLCMS

    輕量級無多余代碼,執行效率高速度快,靈活擴展,多語言站點支持,生成靜態,全站SEO優化,響應式自適應各終端!

    了解更多 加入我們
    intro-image

    初級無經驗設計師快速提升UI界面設計技巧

    作者:新勢力內容管理系統XSLCMS官方網站    來源:新勢力內容管理系統XSLCMS官方網站     發布時間:2020-01-31    瀏覽量:3

    對于無經驗初級設計師來說,在項目實戰設計中通常會糾結文字是變大還是變小,元素是做減法還是做加法,顏色對比強烈一點還是淡雅一點會有些糾結。本文針對這一難題分享一些設計技巧,望能快速提升設計品質和產出能力。


    界面設計一致性的重要性

    讓我們從頭開始捋一捋。你希望你的設計看起來很好,值得信賴,需要不惜一切代價避免混亂。為了實現這一點,擁有一個完整的系統性思維是非常重要的。

    開發也期待設計師善用系統性思維,他們喜歡條理清晰的設計,這樣他們的工作會更容易。


    給定大小的尺寸設計系統

    無論是調整文字大小、圖片大小,還是調整留白,都沒有關系,前提是需要確定每個元素的大小。我敢打賭你一定遇到過這種情況:你曾經為一個元素選擇了一個大小,五分鐘后改了一次,然而沒多久又改了一次,也許最后改了無數次才確定下來。


    哪種尺寸最合適?可能是你試過的某一個尺寸,但其實應該避免這個無止境的浪費時間陷阱!


    首先選擇基本單元:8像素網格

    為了使整個設計看起來更簡潔,最好先設置基準單位,然后再確定所有的尺寸。具體選擇多少本來應該由你來定,但通常,最好的選擇是堅持一些經過驗證的規則。其中一條規則是以8像素的倍數來調整和移動元素的大小。這條規則會使決策更有效率。

    px和dp:“dp”這個詞也被用在界面設計和原型設計中?!癲p”是“密度無關像素”的縮寫?!斑@個單位是以160 dpi的屏幕為基準的,1個dp等于160 dpi屏幕上的1個像素,等于320 dpi屏幕上的2個像素,以此類推。數學換算公式是' px = dp * (dpi/160) '。

    注:如果使用的是較小的元素或對象,也可以使用4像素的增量,而不是8像素的增量——偶爾,可以根據需要進行進一步的調整。


    但為什么是8像素呢?

    這里有幾個原因可以解釋為什么8經常像一個“神奇的數字”:

    8像素是一個足夠的最小“增量”。

    8是一個很好的數,因為它能被4和2整除。

    如果使用8,就可以輕松地調整任何元素的大小,而不會出現半像素,比如8 / 2 = 4、4 / 2 = 2和2 / 2 = 1。另一方面,如果你從10開始,你會得到5個像素,然后是2.5個像素,然后是1.25個像素。在設計界面時,盡可能避免一半像素。通過使用完整像素,設計中的元素將對齊到精確的像素邊界,最終看起來更清晰。

    8的倍數(8、16、24、32、40、48、56、64、72、80等)與二進制值(1、2、4、8、16、32、64、128、256、512等)交織在一起。(彩云注:對程序很友好)

    最后,這些數字也很容易記住。


    使用8像素網格的優點是什么?

    作為設計師,決策時間是非常寶貴的。這將使你更快、更有效率。

    如果跟開發對接,這能創建一個體系幫助團隊提升效率。如果開發需要進行一些快速修改,他可以將值調整為8像素的增量。這能確保一致性和有規律。

    當人們訪問你設計的網站時,他們會感到很舒服,增強信任感和用戶體驗度(彩云注:秩序感能讓用戶獲得信任和舒服的感受)。


    水平網格

    我相信你在設計網站時已經使用過網格了,使用網格可以幫助你準確地將所有元素放置在界面上。


    網格形成界面的骨架,并決定可以將元素放置在何處。模板化定義了清晰的邊界,這樣設計就會更加一致。用上網格系統,可以更容易地決定將元素放在哪里。當經驗越來越豐富時,調整界面就會更加得心應手。


    但是如何創建這個網格呢?我們將在下面討論具體問題?;旧?,列的數量和大小可能是隨機的,這取決于你的需要。設計越細致,網格需要的列就越多。如果還是拿不準,就應該向有經驗的同事尋求幫助。


    垂直網格

    與水平網格類似,在設計中保持垂直距離的一致性也很重要,就像電子表格中的行一樣,它們可以幫助保持文本的均勻間隔。

    這些行應該要多大?再說一次,這取決于你的需要。然而,我建議使用8像素或8的倍數(如16)重新定義元素或文本要對齊的邊界。


    選擇正確的字體大小

    如果你仔細觀察一些精心設計的字體,會發現字體大小的一致性。這是有原因的。

    注:要記住,在你的設計中只需要兩個,也許三個字體大小。但是,如何選擇正確的字體并使它們協同工作超出了本教程的范圍。

    首先定義一些在整個項目中使用的關鍵字體大小。(例如,使用30,31和32像素是很愚蠢的。相反,應該將這三種非常相似的尺寸合并成一個。)


    標準字體大小有兩個好處:

    設計會更一致,更優雅。

    它將加快設計過程,讓你更有效率。


    字體大小

    定義字體大小時,請確保不要以相同的增量增加大小。當放大文本時,它應該是非線性的。這意味著創建的文本越大,增量應該越大。

    假設有一個文本,字體大小為12像素,你想放大它,然后嘗試用14像素,你很滿意。但然后想象你有一個大標題(40像素),你想讓它更大。你能把尺寸從40像素增加到42像素嗎?當然不可以。在視覺上,文本需要更大的改變。設計時可能需要將其增加24個像素,從而得到一個更大的64像素的標題。

    簡而言之,這意味著文本越大,需要使用的增量就越大。這個非常簡單的原則不僅適用于文本,也適用于按鈕的大小、空白和其他所有元素。

    它通?;谝粋€幾何級數。這是一個非常有用的圖表,顯示字體比例:

    然而,對于排版來說,一種行之有效的方法是使用一套經過經驗驗證的字體尺寸。比例是12、14、16、18、20、24、30、36、48、60和72像素。


    行高

    一旦定義了所有的字體大小,就要注意行高了。對于行高,再次使用4像素的增量。例如,對于16像素的文本,我們將行高設置為24像素。如果你想讓文字更有呼吸感,那么將行高增加4個像素到28。


    定義項目中的顏色

    顏色的各種組合太多了,如果你不預先定義顏色的深淺,就會浪費太多時間。你不能把自己局限于黑色、白色,藍色這類明確的顏色。對于每一種顏色,都需要其他的色調,提前設置好它們是很重要的,這樣在整個設計項目中顏色是能成體系的。為每種顏色準備5到10種色調,我喜歡為每種顏色定義9種色調。


    讓我們仔細看看顏色的深淺。

    為什么每種顏色有9種色調?


    第一個優點是顏色命名。無論使用的是設計軟件還是CSS代碼,都將從這個技巧中獲益。每個陰影將被分配一個數字,例如100、200、300、400、500、600、700、800和900。(為什么幾百?來源于css中的對自重的定義,文章鏈接:https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)。


    其次,9是定義顏色的方便數字。準備這些色調的最好方法是準備一排9個方塊,用顏色填充方塊。中間的是基準色,然后,定義最亮的色調(在最左邊)和最暗的色調(在最右邊)。下一步是設置色調之間的顏色。


    準備元素的不同大小、類型和狀態

    在設計時,通常會使用無數的圖標、按鈕和其他組件。同樣,最好提前準備好幾個尺寸,并將選項限制在盡可能少的范圍內。在設計過程中,不要添加其他尺寸,也不要試圖調整組件的尺寸以滿足需要。相反,只使用已經定義的那些,整個設計就會更加一致和干凈。


    讓我們以按鈕為例。開始時,需要定義它們的層次結構。為此,創建一個包含主操作的按鈕,一個包含次要操作的按鈕,或者另一個包要次次要操作的按鈕。對于每個按鈕,指定其狀態(激活、未激活)和顏色變體??傊M量將元素的數量減少到最重要的元素(彩云注:目的在于盡量要減少選擇的時間,和保證一致性,提升設計效率和質量)。


    定義其他元素的屬性

    UI設計師經常在設計中使用投影。然而,對于缺乏經驗的設計師來說,投影有時會是一種掙扎。做投影時,必須設置投影沿x軸和y軸的距離,以及模糊半徑、顏色和透明度。投影可能要花很多時間來調整,這就是為什么要在深入設計之前準備它們。提前備好投影組件(使用與顏色相同的方法),然后在整個設計過程中應用它們。


    此外,還要注意將使用的元素的所有其他屬性確定好,如角半徑、透明度和顏色梯度。


    留白

    適當地調整留白很重要。不管是從外部(空白)還是從內部(填充)調整元素,都應該再次依賴于魔術數字8,將偏移量增加8像素(小的元素增加4像素)。與字體大小一樣,間距越大,增量就必須越大(同樣,最好預先定義這些增量)。

    相關文章推薦

    <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>