ui設(shè)計知識點

1、ui學(xué)習(xí)記錄2018-11-19一，設(shè)計必備基礎(chǔ)1. 設(shè)個風(fēng)格，中國風(fēng)，時尚風(fēng)，科技風(fēng)；2. 設(shè)計需要具備的能力；（審美能力和實現(xiàn)能力，（字體，字體大小，配色，版式，板塊大小，讓用戶心情愉悅；更快更有效率的接受信息）用戶體驗的了解，性別，年齡；頁面布局信息的認(rèn)知；溝通理解能力；設(shè)計的界面能否被后期實現(xiàn)，如圖片大小成正比出現(xiàn)；）*設(shè)計規(guī)范，設(shè)計風(fēng)格*3. 項目的整個過程（需求整理，界面設(shè)計，程序開發(fā)，產(chǎn)品上線后期維護）二，網(wǎng)站的分類；1. 門戶站；工作量，工作信息大，用戶比較多；功能單一；注意（嚴(yán)謹(jǐn)對齊，顏色兩種最好，字體最好是系統(tǒng)自帶）2. 平臺站；（注重用戶體驗，產(chǎn)品管理，訂單生成，訂單執(zhí)行

2、，產(chǎn)品量大，顏色暖色調(diào)，功能劃分細(xì)致）3. 品牌站；企業(yè)形象站；品牌形象站；產(chǎn)品形象網(wǎng)站；三.ps基礎(chǔ)黑色：最低調(diào)的奢華；折疊導(dǎo)航；視覺沖擊力；引導(dǎo)用戶：推薦主打款；最新，最經(jīng)典，最吸引客戶的眼球，最優(yōu)惠的活動（忌諱太多讓用戶來選擇）；不管是手機屏幕還是電腦屏幕，只要是屏幕就是72像素；在紙張上面是300像素alt加delete是填充前景色；ctrl+delete是背景色填充；畫布放大縮小ctrl+,ctrl-填充顏色前景alt+delete填充后景色ctrl+delete2018-11-20一.摳圖分類：1. 清晰輪廓，（鋼筆）2. 復(fù)雜輪廓，3. 半透明輪廓工具欄左邊分區(qū)：第一類是選擇類（

3、位圖），第二類是修復(fù)類，第三類為矢量工具組；智能轉(zhuǎn)換對象防止虛圖；2018-12-06視覺效果，交互效果，用戶體驗1網(wǎng)頁設(shè)計，軟件設(shè)計，移動端界面設(shè)計，初級UI設(shè)計師；logo，圖標(biāo)，APP主題，2. 交互設(shè)計算是入行的設(shè)計師，建立與機器的聯(lián)系；了解產(chǎn)品的想法和布局，結(jié)合數(shù)據(jù)制作產(chǎn)品的原型設(shè)計；（原型圖）；3. 用戶體驗；簡稱ue.用戶體驗是指用戶在使用產(chǎn)品過程中的個人主管感受；性能；產(chǎn)品運行是都夠快，是否穩(wěn)定，是否占很多的系統(tǒng)資源等；內(nèi)容：產(chǎn)品的內(nèi)容是否為用戶解決一定的問題，內(nèi)容hi否滿足用戶的需要；交互：產(chǎn)品的交互是否順暢，用戶是否可以無障礙地使用界面；界面：產(chǎn)品的log。,主題、顏色、布

4、局等是否能給用戶統(tǒng)一的整齊的高質(zhì)量的設(shè)計感；了解用戶的需求；了解石油行業(yè)的詳情，了解用戶的操作過程，在了解2018-12-06紅色為運動和石油類的公司和行業(yè)黃色主要為運動類的居多；綠色的主要是食品類為主；藍(lán)色為科技技術(shù)行業(yè)居多；黑色，紫色為女性用品的logo；色彩三要素1. 色相；2. 明度；3. 純度；色彩搭配：1. 單色搭配；一種色相由暗，中，明三種色調(diào)組成。這就是單色搭配；單色上并沒有形成顏色的層次，但形成了明暗的層次；這種搭配再設(shè)計中應(yīng)用時出來的效果永遠(yuǎn)不錯；（優(yōu)劣：對比效果統(tǒng)一，文靜，雅致，含蓄穩(wěn)重，但是易產(chǎn)生單板，單調(diào)的弊端；）2. 近似色搭配；（類比色搭配；為響鈴的顏色做的搭配，

