您的位置:首頁 > 視覺傳達(dá)

設(shè)計(jì)中7個(gè)實(shí)用細(xì)節(jié)小技巧

發(fā)布時(shí)間:2020-04-13      閱讀量:19741次     

  有時(shí)候拉開基本功水平差距的,就在于一些微妙的小細(xì)節(jié)~,希望今天整理的這些小細(xì)節(jié),可以給你更多反思。
  技巧一:除了用字號大小對比來打造視覺層級,色彩和字重對比也有同樣的效果。
  字號大小對比是大家都知道最常見最容易的方法。重要的信息字號放大,次要的信息字號縮小。但一個(gè)界面里字號種類的數(shù)量不建議過多,否則會(huì)顯得凌亂,這時(shí)候就可以采用文字粗細(xì)對比、顏色對比等其他方法配合使用。
  小tip:
  1.字號種類控制在3~5種,保持克制。
  2.文字顏色種類控制在2~3種,保持克制。
  3.字重通常2種就夠了,普通和加粗。
  技巧二:在“彩色”背景上想要弱化文字,應(yīng)降低文字色和背景色之間的對比度,使其逐步接近背景色,而不是直接粗暴地改為灰色。
  小tip:
  1.當(dāng)背景為純色時(shí),可以靠降低白色文本的不透明度來調(diào)整前景文字和背景之間的對比度。
  2.當(dāng)背景帶有圖片或圖案時(shí),半透明的文本會(huì)影響可讀性,需要根據(jù)背景色手動(dòng)挑選適合的文本顏色。
  技巧三:投影適當(dāng)往下偏移一些。
  投影在垂直方向設(shè)置一些偏移量,會(huì)使投影顯得更加自然。
  由上而下光源偏見也叫做“上方照明偏愛(top-lighting preference)。大腦之所以會(huì)認(rèn)為從上方照下來的光線更自然,是因?yàn)槲覀兩钪惺冀K有一個(gè)巨大的來自上方的光源:太陽,漫長的進(jìn)化已經(jīng)在我們腦中刻下了“由上而下光源”這樣一個(gè)強(qiáng)大的偏見。因此來自上方的光源照射會(huì)讓物體顯現(xiàn)的非常自然。
  相反,來自下方的光源會(huì)讓物體看起來怪異不自然,設(shè)計(jì)師可以利用這個(gè)原理來制造一些恐怖怪異的氛圍。(題外話)
  下圖來自名偵探柯南
  技巧四:除了描邊,還有很多方法可以用來分隔信息。
  當(dāng)你需要分隔一些信息群組時(shí),不要一直用描邊去分隔,過多的描邊會(huì)使界面顯得過于瑣碎凌亂。
  增加組與組之間的間距,留白也是進(jìn)行信息分隔的一種常見手法,不一定需要通過線框來分隔。
  技巧五:明明是一樣的色值,文字看起來就比填充色淺,這時(shí)候需要加深一點(diǎn)點(diǎn)文字色,達(dá)到視覺平衡。
  不知道大家有沒有發(fā)現(xiàn),下圖藍(lán)色的說明文本看上去比藍(lán)色的按鈕更亮,但明明顏色色值是一樣的。右邊通過使用略深的藍(lán)色,神奇地解決了這個(gè)問題,視覺上更和諧統(tǒng)一。
  技巧六:米勒-萊爾錯(cuò)覺,相鄰放置不同的形狀,會(huì)造成視覺上不對齊的錯(cuò)覺,這時(shí)需要微調(diào)元素進(jìn)行視覺補(bǔ)正,以求得視覺效果上的平衡感。
  米勒-萊爾錯(cuò)覺:這個(gè)視覺現(xiàn)象表明,將一個(gè)V型記號放到線段兩端可能造成其顯得比實(shí)際更短或更長,長短取決于V型記號的朝向,這個(gè)經(jīng)典的錯(cuò)覺證明了人類感知錯(cuò)誤。
  左圖的膠囊型按鈕的邊緣給人向內(nèi)收攏的感覺,雖然像素上和文字對齊了,但視覺上按鈕顯得偏右了。右圖通過將按鈕往左側(cè)微微移動(dòng)來修正不對齊的錯(cuò)覺。
  亞馬遜的logo中,字母“a、m、o、n”同樣因?yàn)閳A形的外緣,有向下收攏的感覺,因此需要微微上移,與字母“z”達(dá)到視覺效果上的平衡。
  技巧七:不對稱的圖形如果直接居中,看起來并沒有完美居中。
  最經(jīng)典的播放按鈕的案例:把一個(gè)三角形放在圓形中直接居中,會(huì)使它看起來居中位置不對。為了使三角形視覺居中,需要通過計(jì)算等邊三角形腰的中點(diǎn)與對角頂點(diǎn)連線的交點(diǎn),來找出三角形的質(zhì)點(diǎn),這才是真正的中心(重心)。
  今天的小技巧分享到此結(jié)束,希望這七個(gè)實(shí)用小技巧可以幫助你更多。
  來源: 大秘密mimi發(fā)布
http://www.tukewang.com/article/detail-8899.html