當前位置:首頁>虎課讀書> 寫給大家看的UI設計書
音頻
免費 寫給大家看的UI設計書

柯皓 著

更新時間:2020-03-24 6999人已學

一分11选51課時 / 25分鐘3秒

立即收聽正在收聽中繼續收聽 加入虎課讀書VIP,全年免費聽書收藏
已收藏
本書介紹

       簡介:

       對于想要進入UI這個領域的新人小白來說,如何入門、如何對UI設計有一個比較系統、全面的認識并不簡單。這個過程可能是非常耗時,也很低效率。那如何快速了解UI是什么、UI設計的原則、以及實際操作中會遇到什么樣的問題呢?

       來聽聽擁有10年UI設計經驗的柯皓老師(@酸梅干超人)的這本《寫給大家看的 UI 設計書》,作者傾情獻聲,講解聚焦于UI設計師職能的第一步——如何設計出正確、優美的界面。

       關鍵詞:

一分11选5       UI設計、界面設計、配色方法

       一句話推薦:

一分11选5       UI設計要注意的這些,你都知道嗎?

       出版信息:

       書名:《寫給大家看的UI設計書》

       作者:柯皓

       出版社:電子工業出版社

       版權聲明:本書系與作者合作解讀書籍


       虎課讀書主創團隊:

一分11选5       選書:主編劉瑩

       撰稿人:本書作者柯皓

一分11选5       審稿:主編劉瑩

       主播:柯皓[酸梅干超人](作者版)

       校對上線:編輯之意


書籍目錄(共1章)
  • 1
    【男聲版】寫給大家看的UI設計書
    6999人已學時長:00:24:56
本書文稿 (完整文稿)

如有反饋建議,請加虎課讀書QQ群:679417289 

前言:

       如何入門和對UI設計有一個比較系統、全面的認識,是困擾很多新人的問題,因為 UI 是一門駁雜的學科,需要掌握的知識種類豐富、維度廣泛,但我們在網上只能搜索到一些碎片化的知識,且很難將它們串聯起來,形成一個整體的概念,并始終對如何進行入門、展開學習有非常大的困惑,是新人首先要解決的問題。

       我呢,是一名擁有十年設計經驗的設計師,曾就職奧美、小紅書、學霸君等多家知名企業,負責相關的產品設計和設計團隊管理。也在知乎、虎課、公眾號上發布過大量的設計分享和教學,輸出過許多轉發和閱讀量較高的文章,相信關注UI設計的同學有可能看過一些我的分享。

       我們本次要講解的書籍,是我自己編寫的一本面向零基礎 UI 設計新人的讀物,叫 《寫給大家看的 UI 設計書 》。這本書的主要內容,是幫新人更系統的認識和理解 UI 視覺設計,并從零開始學會獨立完成 UI 界面的視覺設計,正確的開啟小白進階之路。

一分11选5       書中共有 9 個大章,從 UI 設計是什么這種基本的概念開始,對必要的知識做出掃盲和解釋。并逐級拆分構成界面視覺的元素,獨立講解它們的設計方法以及要點,并通過這些知識點結合正確的流程,完成整個 APP 項目的設計。其中,我對文字應用、配色等難以掌握知識點做了一些特殊的總結,極大地降低了它們的學習門檻,讓讀者能更快地上手。

