• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        UI教程之按鈕設計方法

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2019-03-18 16:35

        1.解構按鈕

        首先得先解構一個按鈕,把按鈕中各個元素都提取出來。按鈕的繪制過程:先設一個網格基數(一般為4px) – 繪制一個寬與高存在比例關系的矩形(固定寬度的情況下) – 添加字符(中英文) – 添加按鈕(功能) – 調整距離(字符/按鈕與矩形之間的距離) -完成。下圖就是一個按鈕的線稿與正常按鈕的對比圖。


        2.網格基數

        繪制一個按鈕的第一步,就是設置網格基數。如果網格基數不設置4px而設置3px,那當我們畫一個高度為45px的時間選擇器時,得知右面“上”的圖標高度就是45/2=22.5px,這里出了小數點,22.5px中包含7個網格位,并多出了1.5個px,即22.5-21(3×7網格位)=1.5px的空位,1.5px<3px。所以網格基數設置為3px它是不規范的。在下圖中也做出了相應的解釋。


        我把圖上按鈕中為“上”的這個圖標拆解出來,再來分析它。圖標寬高為22.5px,多出了1.5px的。如果寬高為21px,就剛好是7個網格位。所以說把網格的基數設為3px,在繪制模塊時會出現小數位,小數位不滿一個網格位,則網格基數設為3px就是不規范的。


        規范的尺寸有16px、24px、32px、48px等,都是4的倍數。不管是前端制作,切圖還是設計都比較精確的。

        3.按鈕的寬高

        當我們繪制按鈕并選擇寬高時,要看它的字數是“固定的”還是“隨之變化的”。字數固定指的是像“確認按鈕”這樣永遠都只有兩個字的情況。而隨之變化指的是,按鈕的寬度要隨著字數的變化而變化。在字數固定的情況下,按鈕的寬高可以采用倍數關系,即按鈕“寬80px/高40px“的兩倍。


        但要注意的是,在按鈕寬度隨著字符數的變化而變化時,按照比例來繪制按鈕的寬高,造成的視覺效果不理想,就可以不采用倍數關系,直接用網格基數來繪制按鈕。例如:按鈕“寬88px/高32px”。


        繪制矩形要像人體比例那樣,具有隱性的比例關系。這種比例關系直觀上是看不出來的,但身體比例和諧的人,看上去就是有一定的美感的。我們做設計語言也一樣,看上去這個按鈕很普通,但實際是很多規則約束出來的。

        4.按鈕的曲率

        按鈕的曲率要針對不同的業務需求選用不同的數值。如果統一了按鈕曲率,當對應很多高度與間距不同的產品時,會造成幾個產品中按鈕曲率不和諧的問題。間距和高度越大的產品,按鈕的曲率就越接近直角矩形,差異性也越來越小。但在同一個產品時,曲率的變化幅度也不要太大,這樣就會失去一致性。


        這里拿上一章提到的4/6/8來舉例吧(4/6/8數值遞增為2像素),當按鈕高度為32px時,可以采用4px的曲率,當按鈕高度為40px時,采用6px的曲率,當按鈕高度為48時,采用8px的曲率,以此類推。


        那如果隨著按鈕的高度的增加,不做曲率的變化,按鈕就會越來越接近直角矩形。按鈕高度越高,這種感覺就越強烈。所以我個人建議,在不同的業務需求中,運用不同的曲率更合適一些。


        在相同產品中采用不同的曲率,這時按鈕做小規律的變化是沒有問題的。如果按鈕曲率遞增過大,那就會造成所有按鈕缺失統一性,曲率變化太大每個按鈕的獨立性就會變強,他們之間的差異化就會更明顯,所以從視覺上看上去就不像是一個組件中規范出來的。

        5.按鈕中添加字符

        在按鈕中添加字符,要注意的是字符與按鈕邊框之間要留多少距離就可以了,問題不大。但它們之間的距離不能過少,太少就會顯得很擠,給人感覺很小氣。也不能太大,太大給人感覺字符上下有種壓迫感。距離還需要設計師自己根據自身審美去控制。


        6.按鈕中添加功能

        在按鈕中添加功能,這里的“功能”指的就是“圖標”,加了圖標的按鈕就變成了“功能按鈕”。繪制功能按鈕跟添加字符類似,但繪制功能按鈕會考慮視覺差與平衡性的問題,就稍微麻煩一些。


        以上這種方法是錯誤的,如果按水平垂直方向進行對齊,會產生視覺差,就是失去了視覺平衡性。字符和圖標需要轉化為顏色的灰階度,才能測出它們的重量,才能知道它們從視覺上看誰輕誰中。測試得知,字符的顏色灰階度,要大于圖標的顏色灰階度,造成視覺不平衡。


        解決這個問題的方式,是看哪邊的視覺不平衡,就手動調整使他保持平衡。如果字符這邊重了,就在字符與按鈕之間加一些留白,如果圖標這邊看上去重了,就在圖標這邊加一些留白。


        當我們學會了如何保持按鈕的視覺平衡,就要再嚴謹一些。因為方便大家的理解,上圖中按鈕是去了外邊框直接放上去的,那真正在做組件時,下圖這種方法才是規范的。如圖所示:


        最后讓我們上一張對比圖,對比一下規范的按鈕與不規范的按鈕。


        結語

        好的作品(有規則有邏輯)與不好的作品(無規則無邏輯),他們從視覺的差異并不是很大。大家看問題不要看表象,形式主義缺乏內涵。當然從心理學角度講人們很確實容易受“美好事物”的影響,但大家要理性看待問題,不能過于感性,尋找作品中的主觀唯心主義,學習作品中好的一面,并運用到自己的設計思維當中。

        好的作品經得住時間的考驗,而那些形式主義只存于某時某刻,止步不前并永不前進。

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:平面設計的排版技巧和方法
        下一篇:UI教程之界面視覺設計與運營視覺設計的區別

        達內UI設計7月免費訓練營報名啦

        UI培訓教程之系統圖標如何設計

        月薪過萬的UI設計師都是怎么設計界面的

        達內設計學院九周年慶典回首來時路,共赴新征程

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>