UI 那些事兒：新手設計師的成長之路

本着對UI設計師工作的好奇，來看了這本書《UI那些事：新手設計師的成長之路》。 我曾學過PS的使用，但找工作的時候，只是懂得告訴別人自己能使用ps進行切圖、修圖，結果就是完全成爲一個工具人，未有機會參與設計和藝術的創造。 讀了這本書結合工作中遇到的設計師，解決了面對產品原型圖無從下手以及如何制定各種理論、原則和規範，讓我對UI設計師這個職業，有了更進一步的認識、知道了如何做一個UI設計師，同時對工作中遇到的UI設計作品有了另外一層理解，理解了他們爲什麼要這樣設計作品。 工具的使用只是爲了將知識、藝術、美感進行表達，因此工具的熟練只是基礎，真正要做的，是對何爲美好、主流價值觀、如何實現美感的理解。 本書介紹了： 一、“移動端組件的認識與運用”​，對入行不久的設計師做一個基礎知識的普及，帶你深入理解常用組件的特性及使用場景，快速降低錯誤使用的概率。 組件包括：搜索、加載、金剛區、表單、評論區、提示框、產品列表佈局、按鈕、標籤、聊天氣泡框、圖片比例、卡片圓角。 不同組件設計的對比，體現了不同的側重點（如搜索的不同類別、加載方式的分類），以及這種設計其表達的思想（圖片比例的表達、金剛區的表現），好的作品是如何表達的（微信聊天氣泡的設計、提示框的使用），都有詳細的闡述。 二、“能力效率提升”​，介紹當我們在日常工作、學習中遇到問題和瓶頸時，可以通過哪些方法來解決。 能力方面 圖標設計流程：第一步，根據產品定位找參考；第二步，總結並確定參考的設計規範；第三步，確定產品的屬性；第四步，提煉參考圖標中的特點；第五步，查找圖標的基本原型（與第一步有所區別的是所找參考爲基本圖形，不需要過多的創新）​；第六步，將上面所總結的特點與最後選定的原型圖標相融合。 效率提升方面：設計規範、適配、高效驗收、 設計規範 設計規範的作用：可以幫助公司統一設計規範、減少開發與設計師的溝通成本。 設計規範的標準：簡單易懂且有指導意義。 規範的確定： 優先確定：設計圖尺寸、間距大小、顏色、圖標（優先制定大模塊尺寸）、按鈕、圖片、導航、卡片。 可日後調整：圖標風格、彈窗樣式。 最後做：空白頁插畫、缺省頁、佔位圖等 組件的選擇：警告框與操作表、標籤欄與工具欄、Tabs與分段控件、Toast與Snackbar 常用軟件：Sketch的使用，實用軟件的使用：在線協同——石墨文檔、圖片管理——Eagle、雲存儲——堅果雲、高保真交互原型——Protopie、動效製作及輸出——AE+Lottie。 三、“設計理論與實踐”​，介紹設計領域實用的理論知識，幫助大家理解優秀設計的內部規律，讓你在展示方案時更具說服力。 情感化設計理論：情感化設計三要素：本能水平的設計、行爲水平的設計、反思水平的設計； 格式塔原理：該原理的核心理論是，人的視覺具有整體化、簡化處理圖形的傾向，因此，當一個不完整的圖形出現在人的視覺當中時，人的視覺思維會傾向於自動將其補全，使其變成一個已知的、完整的、常見的整體圖形，即“完形”​。 巴甫洛夫反應：巴甫洛夫反應是我們在設計中最經常使用的心理學說之一，通過巴甫洛夫反應能夠幫助我們解釋人們爲什麼樂於對日常接收的信息內容做出迅速的反應，它也能指導我們日常的設計工作。 費茨定律：費茨定律是人類運動的預測模型，主要用於人機交互和人體工程學。 五大交互心理學：（1）7±2效應是指人的短期記憶容量在7±2的數量之間浮動，也就是說用戶最多同時處理5～9個信息；同時我們也可以把一些小的單位聯合組成爲熟悉的、較大的單位方便記憶。（2）席克定律的核心意義是人面臨的選擇越多，所要消耗的時間成本越高。（3）萊斯托夫效應指的是相對於普通事物，人們記住獨特事物的可能性更大（4）本能反應實際上是情感設計的一種，指在特定的情境下人們心理上和情感上的反應，而不是單純的美學設計。（5）色彩心理學是一種注重因果關係的心理學說，側重於觀看色彩之後產生的感受，屬於情感設計中的一種。 尼爾森十大可用性原則：狀態可見性原則；環境貼切原則；撤銷重做原則；一致性原則；放錯原則；易取原則；易掃原則：易掃意味着突出重點，弱化和剔除無關信息、容錯原則；人性化幫助原則，幫助性提示最好的方式是：①無需提示；②一次性提示；③常駐提示；④幫助文檔。 擬人形法則：擬人形不僅僅指的是模擬人的外形、動作、語言，還可以模擬人的情感，人對現實世界的感受 黃金比例：優秀的設計可能並不能與設計理論百分百相契合，不必過多追求黃金比例 四、“工作困惑”​，針對設計師在不同工作階段遇到的困惑，分享了建議。結合建議，結合自身的經歷去思考、運用，進一步收穫成長的果實。 包括：做出耐看APP；優化信息層級；提升表單設計的用戶體驗；如何臨摹（遇到不會畫的物品時，也會再回過頭去臨摹，循環往復，最終找到適合自己的風格）；設計稿的自查；準備作品集；新項目開始前的競品分析。 本書作爲一個工具書籍很好的指導小白入門：從移動端APP的基本組件的設計，到對於同類型組件如何選擇，選擇基準是什麼以及不同界面的對比體驗，再到不同的設計其背後的心理學知識，最後幫助一個小白如何設計出一款高吸引力的app和作品集的建立，對設計師能力的從0到1，以及跨域1積累成2都很有指導意義，推薦！！！

