亚洲欧美v国产一区二区三区,中文字日产幕乱五区,综合亚洲,,,色,亚洲伊人久久大香线蕉综合,亚洲综合精品伊人久久

首頁 > SEO動態(tài) > 網(wǎng)站技術UI沒有高級感?先掌握核心的視覺“骨架”知識!

UI沒有高級感?先掌握核心的視覺“骨架”知識!

2023-11-01 08:26:17

UI沒有高級感?先掌握核心的視覺

一、UI界面中的視覺骨架

UI 界面的設計本質(zhì)上非常的簡單,但是很多新手,以及工作了多年的設計師輸出的作品質(zhì)量都不盡如人意,做出來的作品效果看上去 "不高級"、"不精致"、"沒設計感"。

UI沒有高級感?先掌握核心的視覺

UI沒有高級感?先掌握核心的視覺

UI沒有高級感?先掌握核心的視覺

UI沒有高級感?先掌握核心的視覺

這種情況的核心原因往往不是配圖的問題,也不是配色的問題,更不是審美的問題,僅僅是定義 UI 元素的尺寸、間距做的并不好。

比如我們看下面這些原型,僅僅是置入基本的元素和黑白灰,但看起來是精致的、和諧的、穩(wěn)定的。

UI沒有高級感?先掌握核心的視覺

UI沒有高級感?先掌握核心的視覺

UI沒有高級感?先掌握核心的視覺

這種感覺我們可以用 "規(guī)整" 來形容,即元素模塊合適的尺寸,擺在了合適的位置,在不討論交互、體驗的基礎上,沒辦法挑出什么視覺的毛病。

這也是我在 UI 界面設計的學習中建議大家優(yōu)先掌握的技能,因為這種基礎的尺寸設置和間距控制就是界面的骨架,和人一樣,如果骨相不好,就算后再怎么玩穿搭和化妝也救不回來,往往還適得其反,讓畫面的效果變得更糟糕。

二、尺寸和間距的組合

回到我們關注的要點,尺寸和間距上,它們有什么特征和關聯(lián)。

尺寸就是元素在界面中占據(jù)的實際面積,它的長和寬的數(shù)值大小。UI 的尺寸包含兩種模式,一種是固定尺寸,即長寬的數(shù)值是固定的不會改變,另一種是自適應尺寸,會根據(jù)內(nèi)容或外部環(huán)境調(diào)整尺寸。

先拋開自適應的類型,首先關注固定尺寸。固定尺寸的元素可以說是我們一開始學習 UI 相關規(guī)范的關鍵內(nèi)容了,比如頂欄、底欄、按鈕、文字應該設置多大的尺寸。

UI沒有高級感?先掌握核心的視覺

只有極少數(shù)的元素是有指定數(shù)值的,多數(shù)元素的尺寸都會有一個合理的設置區(qū)間,比如正文是 13-16 之間,關注按鈕的高度在 24-32 之間,超出了就會顯得奇怪,和界面格格不入。

UI沒有高級感?先掌握核心的視覺

而類似按鈕、輸入框這類包含多個元素的控件,使用固定數(shù)值來定義背景、邊框的話,那么內(nèi)部的元素就會根據(jù)背景進行水平或垂直的居中,來確定它所在的位置。

UI沒有高級感?先掌握核心的視覺

這是個非常入門的概念,學設計的第一天應該就能領略的知識。但真正的問題在于,那些復雜的模塊、組件,也能用固定尺寸的模式創(chuàng)建背景,然后再用對齊來擺放里面的元素嗎?

UI沒有高級感?先掌握核心的視覺

這些組件類型五花八門,內(nèi)容各不相同,在設計前能給出準確的數(shù)值,是不現(xiàn)實的。所以我們就會根據(jù)內(nèi)容來決定背景元素尺寸的大小,內(nèi)容越大,則背景越大。

比如一個通知彈窗,提示文字的字數(shù)是不同的,有的一行有的兩行有的三行,如果直接設計一個固定高度的卡片那么就會按最大尺寸支持去設計,這樣看起來效果就不理想。而主流的做法,就是使用自適應的高度的方法,讓卡片的高度跟隨內(nèi)容的高度做適配,不會產(chǎn)生過多不必要的留白。

UI沒有高級感?先掌握核心的視覺

而在這個模式下,還有個關鍵的因素,就是對內(nèi)間距的應用。這里我們要強調(diào),間距也包含兩種,一種是內(nèi)間距,一種外邊距,即 CSS 盒模型中的 padding 和 magrin 兩種屬性。內(nèi)間距的值是我們一開始制定好的,而組件的自適應尺寸,就是內(nèi)容+內(nèi)間距的和。

UI沒有高級感?先掌握核心的視覺