第1部分,UI是什么?

       對于UI設計來說,它和平面設計有一定的差異,平面設計是一種用來瀏覽和閱讀的靜態視覺內容,讓瀏覽者單方面接收畫面的信息。UI的界面則是用來連接程序和用戶的媒介,也就是說,我們要通過一種可視化的圖形來幫助用戶和機器進行交互。

       更近一步說起來,在過去,人類操作計算機、程序,需要通過鍵盤在系統鍵入一長串的代碼、命令行,然后再讓它們開始執行操作。但是隨著圖形化界面的產生,我們可以將本來生硬的代碼轉化成圖形,比如一個軟件中的下一步、返回都由圖形元素表示出來,那么我們就可以通過鼠標或者觸控的方式進行操作,大大降低了軟件使用的門檻,操作成本。

       一分11选5今天互聯網行業已經成為一個主流的行業,有越來越多的人入行或從事 UI 設計,造成行業的門檻上升,競爭比過去更激烈。在網上,有非常多的聲音唱衰這個行業,無論是行業飽和、互聯網寒冬或是AI取代設計師的論調,這都是一些非常短視的觀念。互聯網和信息數字化發展的趨勢是勢不可擋的,基于前面所說的特征,未來只會有越來越多的設備、軟件誕生,UI 設計的需求也只會越來越多,而不會隨著時代的發展萎縮或者消亡。新手大可不必為這樣的說法而產生憂慮,可以全情投入到這個行業的發展和學習中去。

       雖然 UI 設計未來還有很大的發展潛力,但它依舊只是一個新興的職業,且從理論到應用的知識處于持續更新迭代的階段,是一門非常注重實踐的技能,我們的學習應該以實踐作為主要的方向和手段,除了必要的知識點以外,不要過度沉迷理論內容。

       因為多數的專業理論界限模糊,易用性較低,很難轉化成前期學習的成果。在我指導過的新人中,就有很多這樣的例子,將大量的時間用來專研理論知識,但在設計作品的產出上卻強差人意,因為沒有足夠的實踐積累,不僅理解理論非常的吃力,并且也完全無法考慮如何應用到實踐內容中去。

       比如關于人機交互領域的菲茲定律,提出任意一點移動到目標中心為止所需的時間,與目標距離正相關。也就是說如果頁面中兩個關聯都需要操作的按鈕離得越遠,操作難度越大,它還給了一個比較復雜的計算距離和難度系數的公式。即使我們了解了這個理論,熟練應用公式計算,也沒辦法通過它來確定按鈕之間的間距應該有多少,且沒有一個統一的數值和范圍可以應用到所有的布局環境中。它只能作為一個評估真實項目交互流程的標準之一,作為改版決策的參考。這是我們沒法在別人的分享或者沒有足夠項目經驗的情況下能正確理解的。

       或者我們在各種小說、電影中會看見的一個高大上的名次,奧卡姆剃刀原理一分11选5,概括起來,即“如無必要,勿增實體”,也就是簡單有效原理,是交互領域被高頻引用的原則之一,是極簡化思潮的重要理論武器。但是,我們在設計界面的時候,怎么評判元素是完全沒必要出現的,尤其是在類似淘寶、京東這樣的極其復雜的產品中,少一個注釋文字會不會用戶就看不懂了,少一個裝飾性的圖標會不會讓畫面看起來枯燥沒有生氣,這都需要設計師依靠自己的經驗積累去做判斷,否則這句話對我們的用處也非常有限。

       一分11选5再者,對于平面設計來說,UI 設計的軟件操作、技法其實是非常容易的。主流的扁平化 UI 界面,組成它們的視覺元素主要分為四種,分別是幾何圖形、文字、圖標、圖片。不信大家可以自己打開手機中的 APP,觀察一下是不是由這四種元素組成。所以,設計 UI 界面的創作過程,實際上就是用正確的方式設計或引用這四種元素,并將它們有效、合理排版到對應的畫布中去。UI 設計的過程更多是一個排版的過程,而不是平面設計的創作過程。

       這也是為什么我們在工作中進行 UI 設計的主要工具并不是使用 PS 或者 AI 的原因,因為它們太復雜了,而且操作效率較低,不利于排版操作的快速響應。所以,學習UI優先應該掌握的工具,是 Adobe XD、Sketch 或者 Figma 等適合界面排版布局的軟件一分11选5,它們也是工作中設計界面的主要工具。

       一分11选5而我們了解的系統設計規范,以及屏幕分辨率相關的知識,就是保證這個排版過程正確的基礎條件。

 