《UI設計那些事兒》讀書分享丨一本超實用的設計工具書 文/廖爾摩斯（GZH：設計大偵探） UI中國創始人董景博在本書的推薦序裏面有一段話讓我感同身受。 “當你成爲UI設計師以後，你將會面臨兩大障礙：一，面對產品經理給的原型圖，無從下手，徹徹底底地變成一個美化工作者，導致工作質量和效率一直無法提升，在團隊面前沒有任何話語權；二，面對各種各樣的理論、原則、規範，疑惑到底哪個纔是最重要的？應該如何去把它們跟實踐結合起來？如何去一個個攻破它們？” 當我在讀到這本書的時候，它確確實實解決了我一部分的設計困惑，成爲了我日後在產品設計過程中的一本工具類書籍，而且書中所分享的設計理論，也成爲了我的底層思維。所以這本書，真心希望大家可以購買細讀一下，不管你是初級設計師，還是資深設計師，這都會對你有一定幫助。 一、這本書講了什麼？ 這本書是來自UI中國海鹽社團隊創作，由四個作者根據日常公衆號的精選文章加以精修而成。全書的內容結構比較簡單，總共分爲四個章節。其中第一章和第三章是最重要的，分別介紹了移動端常用的組件和設計基礎理論知識，第二章和第四章以零散的教程爲主，主要提升能力效率和解決工作困惑。 1. 12個常見的移動端組件作者在本書中分享了12個常見的移動端組件，分別是搜索、加載、金剛區、表單、評論區、提示框、產品列表佈局、按鈕、標籤、聊天氣泡、圖片比例和卡片圓角。這12個組件，可以說是產品設計最基礎的元素，但如果你不去總結，你根本就不知道這些組件的優缺點和使用場景。 比如金剛區，作者把8種金剛區最常用的樣式都進行了分類，然後把每一種樣式的優缺點都進行了詳細描述，最後還把使用場景也進行了詳細的說明。這對多數設計師來說，是一次設計基礎知識的普及，你從這本書中可以獲取非常實幹的知識，而這些可能是你過去最忽略的知識點。 再比如表單，作者對錶單常見的元素進行了詳細的介紹，這就像一個設計科普，你可以系統化的認識表單，加深你對錶單的記憶。其次作者還寫了一個“如何提升用戶信息錄入效率”的部分，我覺得非常好，這能幫助讓我們看到一個簡單的表單設計其實需要考慮這麼多細節。我以前在做一個註冊表單非常複雜的SAAS產品中，就有用戶註冊花了30分鐘，在電話的溝通中，我第一次意識到表單的設計有多麼重要。 甚至讓我收穫最大的是產品的列表佈局這個小節。在過去我做設計的時候其實對列表的設計有些隨意，但當我把這一節讀完以後，真的讓我豁然開朗，原來列表的佈局，真的需要遵循很多設計原則。作者列舉了產品設計中最常見的幾種類型，不僅把優缺點都進行了分析，還把應用場景都寫出來，真的非常實用。 這是整本書非常重要的一個部分，雖然看上去一看都懂，但其實需要反覆的閱讀，要去深度思考這些組件的優缺點和適用場景，這樣才能幫助你在設計過程中做出正確的決策，你會發現，你的設計越來越有說服力了，連自己都能感受出爲什麼要選擇圓角，爲什麼要使用兩列網格佈局。 2. 12個設計基礎理論如果你想了解情感化設計，但又感覺唐納德·A·諾曼的《設計心理學：情感化設計》太長，太晦澀，甚至讀不懂，那你看這本書就夠了。整本書把12個最常見的設計基礎理論都做了詳細的介紹，我覺得最棒的一點就是結合實際的案例把每一個設計理論的應用場景都說得很清楚。 比如巴甫洛夫效應，或許我們都聽過，但怎麼應用到設計上，你一定很迷茫。但你讀完以後，你就能理解爲什麼當朋友圈出現小紅點的時候就會驅使你去查看是誰發佈了什麼動態，你也能理解爲什麼很多產品的菜單欄都會設置紅色的數字微標，甚至彈幕、獎勵、抽獎都是運用了這個設計理論。 再比如費茨定律，我相信多數設計師都有聽過或者瞭解過，但這本書最大的優勢就是，教如何使用。甚至作者還舉了一些非常有趣的例子。 “在我剛做設計時，我的總監總說：“這個按鈕應該再大一點”“那兩個按鈕離遠一點”“圖標最好放在這個位置”……那時候我總是不理解爲什麼要這樣做。直到我看到費茨定律才明白，按鈕越大，用戶操作所需時間越短；距離越遠，用戶操作所需時間越長。” 這12個設計基礎理論分別是情感化設計、格式塔原理、巴甫洛夫反應、費茨定律、五大交互心理學（7±2效應、席客定律、萊斯托夫效應、本能反應和色彩心理學）、尼爾森十大可用性原則、擬人性法則和黃金比例，大部分我們都聽過，或者看過，但你可能從未懂得如何使用過。當我把這一章讀完以後，我過去對很多設計的困惑一散而盡，它成爲我最底層的設計思維。 3. 兩個設計進階書單本書在第二章介紹了設計師的能力效率提升，作者主要蒐集了7篇文章，有圖標如何誕生、如何製作設計規範這樣設計技巧，有設計適配、驗收、組件的選擇這種和協作相關的，還有Sketch使用的一些小技巧和實用軟件，以此幫助設計師提升工作效率。大家可以根據自己的興趣選擇閱讀，學以致用。 而在本書最後一章，作者主要針對設計師在工作中常見的困惑進行討論。其中有一篇是關於臨摹的。我想說，臨摹就是最好的學習方法。就像我會建議UI設計師一定不要只侷限於體驗產品，要嘗試去把別人優秀的設計臨摹下來，這樣不僅可以加深鞏固，更能提高工作效率。我做了十年設計，至今也在堅持做臨摹，把那些別人優秀、閃光的點都吸收下來。 二、這本書如何使用？ 1. 一本設計工具書籍《UI設計那些事兒》這本書，完全可以作爲一本UI設計的工具書使用。我們可以按照他的書籍目錄，針對性對每一個組件、知識點進行拓展學習。我們過去在學習的時候其實並不是不能堅持下來，更多時候是缺少一個學習體系，不知道從哪裏入手學習，而這本書所整理的知識點，就能扮演這樣的角色。 2. 一個設計文案詞典這本書有一個很大的優點，那就是把我們日常工作中最常見的設計進行了優缺點的描述，提供了大量描述設計的文案。這些設計文案就像一個文案詞典，它可以用在設計診斷、設計提案，還有作品闡述。比如當你向甲方演示你的設計稿，你完全可以從這本書裏去搜尋那些可以支撐描述作品設計的文案，這樣可以把你的設計翻譯出來，讓甲方感受到你的專業性。 3. 一套底層設計思維這本書對常見的設計理論做了系統性的總結和講解，12個設計基礎理論已經足夠培養你的設計思維能力。你可以進行刻意練習，在地鐵，在公交，在睡前花一小部分的時間把那些常用的設計理論都背下來，反覆閱讀，這樣你會慢慢發現，你對設計的理解就會極速提升，你能突然明白很多設計原理，假以時日，你的設計功底就會大幅度增長。 三、寫在後面的話 阿里巴巴B2B UED負責人汪方進在《U一點·料》中對團隊團隊的使命和任務概括爲：在公司中作爲職能部門（function）的UED團隊，需要站在用戶的角度思辨業務，通過服務內部客戶進而服務我們的最終用戶，用設計專業幫助業務成功，與業務一起成長！ 我在閱讀的過程中，對汪老師的觀點產生了多次共鳴，這也是長久一直困擾我的東西。設計到底應該服務誰，需要遵循什麼設計原則，需要掌握什麼知識結構，甚至，如何像上學那樣有一個階梯式、體系化的學習課程。 當我通過不斷的閱讀，不斷的積累，我在某一天突然發現，我的微信讀書書架其實已經慢慢形成了自己的知識體系。而《UI設計那些事兒》這本書，正是我的底層設計思維裏面的其中一本。這本書真的值得每個UI設計師用心閱讀，你把它當工具也好，當詞典也好，當你在設計過程中有困惑的時候，你只要翻閱，你都能搜索到一些答案，從而幫助解決你的困惑。