當然,尺寸也可以通過外邊距來確定,比如任何 UI 界面都有對應的畫布,如果我們不想做超出畫布的設計,那么設計一個組件卡片,它的尺寸就應該是畫布尺寸 - 外邊距(也可以理解成是畫布的內(nèi)間距)。比如在一個 B 端界面中,中間的卡片總寬度就是畫布寬 1440 - 20*2=1400,一個 App 界面中的卡片寬就是 393-16*2 = 361。

UI沒有高級感?先掌握核心的視覺

外邊距也可以作為組件之間間距的應用,比如在一個商品列表中,不同的商品卡片之間的距離同樣是外邊距的應用。

所以進一步總結(jié),UI 頁面的"骨架"設計,就是尺寸和間距定義的過程,掌握它們的定義技巧,也就能輸出優(yōu)秀的界面骨架,為后續(xù)的視覺效果提供良好的基礎。

三、尺寸和間距的應用過程

有了上面的認識,我們就可以進行實際案例的演示了,比如 C 端中的動態(tài)卡片:

第一步:通過左右邊距確認它的寬為 361,同時制定它的內(nèi)間距為 12,即卡片內(nèi)容區(qū)域為 361-12*2=337。

UI沒有高級感?先掌握核心的視覺

第二步:完成卡片內(nèi)容的設計,包含頂部用戶信息、中間寬為 337 的圖片、底部的圖標。

UI沒有高級感?先掌握核心的視覺

第三步:完成卡片背景的高度設置,確保上下內(nèi)間距保持一致,然后復制出新的組件完成列表。

UI沒有高級感?先掌握核心的視覺

在這個設定中,同類、同級的間距是要具有一致性的,尤其是內(nèi)間距的應用。比如上間距和左右間距不一致,看上去就會非常的不嚴謹、失衡,這是要第一個發(fā)現(xiàn)并解決的問題。

UI沒有高級感?先掌握核心的視覺

而不使用這種邏輯完成的設計,先確定外部尺寸高再完成子元素的布局,就會出現(xiàn)強行擴大或縮小內(nèi)部元素間距的 "補救措施",是組件顯得凌亂沒有設計感的罪魁禍首。

UI沒有高級感?先掌握核心的視覺

所以總結(jié)一遍自適應尺寸類型的組件設計流程:

  1. 確定組件寬和高是固定還是自適應
  2. 確定組件的內(nèi)間距和外邊距大小
  3. 完成組件內(nèi)部元素的設計和布局
  4. 重新調(diào)整背景尺寸滿足內(nèi)容和間距的需要

我們熟悉的即時設計、Figma 等 UI 設計軟件中提供的自動布局,就是基于它們的邏輯關系構建出來的功能。想要真正用好自動布局,并不是去學習它的功能和操作然后強行用到項目里去,而是先理解這些元素設計的邏輯,再借助自動布局功能來提升效率,這有本質(zhì)的區(qū)別。

UI沒有高級感?先掌握核心的視覺

同時,這種制定尺寸和距離的使用邏輯,是需要通過刻意練習來掌握并提升。而最好的練習方法,就是畫原型的方法,不要被產(chǎn)品、體驗、視覺上的問題綁住手腳,就使用黑白灰和基本的文字、幾何元素來完成界面的骨架設計。

UI沒有高級感?先掌握核心的視覺

真正掌握這種能力以后,就會明白骨架的設計和視覺的設計是可以拆成兩部分完成的,而前半部分的設計成果同時可以作為產(chǎn)品原型、交互原型用,根本沒有額外占用多少時間,而評審可以提前就大大提高了整個項目的設計效率。

如果不知道怎么開始練習,可以從自己以前的作品中找案例進行修改,也可以從線上找案例做改版,方法多種多樣。而基于它對于 UI 設計的重要行,你需要練習到完全不需要通過思考就能憑借本能完成參數(shù)設置的水平。

先定個小目標畫一百個界面……

結(jié)尾

在這么多期的教學中這個問題非常的突出,所以我要單獨做一篇內(nèi)容進行解釋。后面我會再拿一些案例來做實際的改版演示,移動端和 PC 端的界面都會有,你們有自己當前設計的不滿意的界面案例,也可以在社群中發(fā)給我作為改版對象。

以上就是今天的分享內(nèi)容。

歡迎關注作者的微信公眾號:「超人的電話亭

想了解更多網(wǎng)站技術的內(nèi)容,請訪問:網(wǎng)站技術

本文來源:http://www.sonygallery.com.cn/seodongtai/19566.html

免責聲明:部分文章信息來源于網(wǎng)絡以及網(wǎng)友投稿,本網(wǎng)站只負責對文章進行整理、排版、編輯,是出于傳遞更多信息之目的,并不意味著贊同其觀點或證實其內(nèi)容的真實性,不承擔任何法律責任。
用我們的專業(yè),做您滿意的SEO+高端網(wǎng)站建設服務商!