第2部分,平面設計四要素

       在這章節中,我想和大家介紹一個極其重要的設計理論,即對齊、親密、對比和重復四個要素。可以說,平面四要素是 UI 視覺表現中最重要的基礎

       它們脫胎于格式塔原理,該原理是心理學八大分支之一,它指出我們的眼睛和大腦會自行對接收的視覺圖像作出組織、簡化、統一的解釋,以符合人類的思維習慣,即將我們所見的視覺材料更快地加工成能快速被大腦理解的內容,總結了類似接近、閉合、連續、簡單、均衡等諸多有關人類視覺習慣的特征。但是這些特征記憶起來不僅名稱拗口,而且對不是心理學專業的同學來說有比較大的理解負擔,所以平面四要素,就是將這一系列特征進行濃縮,以適應我們實踐過程中所需要的理論。

       接下來我們分別解釋下四要素的相關特征。首先談談對齊要素,這是我們接觸設計前就已經掌握的理論了,如果相關的事物擺放沒有對齊,那么看起來就會顯得雜亂無章。而在界面設計過程中,對齊還可以確定畫面的重心,引導用戶視覺的查看順序一分11选5。比如我們可以看本次分享文稿中的配圖案例,在這個商品詳情頁面中,上下方的元素分別使用了左對齊和右對齊,而且需要我們理解、重要的信息則主要使用左對齊的方式排列,適應了我們正常的閱讀習慣,保證了畫面整體的整齊感。

       再說說親密性,親密性是指在畫面中,靠的越近的元素,證明它們關聯性越高。比如在該配圖案例中,我們可以看見商品的標題和小標題之間的間距,是小于它們到價格和下方標簽的距離的,因為標題和小標題的邏輯更親密,所以它們的距離就理應更小。在一個界面中,我們可以通過親密性的原則,將邏輯接近的元素組織到一起,這樣用戶就可以自然而然地辨認不同的模塊和功能。就像我們走在街上的時候,可以很快地認出陌生人中有哪些是相互認識的,可能是好友或者有一些親密的關系,而不認識的人之間的間距是比較大的,所以我們日常生活中有很多方面和領域,都可以簡單地依靠間距這個概念來幫助我們組織邏輯和關聯性。

       很多同學在最初接觸UI設計時,會有“自己的設計稿總是有些雜亂無章”的感覺,會顯得亂?那這就有可能是違反了親密性的原則。初學者常有一個誤區是,覺得用很多元素堆砌能夠突出設計,但有時善用空間上的距離親疏,更能達到這種“突出效果”,有一種“無聲勝有聲”的感覺。

       接著,我們還可以用這個案例來理解對比要素,對比是一個用來升華界面視覺體驗的關鍵。那么,還是在這個配圖中,價格、優惠券、購買、加入購物車等元素都采用了一些比較突出的色彩,而在文字中,一些描述性的文字諸如領券、已選等,不僅文字的色彩沒商品的標題強,字號、粗細也更小,這就是對比,可以通過這種大小、強弱的對比更多地吸引用戶關注到重要的內容上去,也方便它們區分不同的元素內容。如果缺乏對比,所有的元素使用相同的顏色,所有的文字使用相同的樣式大小,那么這個界面不僅視覺體驗會非常無聊,并且不具備基本的實用性,因為我們無法判斷畫面中哪些元素是信息,哪些是可以操作的按鈕,這會造成用戶的理解困難,用戶需要一個元素一個元素理解。可以說,對比的使用,就是將畫面中重要的元素突出,次要的元素弱化,而對比要素的加入除了豐富我們的界面視覺體驗外,也會引導設計師在設計過程中通過元素重要性的思考去深入理解交互和產品。

       雖然畫面中必須有對比的體現,但并不代表每一個元素都要使用不同的樣式,重復原則指出,我們可以將一些含義相同,重要性相近的元素使用一樣的樣式。例如在這個配圖案例中,領券、已選、送至這些注釋性文字就使用了相同的樣式。而在我們設計一整套應用的時候,往往有數十上百個界面,要保證這么多的界面視覺上的統一,就更要遵循這個要素,保證邏輯一致、功能一致的按鈕、圖片、標簽、文字等元素重復使用相同的樣式。而重復要素,就是我們建立項目視覺規范和應用的根源。

       之所以重點強調平面四要素,作為我們學習 UI 設計的切入點,是因為優秀的 UI 設計作品一定會遵循某種理性和嚴謹的思考方式而產生,而不是僅僅依靠設計師的審美或者靈光乍現,而平面四要素就是最簡單使用的思維方式。

 