本書是海鹽社的文章整理合集，是一本便入門的書籍，非常適合入門UI設計師及產品經理進行閱讀。相信閱讀完後對於移動端的UI設計會有一定的心得。 本書講解了移動端組件的使用、設計能力及效率提升的方法、常見的設計理論以及實踐和UI設計人員在工作中可能遇到的問題解答。其中對於移動端組件的使用的介紹還是挺實用的，學習完後在類似的組件中可以快速根據差別選擇適合的組件。我在讀完第三章對於設計理論與實踐的講解後感覺非常滿足，很多理論都只是聽過或者簡單瞭解過，並沒有文章中介紹的那麼深入。閱讀完後，對於很多常見的設計也找到了理論的支撐，而且也體會到了設計的樂趣。

本書較爲側重在理論和常見問題解答上 （若想看視覺效果設計或軟件技能操作的讀者，就不用花費時間翻閱此書了） 由於自己是剛接觸UI不久、自學的新手，本書的乾貨和論證還是挺詳細實用 特別對於練稿與蒐集資訊的初階段很有指標性，能使你少走漫無目的或過於直覺行事的冤枉路

這本書主要是資深UI設計師的經驗總結，每個設計師娓娓道來，同時又增加了鮮明的圖片，來解釋不同設計理念方法，對我來說淺顯易懂。 其實，這本書跟我以往看的方法書不同的是，它包含了對一些設計原理的講解，這些設計原理可以說是設計的底層邏輯，而恰恰這是我所欠缺的。又比如，後面講到關於如何臨摹作品，之前和作者說的一樣，就是想把真個頁面畫下來，結果是即打擊信心又喪失原圖的細節。但換個角度看，從個別中發現一般對設計能力的提升太重要了。 在往後的職業生涯中，一定要踏踏實實的做好每一個細節，給用戶帶來好的體驗是作爲一名UI設計是的基本要求也是最高要求。

