① UI前端設計怎麼做
UI前端設計做法分析是：
1、UI設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。從字面上看是用戶與界面兩個組成部分，但實際上還包括用戶與界面之間的交互關系。
2、界面設計不是單純的平面設計，需要定位使用者、使用環境、使用方式並且為最終用戶而設計。檢驗一個界面的標准即不是某個項目開發組領導的意見也不是項目成員投票的結果，而是最終用戶的感受。所以界面設計要和用戶研究緊密結合，是一個不斷為最終用戶設計滿意視覺效果的過程。
3、好的UI設計基礎界面要做到能夠吸引人，給人耳目一新的感覺這就要求工作者不僅要具備廣告創意和美工藝術，還要了解心理學，抓住用戶的心理。UI設計裡面最重要的就是交互設計，負責人類與機器之間的交流，這一操作要簡單，便捷，直接有效。通過這一操作從而達到用戶的使用目的，這也是交互設計的目的。
② UI設計規范說明書
高質量的規範文檔是一個優秀設計系統的代表物。我們詳實地描述每個 UI 組件的設計與代碼規范，來幫助設計師高效地作出決策，推動開發速度。編寫高質量的文檔需要前期規劃和一系列合理的流程來輔助，付出的成本相當高。
這個系列由六篇文章組成，致力於描述編寫組件規範文檔的過程。本篇我會從目標讀者、文檔內容、文檔結構開始。然後會涉及案例，設計與代碼指南。這些內容來自於我自己這些年的實踐經驗以及社區里大家所分享的知識。
那麼我以一個問題開始今天的主題：文檔的目標讀者是誰，他們需要什麼樣的內容，作為編寫者我們該怎樣組織文檔結構來作出清晰的表達？
文檔的目標讀者
首先：你要弄清楚誰是你的文檔的主要讀者。
工程師，設計師，還有公司里的所有人！
當一個設計系統包含了代碼指南，工程師們顯然會是讀者。那麼一個只包含了代碼指南的設計系統應該服務於設計師嗎？如果文檔里只包含了設計規范而沒有代碼（如 Material Design），工程師還是讀者嗎？
在我看來，兩個問題的答案都是肯定的。規範文檔是從不同的角度來服務於多種角色的。
除了設計與工程，它還服務於其他人嗎？很有可能，特別是當文檔所在的設計系統已經成為產品的基石時。簡短有效的介紹對於 PM（產品經理） 很有價值，QA（測試） 則比較關注案例部分…等等。
Morningstar Design System 在文檔頁面右側設計了一個兩級的定位導航欄
Takeaway：不論選擇哪種形式，最重要的是在整個系統中保持邏輯一致，符合讀者的預期與心理模型。
展示設計？展示代碼？還是都展示？
把設計和代碼融合，就會有讀者只對其中一個方面感興趣，他們會提出自己的意見：
設計負責人可能會問到：我能把這些代碼案例和指南隱藏掉嘛？
工程師可能會問：我能把這些和設計規范有關的文字隱藏掉嘛？
可以考慮加一個選項或按鈕來允許隱藏設計/代碼內容。比如：
Design Only：把代碼指南、代碼片段和屬性表等等都隱藏起來
Code Only：把視覺樣式指南和文案指南都隱藏，但還是要把一部分交互用法指南保留著，這對工程師們也有用。
③ UI設計的設計內容是什麼
1、圖形設計，軟體產品的「造型」設計。
2、交互設計，主要是軟體操作過程、樹結構、操作規范等的設計，軟體產品在編碼前需要做的是交互設計，並建立交互模型和交互規范。
3、用戶測試／研究，這里所謂的「測試」，旨在測試交互設計的合理性和圖形設計的美感，主要是通過以目標用戶問卷的形式測量用戶界面設計的合理性。
如果沒有這方面的測試研究，用戶界面設計的質量只能由設計師的經驗或領導的審美來判斷，這將給企業帶來很大的風險。
有些公司有非常詳細的用戶界面設計工作，有些需要做一切。比如，淘寶網的藝術家專注於平面設計；游戲行業的用戶界面細分很深，做藝術的人做藝術，做互動的人做互動。一些公司需要在UI上有更多的通用性，甚至在素描交互原型藝術上有一定的前端編碼能力。
(3)前端ui設計說明書擴展閱讀：
界面設計的前身是圖形設計和網頁設計。在原有專業的基礎上，增加了人機交互邏輯、控制應用、組件狀態設計等內容。這是由於互聯網的發展細化了擴展的新范疇，所以軟體應用程序的設計是基本技能。
有必要掌握諸如PS圖象處理軟體（圖像處理）、插圖器（圖形製作）、後效（視頻處理）、AxEube（原型設計）、Dreamweaver（網頁製作）、CordelDRAW（矢量製作）、Flash（動畫製作）、HTML5和DIV+CSS網頁代碼基礎等設計軟體。
學習各種設計軟體的應用是不夠的，目前還不能獨立創作。由於缺乏創作表現技巧，需要熟練掌握鉛筆、水彩筆、素描本、素描板等不同手繪工具的使用。這一部分主要是關於設計思維的訓練和表現，著重研究設計理論和構圖技巧，並學習分析各種圖標的設計原則和表現手法。
④ 說一下前端ui設計是什麼
前端UI設計也是網頁設計的一種，web端設備例如平板電腦等屬於網頁UI，千鋒UI課程講的比較詳細， 你 可以去看看。
⑤ 前端拿到UI設計的圖 如何開始布局設計
前端拿到UI設計的圖 開始布局設計的方法
布局是頁面構成的前提，是後續展開交互和視覺設計的基礎。設計者在選擇布局之前，需要注意以下幾點原則：
明確用戶在此場景中完成的主要任務和需獲取的決策信息。
明確決策信息和操作的優先順序及內容特點，選擇合理布局。
一、常用布局
網站展示頁、Dashboard、列表頁、表格頁、詳情頁、表單頁。在設計前先了解這些模板有助於讓用戶快速找到適合自己產品的頁面布局。
1、網站展示頁
網站展示頁（即官網頁）通常是用戶了解網站或產品的第一步。這類頁面通常會包含產品展示圖，簡短的產品介紹信息，以及用戶登錄入口等。在設計時我們建議：
明確你要傳達的內容，保持簡短而清晰的文案。
搭配清晰、直觀的產品圖片，有助於加深用戶對產品的理解和記憶。
2、控制台頁
控制台頁（Dashboard）集合了大量多樣化的信息（如數字，圖形，文案等），需要一目瞭然地將關鍵信息展示給用戶。因此，如何將龐大復雜的信息精簡清晰地展示出來，是設計此類頁面的關鍵。在設計時要注意以下幾點：
按照信息的重要程度來組織頁面排版，突出展示關鍵信息。
將數據可視化，讓用戶可以直觀地了解關鍵信息及整體情況。
合理地使用顏色及柵格排版，減輕用戶的視覺負擔。
3、列表頁
列表設計是並列式展現信息，方便用戶能快速查看基本信息及操作。因此，信息的「可閱讀性」及「可操作性」是設計的關鍵。在設計時要注意以下幾點：
根據用戶需求來定義信息展示的等級，僅展示關鍵信息及操作。
當信息內容較為復雜時，可將次要的信息折疊或放到詳情頁面中，以遞進的方式讓用戶獲得更多的信息。
4、表格頁
表格作為多維信息展示的載體，使復雜的信息更易於閱讀與理解。它的易讀性，便捷性，易操作性對產品的體驗起著舉足輕重的作用。因此，我們在設計時要注意以下幾點：
構造清晰的表格布局，有利於提升讀者對信息的接收速度和理解程度。
更多地展示用戶所必須的信息，通過視覺上的調優突出展示重點信息。
當界面需要在一個很大的多縱行表格中展示數據，或每一橫列數據有多行信息時，可以巧妙地運用橫向或縱向斑馬條，使得信息條目之間更為分明，視覺上更易區分。
5、詳情頁
詳情頁面一般會承載大量的基本信息，擴展信息，或者狀態信息。對於信息效率和優先順序判定的要求會比較高。清晰的布局能幫助快速看到關鍵信息，提高決策效率。這設計時有以下幾點需要注意：
清晰的排版格式，易於閱讀的文本大小及間距，都是影響用戶獲取信息效率的關鍵因素。
圖文搭配比單文本展示信息能更好地提高用戶的理解。
6、表單頁
表單頁通常用來執行登錄、注冊、預定、下單、評論等任務，是產品中數據錄入必不可少的頁面模式。因此，舒適的表單設計，可以引導用戶高效地完成表單背後的工作流程：
考慮用戶的瀏覽方式，提供清晰的用戶視線瀏覽路徑；
內容是表單的核心，保證表單的內容精簡（盡量避免多餘的輸入項）；
標簽的命名要易於用戶閱讀和理解，避免模糊的描述給用戶造成困擾；
醒目的提交或完成按鈕，放在用戶的瀏覽線的終點更有利於用戶的完成操作。
二、柵格
我們通過定義網格、間距來呈現產品布局的最佳效果，設計師在設計時可按（移動：『頁面總寬 750px，內容區 750px』，PC：『頁面總寬 1440px，內容區 1208px』）來設定，並在此基礎上以 12等分的柵格來劃分整個設計建議區域。
建議橫向排列的區塊數量最多四個，最少一個，以保證視覺層面的舒適感。
註：圖中灰色部分為柵格的列，定義為『Column』，白色部分為柵格的間隔，定義為『Gutter』。
柵格公式：
我們為頁面中柵格的 Gutter 設定了定值，即瀏覽器在一定范圍擴大或縮小，柵格的 Column 寬度會隨之擴大或縮小，但 Gutter 的寬度值固定不變。
網站展示頁和 Dashboard 的 Gutter 寬度為 24px。
列表、表格、詳情和表單頁面的 Gutter 寬度為 16px。
⑥ 前端和UI設計有什麼區別
兩個工作崗位不同，要求的技術側重點也不同，類比建築來說，UI相當於設計圖紙的，前端是實現圖紙
UI設計：用PS把網頁設計出來，切html靜態頁面，前端把按照設計，利用HTML、CSS、javascript把圖片上的內容製作成HTML頁面。
前端：需要掌握HTML、CSS、javascript 這三種技能，實現靜態界面的動態html。
⑦ UI前端設計是什麼怎麼做
UI 設計(或稱界面設計)是指對軟體的人機交互、操作邏輯、界面美觀的整體設計，也叫界面設計。UI 設計分為實體 UI 和虛擬UI，互聯網說的 UI 設計是虛擬 UI, UI 即User Interface(用戶界面)的簡稱。
UI 設計師的職能大體包括三方面:一是圖形設計，軟體產品的產品「外形」設計。二是交互設計，主要在於設計軟體的操作流程、樹狀結構、操作規范等。三是用戶測試/研究，這里所謂的「測試」，其目標恰在於測試交互設計的合理性及圖形設計的美觀性，主要通過以目標用戶問卷的形式衡量 UI 設計的合理性。
UI設計目前的前景還是很不錯的，很多企業都缺少 UI 設計師。而且可以看到的是，現在社會的發展，更多的智能機和智能機器人研發出現，這些都離不開UI 設計師。所以說 UI 設計的是很有前途的，是不會失業的。而且 UI 設計門檻不高，要入門也不難的。
從工作內容來說，UI設計在當前的互聯網領域、科技領域可以說無處不在，
好的 UI 設計能夠明顯提升用戶的使用體驗,從而給產品帶來更多的附加值,所以UI 設計對於互聯網產品是非常重要的。目前 UI 設計通常分為兩個大的工作方向，一個是交互設計,另一個是視覺設計。
總的來說，UI 設計相比較於編程而言，還是非常適合大眾學的並且就業前景很廣闊。學完 UI 設計，能獲得一份穩定而又不失樂趣的工作，同時有利於追求更高品質的生活，在藝術領域可以獲得更多的啟迪。
⑧ UI設計前端主要學些什麼
UI設計不一定需要精通前端，但是如果UI設計了解前端可以減少和開發人員溝通的技術成本，讓團隊協作更加高效。那UI設計如何學習前端，需要學習到什麼程度呢？
我們分享一個前端教程-網頁鏈接，這裡面詳細講解了UI設計中的Web前端設計規則及工具，可以幫助大家深入理解Web前端UI設計方法。
1、HTLM基礎認知DIV框架及CSS樣式
首先要了解HTLM基礎、CIV框架以及CSS樣式， HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網路上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。DIV元素是用來為HTLM文檔內大塊的內容提供結構和背景的元素。 CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。CSS 能夠對網頁中元素位置的排版進行像素級精確控制，支持幾乎所有的字體字型大小樣式，擁有對網頁對象和模型樣式編輯的能力。
2、浮動原理、Margin認知
Margin，是CSS的語法，這個簡寫屬性用於在一個聲明中設置所有當前或者指定元素所有外邊距的寬度，或者設置各邊上外邊距的寬度。
3、框架應用搭建
框架很多，在這個教程中選擇一個主流框架帶大家看看前端框架如何搭建。
4、插入圖片、文字標簽和版頭、導航欄
編寫的網頁中插入圖片，可以使瀏覽網頁的用戶得到更好的體驗效果。在這一部分會講解插入圖片、文字標簽以及版頭和導航欄如何實現。
5、Banner塊插入、內容文字排版、內聯元素、A標簽和Banner鏈接定位
Banner是網路廣告最早採用的形式，也是目前最常見的形式。它是橫跨於網頁上的矩形公告牌，當用戶點擊這些橫幅的時候，通常可以鏈接到廣告主的網頁。而網頁中的文字內容排版也直接影響著網頁的美觀以及網頁的用戶體驗。
6、錨點標簽、超鏈接標簽、固定定位和絕對定位、相對定位
<a> 標簽用於定義超鏈接，用於從一張頁面鏈接到另一張頁面。用於設置錨點，用於頁面定位。
7、導航二級菜單顯示隱藏
很多網頁中的二級菜單欄不直接顯示，需要滑鼠移動到一級菜單或者點擊一級菜單才會展開顯示二級菜單。
8、input表單
input表單可以獲取用戶的信息，做出對應的動作，教程中直觀的展示input表單的應用方法。
其實以上教程只是web前端很小的一部分，UI設計如果能夠了解前端知識，在設計中可以更好的考慮實現問題，也能夠更好的和開發人員交流，也能夠提高團隊協作的效率，加速項目的進度。
⑨ 前端、UI設計這些到底都是做什麼的呀
前端和UI設計這兩個技術具體有什麼區別，還有很多小夥伴不是很了解。下面小編給大家講講前端和UI設計的聯系和區別有哪些
一般來講前端包括網站的表現層和結構層。表現層即前端設計，通俗一點就是Web端展現出來的你可以看到的「美」的東西；結構層就是涉及的前端開發部分，即網站的前台代碼實現。
UI設計是指對軟體的人機交互、操作邏輯、界面美觀的整體設計。通常包括平面設計，網頁設計以及移動界面設計。
前端開發與UI設計之間是相通的。優秀的前端開發人員，不僅要精通前端語言，還要懂一些設計知識以及後端編程。而優秀的UI設計師不僅要會設計，還要懂代碼，能在設計的道路上加上程序員的思維。
⑩ UI設計是學什麼的啊
UI設計的前身是平面、網頁設計，在原專業的基礎上加入了一些人機交互的邏輯、控制項的應用、組件的狀態設計等內容。這是由於互聯網發展的精細化延伸出來的新門類，因此設計的軟體應用就是基本功了。需要掌握Photoshop（圖像處理）、illustrator（圖形製作）、After Effects（視頻處理）、Axure（原型設計）、Dreamweaver（網頁製作）、Coreldraw（矢量製作）、Flash（動畫製作）等設計軟體及HTML5.0和DIV+CSS網頁代碼基礎。
學會了各類設計軟體的應用還不夠，此時還不能獨立創作，因為缺乏創意的表現技能，所以需要掌握鉛筆、水彩筆、素描本、手繪板等不同手繪工具的熟練運用。此部分主要是設計思維的訓練及表現，重在設計理論的學習與構圖技巧，學會解析各類圖標的設計原理及表現技法。