5、擁有共同的顏色；類比色內(nèi)容豐富；優(yōu)劣點是效果感覺柔和、和諧、雅致、文靜，但感覺單調(diào)、模糊、乏味、無力、必須調(diào)解差來增強效果）3. 補色搭配；（也稱對比色搭配；色環(huán)上顏色相對的兩個顏色；近景暖色，遠(yuǎn)景冷色）4. 分裂補色搭配；5. 原色搭配；（除了在兒童的搭配之外就用原色-紅黃藍(lán)顏色搭配）色彩搭配的方法：（顏色有主次之分）1.70%；25%；5%；面積為70%為底色；面積為25%為主色；面積為5%為強調(diào)色；做界面設(shè)計的時候最好是每個部件為一個圖層；2018-12-081. 顏色是擁有配色比例的（主色多用，輔助色少用，用在關(guān)鍵的位置）；2. RGB顏色模式下，你的顏色選區(qū)范圍最好集中早拾色器面板的

6、右上角（不要直接用最左邊的顏色；）3. 檸檬黃，青綠色，青藍(lán)色，紫羅蘭這些顏色都是很亮的顏色，如果需要使用他們作為模塊的背景色，請適當(dāng)?shù)慕档退麄兊娘柡投龋嫉遣灰档偷奶啵?. 漸變色的應(yīng)用，漸變顏色不要使用跳色，可以使用鄰近色（類比色），還可以使用單色（明度飽和度不同）；5. 跳色漸變可以使用；你需要再兩個跳色漸變之間添加他們的一個過渡色；6. 顏色（赤橙黃綠青藍(lán)紫）：它們都是擁有性格屬性的，每種顏色會反映出不同的心理狀態(tài)，所以我們再做設(shè)計的時候。要結(jié)合產(chǎn)品內(nèi)容去選擇顏色的使用；7. 色彩的特征；冷暖，性別，遠(yuǎn)近。輕重，大小，味道；#8.比較酷的軟件：配色神器：形與構(gòu)成；藝術(shù)構(gòu)成，（平

7、面構(gòu)成，色彩構(gòu)成，立體構(gòu)成）；在造型中的視覺形態(tài)可以分為三類；1. 具象形態(tài)（現(xiàn)實形態(tài)）；指生活中的自然形，如山川、動物、植物等；2. 抽象形態(tài)（幾何概念上的形態(tài)，按大小、長短、曲直等分為方形、圓形、不規(guī)則形等；）3. 設(shè)計形態(tài)（具備多元性，具象形態(tài)和抽象形態(tài)的結(jié)合，設(shè)計理念的加入，形式法則的運用，主要作用于內(nèi)容和實際應(yīng)用；）形；1. 圓形：（給人一種活潑、跳躍、靈動的感覺）；2. 方形：（給人一種莊重穩(wěn)定、剛直大氣的感覺主要應(yīng)用到各大企業(yè)占，特別是科技類企業(yè)站；）3. 角形；（尖銳、速度、不穩(wěn)定、刺激的感覺）；4. 曲線形態(tài)：（給人一種柔美，流暢，動感的感覺；）；5. 自然形態(tài)：（給人一種親

8、切隨和、生動的感覺）平面構(gòu)成的基本要素：點、線、面是平面設(shè)計的造型基礎(chǔ)。點、線、面的關(guān)系是在比較中界定的，只有相對意義；點：從幾何學(xué)上說點只有位置，沒有面積。他是線的開端和終點，從造型設(shè)計上說，點是一切形態(tài)的基礎(chǔ)，有形狀，大小，位置之分；點一般被認(rèn)為最小的并且是圓形的，但實際上點的形式多種多樣的，有圓形、方形、三角形、梯形、不規(guī)則型等，自然界中的任何形態(tài)縮小到一定程度都能產(chǎn)生不同形態(tài)的點；當(dāng)單個的點在畫面中的位置不同時產(chǎn)生的心里感受也是不同的，居中會有平靜、集中感；偏上時會有不穩(wěn)定感，形成自上而下的視據(jù)流程；偏下時，畫面會產(chǎn)生暗定的感覺，但是容易被人們忽略。位于畫面三分之二偏上的位置時，最易吸

9、引人們的觀察力和注意力；當(dāng)畫面中有兩個相同的點，并各自有她的位置時，他的張力作用就會表現(xiàn)在鏈接這兩個點的視線上，視覺心理上產(chǎn)生連續(xù)的效果，會產(chǎn)生一條視覺上的直線，當(dāng)時三個點的時候會視覺產(chǎn)生一個三角形的面；這就是一個心里反應(yīng)；當(dāng)點出現(xiàn)若干大小相同的點規(guī)律排列時，畫面就睡顯得很拼問、安靜并產(chǎn)生面的感覺；點在不同的環(huán)境中產(chǎn)生的不同的錯誤的視覺現(xiàn)象；線：從幾何學(xué)上說線只有位置和長度，他是點呃是移動軌跡；從造型上說線有位置、產(chǎn)單獨、寬度、方向、形狀和性格等屬性；線的形態(tài)概括起來有兩大分類：直線和曲線；直線有垂直線、水平線、斜線、折線、平行線、虛線、交叉線。曲線有幾何曲線（弧線、漩渦線、拋物線、圓）、自由