瞭解UI從哪些方面入手的橋樑書 近期學習新東西，做好demo後，要求優化UI，做漂亮一點。對我而言，美化UI有點無頭緒了。 本書是海鹽社整理的的文章合集，給新手瞭解了UI有那些元素，從哪些方面入手，可作爲一本橋樑書。書的結構很好，每章節都會有“畫重點”總結本章的知識，還有提供了延伸閱讀的網址。 但講的不那麼細，如果要深入研究，需要去找其他資料學習。 如下摘了些細節點： 黑黃對比，黑底白字，黃底黑字。 橙紅對比，字體均爲白色。 主題色，強調色，輔助色 阿里巴巴的矢量圖標庫搜索相關的圖標原型 色值、字號、按鈕、圖標、間距 ​ Sketch ​ 黃金比例：0.618 ​ 小元素的圓角角度要小於大元素 ​ 臨摹的重點：先從圖標開始，然後再擴展到佈局、字號、間距等，逐個擊破；

這本書我第一次閱讀是在本校的圖書館借閱來打發日常時間的，其實那個時候是驚歎於這本書的好紙質，讓人一摸就想看完。 再說一下內容，我覺得書裏闡述了很多UI設計的基礎知識，哪個板塊怎麼設計？需要注意的點是什麼？頁面如何排布？爲什麼那麼排布？內容很簡約但也不失乾貨分享（知識擴展就看個人了） 入門的UI設計不妨也可以花點時間去看看。

對於新手設計師來說是一本很不錯的入門教程

《UI那些事（2019年）》這本書是多年前各類文章的的“綜述”，畫了一個多小時速讀完畢，回顧了一下設計的基本功。作爲交互設計師，印象比較深的點有： 1、本書講移動端組件的時候，拎出來的模塊有：搜索、加載、金剛區、表單、評論區、彈窗、產品列表佈局（列表、大圖、兩列網格、三列網格）、按鈕、標籤、聊天界面。這應當是五年前交互設計關注的重點模塊，到今天也大差不差。 對於這些基礎組件，以及基礎組件所對應的現有app界面樣式，設計師需要了然於胸，有一定的範式積累，看到需求文檔就可以在頭腦中快速排版佈局。 畢竟，分工的意義就是希望提升工作流程效率，希望你快速而專業地完成交互設計這個環節。我在範式積累這方面還有些薄弱，最近可以加強一下學習。 2、顏值是產品的敲門磚，視覺效果在產品初期的下載率上會起到決定性作用。

本書框架：App中的組件；設計規範；設計實踐。＂無它，唯手熟爾＂，如果希望在UI設計上有所精進，術：不斷臨摹，練習，思考，閱讀優秀的作品；道：觀察用戶習慣，理解用戶需求。兩者皆不可荒廢。