學會這10條設計技巧,新手也可以做出合格的設計!

      作者:喪心病狂十六夜貓
      分類: 觀點/經驗
      2017-08-29
      7927

      這篇譯文讓你get到10個簡單易用的設計原理,了解這些基本規則,就算新手也可以做出合格的設計。

      這篇譯文讓你get到10個簡單易用的設計原理,了解這些基本規則,就算新手也可以做出合格的設計。

      靈活使用對比

      「接近黑的黑」比「黑」更容易閱讀

      重要的內容放在最初的位置

      將所有東西列好

      當心字符的尺寸和間距

      搜索結果非常重要的時候,請使用「列表顯示」

      先進行黑白設計,然后再追加顏色

       目標是舒適的設計

       使用完美的配色板

      了解Apple或Google的設計原則

      一. 靈活使用對比

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

      通常來說,在白色背景上使用黑色文字可讀性是非常好的。避免使用明度很高的灰色或黃色、綠色,以及不使用非常細的字體,就沒有什么問題。

      01.jpg


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

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

      02.jpg


      三. 重要的內容放在最初的位置

      首先,通過布置最重要的情報,來提高網站和應用的舒適度。重要的內容,就算是沒有放大、滾動、Tap,好好的表現出來也是非常有必要的。

      03.jpg


      如何好好利用視覺層次,讓我們來參考一些案例吧。在Instagram中,用戶投稿的照片/視頻清楚的表現出來焦點。

      在Pinterest中,通過將搜索欄配置在頂部,列出了一個非常漂亮的網格式布局內容。對于應用程序來說,搜索作為核心功能能發現新的內容和情報,為了尋找Pinterest也會被使用。

      04.jpg

      再來稍微看一些其他的案例。

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

      05.jpg

      四. 將所有的東西整列好

      在你在設計一個【和別人不同的】【有趣的】的作品之前,最先需要解決的問題是,確認各個要素之間是否對齊。只要對齊,就可以提升應用程序、網站和平面設計的外觀了。

      06.jpg

      此外,作為“對齊”有關的一個參考案例,讓我們看看Medium.com吧。它有些地方看起來很可笑。

      在布局的左側,優質的內容并沒有很好的體現出對齊,而右側的主要內容卻很好進行了整理排列。

      07.jpg

      08.jpg

      五. 當心字符的尺寸和間距

      通過調整字體尺寸來讓閱讀更方便,調整字符間距來讓內容更加容易理解。

      09.jpg


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

      10.jpg


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

      六. 搜索結果按順序排列是非常重要的時候,請使用【列表顯示】

      眾多的移動APP和Web應用中,有多少種類型搜索結果的表示方法直到現在都還在討論。

      其結果是,如果順序是很重要情況下,列表形式將是最有效的展現方法。如果不管搜索結果的順序如何,目的是幫助用戶發現新的內容,那網格則是能帶動視線的不二之選。

      11.jpg

      七. 先進行黑白設計,然后再追加顏色

      用黑白的單色設計,是可以解決APP的核心問題點的一種設計。

      由于顏色能無意識的反應出人的感情,在設計UI組件時可能會成為一種阻礙。

      12.jpg

      八. 目標是舒適的設計

      如果想解決單手操作時帶來的操作問題,可以參考下圖。

      13.jpg

      在該圖示中,直觀的反應出了右手操作智能手機時的狀態,在設計APP時可以有效的使用這種技術,如屏幕的下面的1/3處布置導航菜單等核心的功能。

      九. 使用完美的配色板

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

      14.jpg

      十. 了解Apple或Google的設計原則

      Apple和Google開源了對開發Android、iOS 用軟件的人來說重要且極好的資源。

      例如,在谷歌material的概要中,從APP設計的指導方針開始,齊聚了各種素材資源、配色、圖標、部件資源。

      而在Apple中,則有著Human Interface Guideline,通常被稱為HIG的文件編制。該準則為你詳細介紹了設計iOS應用程序所需的知識。

      15.jpg

      總結

      想發現設計中所出現的問題所在,長時間的練習是非常有必要的。通過靈活使用這次介紹的設計方法,來做出更棒的設計吧。那么,一起來享受設計吧。


      0
      0
      分享到:

      0

      喜歡他,就推薦他上首頁吧^_^

      推薦閱讀

      ×

      賽事服務聯系方式

      0371-86068866

      4008887269

      cndesign@163.com

      好的,我知道了

      官方微信

      聯系我們

      • QQ:33143335 QQ:1904200230
      • 電話:18569912460
      • 投稿:cndesign@163.com
      • 地址:鄭州市國家大學科技園東區9號樓2層

      版權信息

        移動 Android 版 豫 ICP 備16038122號-2 豫公網安備 41019702002261號

      主站蜘蛛池模板: 女同一区二区在线观看| 无码精品人妻一区二区三区AV| 国产在线不卡一区| 亚洲线精品一区二区三区影音先锋| 亚洲精品色播一区二区| 无码人妻精品一区二区| 亚洲av成人一区二区三区在线观看 | 97精品一区二区视频在线观看 | 亚洲AV综合色区无码一区爱AV| 精品一区二区三区视频在线观看| 亚洲高清毛片一区二区| 亚洲福利一区二区三区| 国产吧一区在线视频| 日韩综合无码一区二区| 久久久久人妻一区精品| 影院无码人妻精品一区二区| 国产一区中文字幕在线观看 | 国产精品538一区二区在线| 精品国产亚洲第一区二区三区| 国产精品538一区二区在线| 男人的天堂av亚洲一区2区 | 99久久精品午夜一区二区| 文中字幕一区二区三区视频播放 | 亚洲日本一区二区一本一道 | 国产激情з∠视频一区二区| 国产在线视频一区| 国产免费一区二区三区不卡 | 国产一区二区三区精品久久呦| 国产一区二区三区播放| 无码精品人妻一区二区三区免费 | 国产一区二区三区在线电影| 水蜜桃av无码一区二区| 久久一区二区明星换脸| 亚洲一区二区三区深夜天堂| 日韩精品人妻一区二区三区四区 | 精品人伦一区二区三区潘金莲| 男插女高潮一区二区| 国产在线一区二区三区在线| 久夜色精品国产一区二区三区| 亚洲欧洲∨国产一区二区三区| 日韩精品区一区二区三VR|