第3部分,關于UI設計

       第三部分,我們主要來學習一些 UI 的基礎元素設計。UI 設計和平面設計在設計過程中有一個巨大的不同點,就是,UI 操作中,我們是在屬性欄中調整元素數值的方法來定義元素的樣式,而不是使用鼠標拖拽

       一分11选5比如,我們要在一個獨立的登錄頁面中,創建兩個輸入框和一個登錄按鈕,那這個設計過程,就不是我們用鼠標拖入三個矩形,然后分別拖動它們的尺寸來完成的。比如設計輸入框,要方便點擊,且往里面輸入的文字能便于閱讀,不會太小,也不會太大。這樣的要求,就客觀的約束了輸入框的尺寸數值。所以,行業的發展,逐漸形成了一套對不同元素參數設置的范圍體系,專業的設計師在設計這個輸入框的時候,會使用輸入長寬數值的方法來確定它的尺寸,而不是通過鼠標拖動元素邊框尺寸。

       比如輸入框和按鈕,在尺寸上是比較接近的元素,我們會用 44pt 這個最符合我們手指觸摸的熱點數值作為標準,如果要設計得緊湊一點,就會適當在這個數值上減少,如果要設計得寬松一點,就會在這個數值上增加。但到這里,我們一樣要面對一個問題,就是應該增減多少數值合適?如果沒有一個標準,豈不是和鼠標拖動的設計沒有區別。

       基于顯示器顯示習慣,像素是一個頁面最小的單位,所以必須應用整數,在這個前提下,奇數沒辦法在屏幕中完美的實現居中對齊,比如13、15沒辦法被整數等分,再考慮到不同像素密度的屏幕之間適配問題,最后就得出 4 的倍數數值是我們在設置元素盡量要滿足的特性。一分11选5基于這個特性,我們就可以通過 44 遞增或遞減 4 來確定元素的尺寸,比如我們要做一個小一點的輸入框,就可以通過 40、36、32,大一點就 48、52、56 等等。這個遞進的方式,就可以很好的縮小我們選擇的范圍,因為4這個數值在真實的界面當中,每進或者減一檔,可以明顯地發現在視覺體驗中的區別,所以可以很快選出我們覺得合適的那一個尺寸。這種手動輸入元素尺寸的方法,是我們展開 UI 設計最重要的習慣之一。

       而一個頁面的組成,除了我前面提及的四個基礎元素,還有一些更復雜高級的元素,是 UI 界面中專屬的一些模塊。比如,文字和矩形組合,可以形成按鈕、輸入框、標簽等,原型和矩形組合,可以形成開關、音量滑塊等等。在 UI 界面中,一些最基本的交互單位,我將其定義為控件一分11选5。但是控件這樣的單位太基礎,比如我們在朋友圈或者微博瀏覽一個用戶發布的動態,每一條動態就是一個更復雜的單位,這樣的單位我們肯定也需要又一個形容方式,我們稱其為組件,一個組件內可以包含多種控件、文字、圖片或其它基礎元素。最終,不同組件的拼接,就可以形成一個完整的界面。

       換句話說,一個界面的框架,就是由基礎元素、控件、組件所組成的一分11选5。在書中,我們就比較具體的講解了一些控件定義的數值和組件的設計方法,就不在這邊做出詳細的羅列了。我們想要設計好界面,該做的就是學會這些基礎元素、控件的定義數值區間和方法,從基礎開始逐級向上探索。而當我們覺得設計的界面不合理的時候,也可以非常輕松的定位出是哪一個部分出了問題,然后尋找解決的方案,或者是制定對應的提升計劃。

 