10、曲線；線在版式構(gòu)成中起著非常重要的作用，不同的線有不同的感情性格，線有很強的心理暗示作用；線最善于表現(xiàn)動和靜，直線表現(xiàn)靜，曲折線則有不安定的感覺；直線具有男性的特點，有力度、穩(wěn)定、紙張中的水平線平和，寂靜，詩人聯(lián)想風(fēng)平浪靜的水面、地平線；二垂直線測聯(lián)想到樹、柱子等，有一種忠告的感覺；斜線側(cè)有一種速度感，直線還有粗細(xì)之分，粗有厚重，粗笨的感覺，細(xì)直線有尖銳神經(jīng)質(zhì)的感覺曲線富有女性化的熱癥，具有豐滿、柔軟、優(yōu)雅之感、結(jié)合曲線具有對稱、秩序和規(guī)整的美感，自由曲線是徒手換的一種自然的延伸，自由而富有彈性；面是二維的形，任何點、線擴張后都會變成面；所有點、線的擴散性面積和多元排列，都最終以面的線形態(tài)出現(xiàn)

11、；從幾何學(xué)上說面是線移動的軌跡，從操行上說面是長度，寬度、無厚度，是體的表面，它受線的界定，具有一定的形狀；視覺度：相對于文帝，圖像的要素（插圖、照片等）產(chǎn)生的視覺強度叫做視覺度外觀和影響力月強烈，視覺度就越高，明快的插圖畫給人最強烈的陰險，視覺度就高，一般來說，照片的視覺度比插圖低，特別是云海類的風(fēng)景照片，視覺度就更低；視覺度高的畫面充滿活力、視覺沖擊力強視覺度低的畫面體現(xiàn)處高雅，品味高的感覺；留白；1. 突出主題2. 簡化畫面3. 表達(dá)自信，增強品質(zhì)感；留白，無疑是一劑改善視覺表現(xiàn)的良藥。但是應(yīng)該根據(jù)你所作的產(chǎn)品的市場定位目標(biāo)人群及營銷方案確定留白程度；不是什么產(chǎn)品都要做成高大上；構(gòu)圖構(gòu)圖

12、就是將所要表現(xiàn)主題的各種元素按照主次關(guān)系放置在畫面相應(yīng)的區(qū)域，形成一種視覺感受，從而實現(xiàn)設(shè)計者的表現(xiàn)意圖；構(gòu)圖的視覺表現(xiàn)形式：畫面中主題元素和輔助元素按照一定形式規(guī)則出現(xiàn)就是構(gòu)圖的視覺表現(xiàn)形式；構(gòu)圖的視覺表現(xiàn)形式分為（八大類）；1. 垂直構(gòu)圖形式：能充分的顯示元素的高大和深度，并在具象畫面中常常用于表現(xiàn)森林、參天大樹、險峻的膳食、飛瀉的瀑布、摩天大樓等，主要以豎直線形組成的畫面。在產(chǎn)品設(shè)計方面常用于表現(xiàn)單薄西昌的物體；2. 平衡構(gòu)圖形式：能給人以滿足的感覺，常用于月夜，睡眠、夜景等空間類畫面，在設(shè)計方面常用于地產(chǎn)設(shè)計、環(huán)境設(shè)計等；3. 斜線構(gòu)圖形式：通常表現(xiàn)運動、流動、傾斜、緊張、危險等撐場面

13、，也有用于固定導(dǎo)向的作用。在設(shè)計方面用于表現(xiàn)運動的產(chǎn)品或者細(xì)長的產(chǎn)品（如筆類，牙刷，燈管等設(shè)計特別是海報設(shè)計；）4. 放射線構(gòu)圖形式：以主題為核心，元素呈四周擴散放射的構(gòu)圖形式。長用于需要突出主題而輔助元素又多又復(fù)雜的畫面，在設(shè)計方面適合表現(xiàn)單薄細(xì)長的產(chǎn)品；5. 對角線構(gòu)圖形式：簡單的畫面分割，是畫面兩部分具有較強的沖突和對比感；6. 三角形構(gòu)圖形式：正三角形有安定感、倒三角有不安定的動感效果。具有均衡，靈活的特點。構(gòu)圖時可以以三個視覺中心為產(chǎn)品位置，無論是真三角還是倒三角，可以是正度角也可以時斜度角。斜度角更為常見、較為靈活；7. 框架式構(gòu)圖形式：用產(chǎn)品或者元素的框架做前景，能增加環(huán)面的縱深感（即景深）。在設(shè)計方面把主元素左右或者上下進(jìn)行填充來形成中間空白，空