『壹』 前端拿到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框架排名
在前端項目開發過程中，現在很少有人會使用原生的CSS來搭建頁面，總歸都會引入一些前端UI框架以減少代碼的書寫。一般為了方便自己的使用，很多大公司都有自己的一套UI框架，同時也會把其開源出來。下面就是最近經常使用並且很流行的一些前端UI框架，總有一款適合你：
Mint UI
Flutter
Flutter 是谷歌的移動端 UI 框架，可在極短的時間內構建 Android 和 iOS 上高質量的原生級應用。 Flutter 可與現有代碼一起工作, 它被世界各地的開發者和組織使用, 並且 Flutter 是免費和開源的.
ionic
Ionic既是一個CSS框架也是一個Javascript UI庫,Ionic 是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程序，它 提供了很多 UI 組件來幫助開發者開發強大的應用。 它使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定，使用它成為 Web 和移動開發者的共同選擇。
『叄』 前端ui框架的區別有哪些
前端ui框架的區別有哪些？在各種前端UI框架的差異中，M模型模型;V視圖視圖;VM視圖的模型視圖;P主持人節目主持人;C控制器控制器;W不管;讓我們先看看MVVM。其餘的並不重要。VM屬於模型和視圖的連接器，並與之分離。每個部分負責不同的內容，為長遠發展打下良好的基礎。這種觀點很容易理解。它是HTML、CSS和JS代碼，而且它在前端與HTML和CSS相關。例如:寫表單，開始用HTML架構，CSS美化，JS動畫控制。模型模型。簡而言之，它是伺服器與業務邏輯之間連接的形成。其中許多都需要非同步處理和獨立更新。因此，它必須與視圖分開。
前端ui框架的區別有哪些？與前端UI框架相比，兩者之間的連接是視圖模式視圖模型。這只是一個連接，而不是控制項。確保獨立。在多視圖、多模式之前，它是一個很好的橋梁。P在顯示和部分控制中起著較大的作用。換句話說，後面在NG中顯示的很多角度都可以理解為PC master，比如讀取M數據，然後在v-View中插入一個模塊。如果用角度進行解釋，則控制器為c。因此，綁定V和M會導致後期開發困難。W沒有那麼具體。更加靈活。由於我們使用了大量的框架和庫，由於一些函數被迫分離，開發過程很慢。
以上便是關於前端ui框架的區別介紹了，希望它能幫助我們開拓，並確定屬於我們自己的ui框架，這一點非常重要。如果您想了解更多關於ui設計的相關設計技巧及素材等，也可以點擊本站其他文章進行學習。
『肆』 做前端ui的javascript框架里 哪個最強大也比較容易上手
ExtJs比較大，也比較復雜，用在商業用途的比較多吧。
jQueryUI比較小，性能也不錯，很多網站都是用它來做的。
『伍』 前端開發框架有哪些
前端框架好不好用還是要看具體情況分析，我這里給你推薦幾個常用的框架，可以按需使用。
1、vue-element-admin
一個基於vue2.0和Element的控制面板UI框架，這是使用vue技術棧開發的前端程序員的首選管理系統模板，模板已經非常成熟了，並且有相關的社區和維護人員，開發時候遇到問題也不要慌。
2、AdminLTE
非常流行的基於Bootstrap 3.x的免費的後台UI框架，這是一個非常老牌的後台管理系統模板，每個頁面都是單獨的html網頁，適合前端入門新手用來做項目。
3、ant-design-pro
這個就不多說了，選擇react技術棧的童鞋們必然離不開這個優秀開箱即用的中台前端/設計解決方案，文檔齊全，組件豐富，一鍵生成模板，更支持開啟復制粘貼模式哦。
4、ng2-admin
這是基於Angular 2、Bootstrap 4和webpack的後台管理面板框架，要收前面已經有了React和vue技術棧的模板，那怎麼能少了ng的？雖然在國外用的比較多，國內較少使用，但絲毫不影響ng作為前端框架三巨頭之一的地位。
9：material-dashboard
基於 Bootstrap 4 和 Material 風格的控制面板。Material Dashboard 是一個開源的 Material
Bootstrap Admin，其設計靈感來自谷歌的 Material Design 。
10：d2-admin
D2Admin 是一個完全 開源免費 的企業中後台產品前端集成方案，基於 vue.js 和 ElementUI 的管理系統前端解決方案 ，小於 60kb的本地首屏 js 載入,已經做好大部分項目前期准備工作
11：vuestic-admin
vuestic-admin管理台儀表盤是一個響應式的儀表盤模板，採用Bootstrap4和Vue.js構建。這個精美的管理台模板提供了自定義元素組件，如地圖，聊天，個人資料卡，圖標，進度條等，以及用於登錄和注冊的預建頁面。
『陸』 移動webapp前端ui用哪個框架好
WeUI
WeUI是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信 Web 開發量身設計，可以令用戶的使用感知更加統一。包含button、cell、dialog、 progress, toast、article、icon等各式元素。
Frozen UI
Frozen UI是騰訊社交用戶體驗設計 － 增值UI開發團隊一個開源的簡單易用，輕量快捷的移動端UI框架。基於手Q樣式規范，選取最常用的組件，
做成手Q公用離線包減少請求，升級方式友好，文檔完善，目前全面應用在騰訊手Q增值業務中。
FrozenUI提供的CSS組件是目前QQ會員前端開發組所用的通用樣式庫。遵循手Q樣式規范，基本樣式使用離線包的方式減少請求，並提供快速接入的方案。
FrozenUI提供的一系列JavaScript插件，更優雅地在移動端上呈現更靈動的動畫效果。
FrozenJS 是針對移動端開發的 js 組件庫，其依賴 zepto.js 和 FronzenUI。
FrozenJS 的所有組件均以 zepto 的插件的形式存在。
阿里開源的SUI Mobile
SUI Mobile
SUI Mobile 是一套基於 Framework7 開發的UI庫。並參考 Ratchet、Fastclick 開源庫。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，並且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發跨平台Web App。
輕量的UI庫 SUI Mobile 非常輕量，核心庫壓縮Gzip後的JS、CSS網路傳輸體積總共只有52K，卻提供了20+個常用的組件。
對於只有HTML&CSS的組件，你只需要復制HTML代碼既可以使用。他的大部分JS組件都是獨立的 Zepto 插件，並且提供了Zepto/jQuery 風格的API，你將會非常熟悉這種方式。
開發團隊：阿里巴巴共享業務事業部UED團隊
網路系
GMU
GMU是基於zepto的mobile UI組件庫，提供webapp、pad端簡單易用的UI組件!
Jingle
Jingle是一個SPA(Single Page Application)開發框架，用來開發移動端的html5應用，在體驗上盡量去靠近native應用，希望有一天html5能夠做到與native一樣的操作體驗。
豐富的UI組件提供了按鈕、列表、表單、彈出框、輪換、上拉/下拉、日歷等各種移動端常用的組件，簡單適用，
前後端分離支持前端模板渲染，模板按需自動載入，完善的事件機制。
輕量級基於Zepto開發，依賴了iscrol
purecss
purecss採用其Grid的部分即可，需要定製的部分，建議自行配置，或者是直接採用grid.css，grid960.css這樣的柵格來處理。Purecss小的沒有節操，全部模塊gzip壓縮後才 4.4KB* 。 考慮到移動端，保持文件盡量小對我們來說非常重要，每一行CSS都經過深思。如果你只用部分模塊，簡直小的忽略。
Pure基石,Pure基於Normalize.css添加了HTML元素的布局和樣式，以及常用的UI組件。全是精華，木有糟粕。
移動端是初衷,Pure是響應式的盒子模型，適應所有尺寸的屏幕。通過皮膚生成器可以自定義樣式。
寫出你自己的樣式,Pure提供最基礎的樣式，鼓勵你基於此寫出自己的樣式。它被設計為容易覆寫，且不影響你自己的樣式。
ionic
基於angular2，豐富的UI組件，大大改進的編程模型，非常適合快速開發。
jquery mobile
jQuery Mobile 是創建移動 web 應用程序的框架。
jQuery Mobile 適用於所有流行的智能手機和平板電腦。
jQuery Mobile 使用 HTML5 和 CSS3 通過盡可能少的腳本對頁面進行布局。
Bootstrap
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式布局、移動設備優先的 WEB 項目。
wex5
國產的ui，支持打包。
前端UI：完全恪守html5+css3+js，干凈純潔設備api：採用業界主流Phonegap/Cordova
向導、模板：簡單定義，即可輕松製作向導和模板
主題、樣式：海量bootstrap資源引入和定製
UI組件：純H5+CSS3，輕松引入第三方UI組件
插件：輕松對接即時通訊、推送、支付等各類插件
後端：輕松調用後端組件和api，並實現可視化
『柒』 有哪些風格獨特的前端UI框架
推薦幾個精緻的web UI框架及常用的前端UI框架：
1、AliceUI
AliceUI是支付寶的樣式解決方案，是一套精選的基於spm生態圈的樣式模塊集合，是Arale的子集，也是一套模塊化的樣式明明和組織規范，是寫CSS得更好方式。
2、Amaze UI
Amaze UI是一個輕量級、Mobile first的前端框架，基於開源社區流行前端框架編寫的。
3、SUI
SUI是一套基於Bootstrap開發的前端組件庫，同時也是一套設計規范。
通過SUI，可以非常方便的設計和實現精美的頁面。
同時SUI還有移動版本的msui，msui是阿里巴巴共享業務事業部UED團隊的作品。目前是為了手機H5頁面提供一個常用的組件庫，減少重復工作。
8.layui
Layui 誕生於2016年金秋，是一款帶著濃烈情懷的國產前端UI框架，她追求極簡，又不失豐盈的內在，說她是史上最輕量的結晶，似乎並不為過。一切都源自於她對原生態的執著，對前端社區的那些噪雜聲音的過濾，以及她本身的精心雕琢。
9.YDUI Touch
YDUI Touch 專為移動端打造，在技術實現、交互設計上兼容主流移動設備，保證代碼輕、性能高;使用 Flex 技術，靈活自如地對齊、收縮、擴展元素，輕松搞定移動頁面布局;實現強大的屏幕適配布局，等比例適配所有屏幕。什麼？用得不開心？輕松切換 px;自定義Javascript組件、Less文件、Less變數，定製一份屬於自己的YDUI;
10、後台UI開發框架 MuseUI
一款基於bootstrap風格，兼容於主流瀏覽器（包括IE6）的後端UI開發組件。
『捌』 ui前端與web前端的區別是什麼
WEB前端傾向於代碼編寫和兼容性以及布局設計還有前端代碼框架html,css,js,xml等技術。
『玖』 前端常用的框架有哪些
web前端的主流框架，下面，我具體給你介紹一下：
1、Angular：Angular是一款優秀的前端JS框架，Angular有著諸多特性，最為核心的是MVW（Model-View-Whatever）、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等等。Angular是一個比較完善的前端框架，包含服務，模板，數據雙向綁定，模塊化，路由，過濾器，依賴注入等所有功能，在自定義指令後可以在項目中多次使用。
2、React：React可以非常輕松地創建用戶交互界面。為你應用的每一個狀態設計簡潔的視圖，在數據改變時React也可以高效地更新渲染界面。React為你程序編寫獨立的模塊化UI組件，這樣當某個或某些組件出現問題是，可以方便地進行隔離。
3、Vue：近幾年最火的前端框架當屬Vue.js了，Vue.js是一個構建數據驅動的Web界面的漸進式框架。Vue.js的目標是通過盡可能簡單的API實現響應的數據綁定和組合的視圖組件。Vue對模塊很友好，可以通過NPM、Bower或Duo安裝，不強迫你所有的代碼都遵循Angular的各種規定，使用場景更加靈活。
以上三個就是我給你介紹的關於web前端主流的框架，希望我的回答對你有所幫助