第4部分,關于UI配色

       配色的學習是一個困擾所有新人設計師的問題,因為配色具有非常玄學的屬性,一樣的顏色,給不同的人看,或處于不同的場景、時間、天氣下,都會產生不一樣的效果,所以無論哪種傳統的色彩學習方式,都是非常復雜且耗費時間和精力的。

       配色過程不能憑感覺,一定要有明確的目標和方法。而 APP 配色的目標,就是為每套界面找出合適的主色、中性色和輔助色。主色就是每套應用的核心色彩,用來呈現品牌的調性和識別性,比如美團的黃色、餓了么的藍色、豆瓣的綠色。主色對于一款應用的識別來說是至關重要的,也方便這款應用給用戶留下深刻印象,而輔助色則是除主色外,應用到界面元素中的不同顏色,比如在主色是藍色的餓了么中,會使用紅色輔助色來表現價格、評分,會使用黃色輔助色應用在表示會員積分的數字或圖標上。而中性色,則是界面中普通背景、文字等元素使用的色彩,比如我們前面講解對比的這個案例中,文字上使用的顏色不同會產生對比,但這種不同都還是在灰色的范疇里變化,而這種不同的灰度,就是我們所說的中性色,當灰度最高時就是黑色,最低時則是白色。

       確定完主色、輔助色、中性色這三種配色的目標以后,我們再分別展開學習它們各自選配的方法,就可以很快掌握 UI 設計中配色的訣竅。其中,主色我們通常只是用一種顏色,且會使用飽和度和明度較高的顏色,換句話講,就是比較鮮艷的色彩,而很少會使用平淡、昏暗、模糊的顏色,大家可以自己打開手機 APP 的列表,看看已安裝的應用圖標是不是都使用了這種鮮艷的配色。

       輔助色的應用則根據具體的使用場景來賦予一分11选5,就像前面講的收藏、折扣、價格等元素,我們需要因地制宜,而不是只在有主色的基礎上直接硬配輔助色,這其實是多數新手學不好配色的本質原因。

       最后說的中性色,則是在從白到黑選擇出不同強弱的灰色,分配到合適的背景和文字元素上去。

       配色的過程是按順序分別完成的,雖然色值的選擇理論上也不容易,但 UI 的選色并不如其它設計類型的配色那么復雜,因為 UI 的色彩是由顯示器顯示出來的,而這種色彩顯示方式有諸多的限制,不僅體現在客觀技術上,還包括對人生理的影響上。比如熒光黃、熒光綠等顏色,如果在屏幕中大范圍出現,那么任何人都會覺得不適和反感。

       一分11选5而飽和度、明度較低的顏色,且往往比發著純白或純黑光源的背景色還沒存在感。所以 UI 設計中,色彩的使用有非常大的局限性和偏向性,這對于學習配色來說是一件非常幸運的事情。因為我們在選擇配色的過程中已經有了非常大的限制,所以大大縮小了我們可選顏色的范圍,這就讓配色更簡單。

       對于配色,我在書中具體介紹了主色、輔助色、中性色這三種色彩類型的主流選取方式,那么接下來,你的配色過程就會變得非常的簡單,讓我們可以很快速的完成頁面的配色,并可以通過這樣的方法,針對一套頁面反復進行配色的嘗試和練習,可以快速提升相應的水準和認識,并能從中發現配色的樂趣,而不只是痛苦的煎熬。


