不會(huì)因?yàn)椴欢O(shè)計(jì)而被束縛!面向萌新的10條基本規(guī)則

0 評(píng)論 5720 瀏覽 41 收藏 9 分鐘

優(yōu)秀的設(shè)計(jì)原理,不管是誰(shuí)都能輕松學(xué)習(xí),并加以利用。這篇指南,將為大家介紹在設(shè)計(jì)時(shí)可以靈活使用的10個(gè)點(diǎn)子~只有了解了這些基本規(guī)則,你的設(shè)計(jì)就會(huì)變得更好。

目錄:

  • 靈活使用對(duì)比
  • 「接近黑的黑」比「黑」更容易閱讀
  • 重要的內(nèi)容放在最初的位置
  • 將所有東西列好
  • 當(dāng)心字符的尺寸和間距
  • 搜索結(jié)果非常重要的時(shí)候,請(qǐng)使用「列表顯示」
  • 先進(jìn)行黑白設(shè)計(jì),然后再追加顏色
  • ?目標(biāo)是舒適的設(shè)計(jì)
  • ?使用完美的配色板
  • 了解Apple或Google的設(shè)計(jì)原則

1. 靈活使用對(duì)比

為了減輕眼睛的壓力,讓我們有意識(shí)的增加對(duì)比,使用不同的背景和字體的顏色吧。

通常來(lái)說(shuō),在白色背景上使用黑色文字可讀性是非常好的。避免使用明度很高的灰色或黃色、綠色,以及不使用非常細(xì)的字體,就沒(méi)有什么問(wèn)題。

2. 【接近黑的黑】比【黑】更容易閱讀

如果有設(shè)置文字黑色的機(jī)會(huì)的話,請(qǐng)不要使用純黑色(#000000),讓我們來(lái)使用“灰黑色”(#333333)吧。在純白的背景上疊加純黑,看起來(lái)會(huì)比較晃眼,專注于文字內(nèi)容會(huì)比較困難。

3. 重要的內(nèi)容放在最初的位置

首先,通過(guò)布置最重要的情報(bào),來(lái)提高網(wǎng)站和應(yīng)用的舒適度。重要的內(nèi)容,就算是沒(méi)有放大、滾動(dòng)、Tap,好好的表現(xiàn)出來(lái)也是非常有必要的。

?如何好好利用視覺(jué)層次,讓我們來(lái)參考一些案例吧。在Instagram中,用戶投稿的照片/視頻清楚的表現(xiàn)出來(lái)焦點(diǎn)。

在Pinterest中,通過(guò)將搜索欄配置在頂部,列出了一個(gè)非常漂亮的網(wǎng)格式布局內(nèi)容。對(duì)于應(yīng)用程序來(lái)說(shuō),搜索作為核心功能能發(fā)現(xiàn)新的內(nèi)容和情報(bào),為了尋找Pinterest也會(huì)被使用。

?再來(lái)稍微看一些其他的案例。

在Spotify中,將音樂(lè)專輯的作品作為開頭,緊接著是歌曲名,最后是配置控制按鈕。相較于快進(jìn)/快退,它被設(shè)計(jì)成更注重播放/錄制按鈕。

4. 將所有的東西整列好

在你在設(shè)計(jì)一個(gè)【和別人不同的】【有趣的】的作品之前,最先需要解決的問(wèn)題是,確認(rèn)各個(gè)要素之間是否對(duì)齊。只要對(duì)齊,就可以提升應(yīng)用程序、網(wǎng)站和平面設(shè)計(jì)的外觀了。

?此外,作為“對(duì)齊”有關(guān)的一個(gè)參考案例,讓我們看看Medium.com吧。它有些地方看起來(lái)很可笑。

在布局的左側(cè),優(yōu)質(zhì)的內(nèi)容并沒(méi)有很好的體現(xiàn)出對(duì)齊,而右側(cè)的主要內(nèi)容卻很好進(jìn)行了整理排列。

5. 當(dāng)心字符的尺寸和間距

通過(guò)調(diào)整字體尺寸來(lái)讓閱讀更方便,調(diào)整字符間距來(lái)讓內(nèi)容更加容易理解。

適合的文字尺寸和不適合的文字尺寸適合的文字尺寸和不適合的文字尺寸

?

適合的空間和不適合的空間適合的空間和不適合的空間

6. 搜索結(jié)果按順序排列是非常重要的時(shí)候,請(qǐng)使用【列表顯示】

眾多的移動(dòng)APP和Web應(yīng)用中,有多少種類型搜索結(jié)果的表示方法直到現(xiàn)在都還在討論。

其結(jié)果是,如果順序是很重要情況下,列表形式將是最有效的展現(xiàn)方法。如果不管搜索結(jié)果的順序如何,目的是幫助用戶發(fā)現(xiàn)新的內(nèi)容,那網(wǎng)格則是能帶動(dòng)視線的不二之選。

7. 先進(jìn)行黑白設(shè)計(jì),然后再追加顏色

用黑白的單色設(shè)計(jì),是可以解決APP的核心問(wèn)題點(diǎn)的一種設(shè)計(jì)。

由于顏色能無(wú)意識(shí)的反應(yīng)出人的感情,在設(shè)計(jì)UI組件時(shí)可能會(huì)成為一種阻礙。

8. 目標(biāo)是舒適的設(shè)計(jì)

如果想解決單手操作時(shí)帶來(lái)的操作問(wèn)題,可以參考下圖。

在該圖示中,直觀的反應(yīng)出了右手操作智能手機(jī)時(shí)的狀態(tài),在設(shè)計(jì)APP時(shí)可以有效的使用這種技術(shù),如屏幕的下面的1/3處布置導(dǎo)航菜單等核心的功能。

9. 使用完美的配色板

顏色也是一門奧秘很深的藝術(shù),為你的設(shè)計(jì)選擇合適的配色是非常重要的。在Dribbble可以找到不錯(cuò)的調(diào)色板,非常推薦使用像Coolors或Color Claim這樣的調(diào)色板生成工具。

10. 了解Apple或Google的設(shè)計(jì)原則

Apple和Google開源了對(duì)開發(fā)Android、iOS 用軟件的人來(lái)說(shuō)重要且極好的資源。

例如,在谷歌material的概要中,從APP設(shè)計(jì)的指導(dǎo)方針開始,齊聚了各種素材資源、配色、圖標(biāo)、部件資源。

而在Apple中,則有著Human Interface Guideline,通常被稱為HIG的文件編制。該準(zhǔn)則為你詳細(xì)介紹了設(shè)計(jì)iOS應(yīng)用程序所需的知識(shí)。

總結(jié)

想發(fā)現(xiàn)設(shè)計(jì)中所出現(xiàn)的問(wèn)題所在,長(zhǎng)時(shí)間的練習(xí)是非常有必要的。通過(guò)靈活使用這次介紹的設(shè)計(jì)方法,來(lái)做出更棒的設(shè)計(jì)吧。那么,一起來(lái)享受設(shè)計(jì)吧。

 

原文地址:http://photoshopvip.net/103769

譯者:?喪心病狂十六夜貓

來(lái)源:微信公眾號(hào)【喪心病狂的翻譯站】

本文由 @喪心病狂十六夜貓 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載。

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒(méi)評(píng)論,等你發(fā)揮!