結語:

       一分11选5以上就是關于本書部分內容的詳細介紹,接著我們來進行總結,幫助大家鞏固知識點。

       第一部分,我們說了 UI 是一種通過視覺元素來幫助人類與程序進行交互的學科。一分11选5隨著互聯網的發展和范圍擴大,未來對于 UI 界面的需求只會逐步上升。雖然這是一個重要的領域,視覺表現也是這個職業的第一要求,但是 UI 設計在技巧上并不復雜,因為頁面只依靠幾何圖形、文字、圖標、圖像四個元素組成,UI 設計的過程就是對它們進行正確排版的過程。

       第二部分,則簡單介紹了平面四要素,對齊、親密、對比、重復,它們對于設計出正確界面的重要性。其中,對比是我們最要重視的要素,因為對比需要我們分析頁面內容的重要性,不僅提升頁面的視覺體驗,也幫助我們更深入地思考交互與產品。

       第三部分,就開始進入到正式的 UI 界面設計中去一分11选5,認識 UI 界面是由基礎設計元素、控件、組件依次組合而成。而我們學習 UI 界面設計的方法,就要先掌握它們各自設計的規則和數值范圍,由低級到高級,循序漸進。

       第四部分,是針對 UI 配色方法的總結,我們要做的就是為界面分別確定主色、輔助色、中性色三種色彩類型的不同色值。UI 配色和其它設計專業最大的不同點,在于顯示器顯示彩色光的特性,所以色彩的選用范圍狹小很多,而這三種色彩類型都有非常固定的選擇區間和方法,在書中會有更具體的圖文演示,幫助大家更輕松地學習UI有關的配色知識。

       當然,本書包含的內容并不止上面所說的這四個方面而已,還有包括分辨率的認識、字體設置方法、圖標設計規范、APP項目設計方法等內容,可以極大的豐富大家對 UI 基礎知識的積累。想要進一步了解的同學,可以去了解下。

       最后,如果想要進入到這個行業中,那么可以關注我在虎課網開設的 “零基礎UI實戰班(可點擊報名)”(更多內容,點擊進入“酸梅干超人的主頁)。這門課程是專門針對零基礎和基礎薄弱的設計新人設立的,課程中包含了系統的 UI 初級知識體系,通過大量的案例和經驗分享,帶領大家高效的學習 UI 相關的技巧和知識點,成功實現轉行和職業提升。


    120本精品書籍講解

    虎課讀書,遇見更優秀的自己

    • 為什么要讀書?

      讀書,可以在不經意間治愈困惑;

      讀書,可以不被他人的想法綁架;

      讀書,可以擁有更多選擇的權利;

      讀書,可以遇見更加優秀的自己。

    • 為什么要買虎課讀書VIP?

      性價高!99元一年,每天只需0.27元!

      品質佳!音頻、文稿、思維導圖,帶你思考不停

      一分11选5范圍廣!設計藝術、職場進階、經管營銷等

    • 為什么買虎課讀書VIP?

      任何建議或者想法都可以通過客服反饋給我們,或者搜索微信服務號:虎課讀書,關注后點擊【聯系我們】。我們期待您寶貴的建議~

    我要成為VIP

    00:00
    00:00歷史記錄
    收聽歷史清空列表
      最底部了,木有了,回家休息吧!
      倍數

      3.0x

      2.0x

      1.5x

      1.25x

      1.0x

      0.75x

      好的知識 你值得擁有

      一分11选5成為VIP 立享每年120本精品書籍講解

      成為虎課讀書VIP

      好的知識 你值得擁有

      一分11选5試聽已結束,成為VIP立即解鎖完整版書籍收聽

      解鎖完整書籍

      一分11选5好的知識 值得分享

      一分11选5分享書籍 微信掃一掃二維碼

      特惠
      充值
      7折購
      今日還在繼續學習的你,太棒了!
      7
      折扣券可用于
      年費無限VIP
      立 即
      使 用
      此活動優惠不可與其他活動疊加使用
      有效期:000000
      手機版
      虎課桌面客戶端
      置頂播放器,邊看邊學習
      虎課移動APP
      支持離線緩存,隨時隨地學習
      領福利
      微信掃碼即領2020年全新素材包
      建議意見
      官方客服

      官方客服

      一分11选5您可以與在線客服進行溝通或者撥打客服熱線獲得幫助

      客服熱線:400-862-9191工作日:9:30-18:30

      在線咨詢:聯系客服一分11选5工作日:9:00-22:00

      節假日:9:00-18:00

      虎課積分
      免費學習58000+個教程!
      配套素材、源文件一鍵下載!
      昨日學員已學習了182,752
      并提交了3,358份作業!
      登錄后立即學習!
      loading
      微信掃碼關注即可登錄
      登錄后立即學習!
      手機號
      驗證碼
      立即登錄
      您需要同意協議才可以進行登錄
      已連續簽到0
      第一天
      5個虎課幣
      第二天
      10個虎課幣
      第三天
      15個虎課幣
      第四天
      20個虎課幣
      第五天
      40個虎課幣
      第六天
      20個虎課幣
      第七天
      20個虎課幣
      立即簽到
      已簽到
      每周一重置簽到獎勵
      已連續簽到0
      本周斬獲110個虎課幣,下周也要來哦
      我知道了
      已連續簽到0
      哎呀,簽到失敗了!
      再次簽到
      哎呀,系統出現錯誤,請稍后重試!
      恭喜!簽到成功,獲得 10 個虎課幣
      上上簽 ·21August.2018
      盡管眼下十分艱難,可日后這段經歷說不定就會開花結果
      — 唐代文學家 韓愈
      訓練營堅持完成打卡任務 報名費全額返更多>>
      直播公開課學員好評率95%以上更多>>
      全站58000+課程免費學!昨日已有24296位學員免費領取~點我領取
      分分11选5-Home 体彩快3-推荐 湖南快3-一分11选5 重庆快3-Welcome 上海快3-Home 安徽快3-推荐 福彩快三-一分11选5 北京快3-欢迎您 湖北快3-安全购彩 河北快3-推荐