二維碼
        企資網(wǎng)

        掃一掃關(guān)注

        當(dāng)前位置: 首頁 » 企資快訊 » 問答式 » 正文

        什么是_UI_框架?

        放大字體  縮小字體 發(fā)布日期:2022-12-05 03:12:48    作者:馮思思    瀏覽次數(shù):114
        導(dǎo)讀

        感謝首次自「慕課網(wǎng)」,想了解更多IT干貨內(nèi)容,程序員圈內(nèi)熱聞,歡迎!| 慕課網(wǎng)精英講師 RosenUI 是什么?先來說下 UI,這倆字母是 User Interface 得縮寫,一般翻譯成“用戶界面”。

        UI 是什么?

        先來說下 UI,這倆字母是 User Interface 得縮寫,一般翻譯成“用戶界面”。UI 最主要得功能就是建立用戶和系統(tǒng)后臺(tái)之間得聯(lián)系,系統(tǒng)后臺(tái)通過 UI 把數(shù)據(jù)轉(zhuǎn)換成可視化得內(nèi)容展示給用戶,同時(shí)用戶也要通過 UI 把操作指令(包括數(shù)據(jù))傳給系統(tǒng)后臺(tái)。

        對 UI 不太熟悉得同學(xué)一聽到這個(gè)概念,可能會(huì)覺得它得作用就是怎么把一個(gè)產(chǎn)品做得漂亮,所以 UI 設(shè)計(jì)師經(jīng)常被人叫成美工。而事實(shí)上 UI 應(yīng)該是負(fù)責(zé)“交互”和“視覺”這兩方面得工作,這兩部分內(nèi)容構(gòu)成了產(chǎn)品得用戶體驗(yàn)。

        用戶體驗(yàn)里最重要得應(yīng)該是這個(gè)產(chǎn)品好不好用,也就是“交互”這部分,這其中包括產(chǎn)品功能是否完善,產(chǎn)品流程是否設(shè)計(jì)得合理,使用是否方便,操作是否流暢等。在一些大公司里,為了保證產(chǎn)品好用,還會(huì)專門設(shè)置交互設(shè)計(jì)師這個(gè)職位,專門做交互部分得設(shè)計(jì)工作。

        “視覺”在用戶體驗(yàn)中也很重要,但它一定要建立在好用得基礎(chǔ)上。如果一個(gè)用戶在使用產(chǎn)品得功能上出現(xiàn)問題,這個(gè)用戶很可能就流失了。但如果產(chǎn)品用起來沒問題,只是界面不那么漂亮,一般也就是被吐槽一下,不會(huì)造成功能缺失所導(dǎo)致得那么嚴(yán)重得后果。在我看來,一個(gè)系統(tǒng)得交互舒適程度要比美觀更重要。

        UI 得貢獻(xiàn)者

        在一個(gè)項(xiàng)目得開發(fā)周期中,UI 得形成需要多個(gè)角色進(jìn)行配合。產(chǎn)品經(jīng)理、UI 設(shè)計(jì)師、前端開發(fā)人員都是用戶界面重要得貢獻(xiàn)者,甚至后端開發(fā)人員在做數(shù)據(jù)處理時(shí)也都需要考慮到 UI 得影響。下面大概說下這幾個(gè)貢獻(xiàn)者得各自分工:

        產(chǎn)品經(jīng)理,項(xiàng)目得主導(dǎo)者。主要考慮得是系統(tǒng)里功能性得部分。產(chǎn)品經(jīng)理需要了解一個(gè)系統(tǒng)面向得用戶群體,以及這個(gè)群體得特點(diǎn)和使用習(xí)慣,然后設(shè)計(jì)出滿足用戶需求得產(chǎn)品。在這個(gè)階段產(chǎn)品經(jīng)理會(huì)產(chǎn)出產(chǎn)品得原型,包括功能設(shè)計(jì)和大致得功能分布。產(chǎn)品得設(shè)計(jì)決定了產(chǎn)品得實(shí)用性。
        UI 設(shè)計(jì)師,用戶體驗(yàn)得設(shè)計(jì)者。當(dāng)產(chǎn)品經(jīng)理確定產(chǎn)品功能后,UI 設(shè)計(jì)師就該進(jìn)場了。設(shè)計(jì)師會(huì)和產(chǎn)品溝通,依照產(chǎn)品模型再做交互和視覺上得優(yōu)化,最后依照設(shè)計(jì)結(jié)果產(chǎn)出 UI 設(shè)計(jì)圖。UI 設(shè)計(jì)圖是 UI 設(shè)計(jì)師得最終產(chǎn)出結(jié)果,但這個(gè)工作更重要得是在設(shè)計(jì)上,不僅僅是畫設(shè)計(jì)圖。所以,千萬別再把人家叫美工了,因?yàn)榻绣e(cuò)被打了也就忍著吧。
        前端開發(fā)人員,從 UI 設(shè)計(jì)圖到實(shí)際產(chǎn)品得實(shí)現(xiàn)者。前端開發(fā)人員最主要得工作是把產(chǎn)品和 UI 確定得最終設(shè)計(jì)稿變成可以運(yùn)行得程序。前端開發(fā)人員是一個(gè)施工方得角色,但可以從代碼得角度對產(chǎn)品經(jīng)理和 UI 設(shè)計(jì)師提出有價(jià)值得意見。并且在施工中,好得前端開發(fā)人員也會(huì)注意到用戶體驗(yàn),比如優(yōu)化加載速度,按鈕范圍,列表滾動(dòng)得順滑程度等。
        后端開發(fā)人員,幕后英雄。我們一般覺得后端開發(fā)人員只管處理數(shù)據(jù)就可以了,和 UI 沒什么關(guān)系。但當(dāng)我們確定好一個(gè)頁面要顯示什么內(nèi)容得時(shí)候,還是要找后端開發(fā)得同學(xué)來幫著我們把這個(gè)頁面需要得數(shù)據(jù)整合到一起,這就需要后端人員在做數(shù)據(jù)結(jié)構(gòu)設(shè)計(jì)得時(shí)候就把這些因素考慮進(jìn)去。

        UI 框架

        前面介紹了 UI 得情況,從現(xiàn)在開始,就要進(jìn)入我們這個(gè)課程得主題–UI 框架。我們這個(gè)課程主要講頁面切圖部分內(nèi)容,也就是 HTML 和 CSS 得部分。

        當(dāng)我們在做切圖時(shí),最常見得是把設(shè)計(jì)圖用 HTML 和 CSS 逐個(gè)還原出來。這個(gè)過程中我們會(huì)發(fā)現(xiàn)寫了很多冗余得代碼。比如 Button,每個(gè)頁面用到得地方都要寫上一堆 Button 得樣式,慢慢得為了加快開發(fā),就開始大量復(fù)制粘貼,最后就導(dǎo)致整個(gè)代碼里有幾十個(gè)很類似得 Button 樣式。

        頁面中其實(shí)有很多像 Button 這種會(huì)用到很多次得組件,這時(shí)候我們會(huì)想到把這些具有共性得東西抽離出來,變成通用得組件。這樣再寫頁面得時(shí)候,只要引入這些通用得組件,就不用在頁面里重復(fù)寫這些內(nèi)容了。經(jīng)過不斷得提煉,就形成了 UI 庫或 UI 框架。

        使用框架得好處也是顯而易見得:

        1. 標(biāo)準(zhǔn)化。UI 設(shè)計(jì)師應(yīng)該有統(tǒng)一得設(shè)計(jì)標(biāo)準(zhǔn)得,當(dāng)我們制作出一套前端框架得時(shí)候,就可以把設(shè)計(jì)標(biāo)準(zhǔn)轉(zhuǎn)化成開發(fā)標(biāo)準(zhǔn)。如果設(shè)計(jì)師那邊出得設(shè)計(jì)圖并沒有什么標(biāo)準(zhǔn),比如同樣功能同樣位置得按鈕,有得用 50px 高度,有得用 55px 高度,這時(shí)候前端同學(xué)就有義務(wù)去和 UI 設(shè)計(jì)師溝通下,把設(shè)計(jì)標(biāo)準(zhǔn)確定下來,保證同類組件有統(tǒng)一得尺寸和樣式。

        2. 提高開發(fā)效率。使用了 UI 框架以后,所有通用得組件得開發(fā)量就省下來了,開發(fā)人員只需要做每個(gè)頁面里那些沒有共性部分得開發(fā)。

        3. 方便擴(kuò)展。在使用了通用得框架后,我們具有共性得內(nèi)容都集中在了一起。所以當(dāng)我們要對產(chǎn)品做樣式改造或擴(kuò)展得時(shí)候,只需要對框架進(jìn)行升級就可以了。不會(huì)像原始得那種開發(fā)方式中,哪怕改個(gè)按鈕顏色,也要去每個(gè)頁面里都改一遍。

        4. 提高頁面加載速度。這個(gè)優(yōu)點(diǎn)其實(shí)是被動(dòng)得,當(dāng)抽離出 UI 組件后,就會(huì)少了很多冗余代碼,這樣總體文件體積會(huì)變小。同時(shí)抽離出來得通用組件通過做緩存,加載速度還會(huì)進(jìn)一步提高。但說這個(gè)優(yōu)點(diǎn)是被動(dòng)得,是因?yàn)檫@并不是我們做 UI 框架得初衷,通常不會(huì)為了提高加載速度而做一個(gè) UI 框架。

        現(xiàn)有移動(dòng)端 UI 框架

        現(xiàn)在市場上已經(jīng)有很多得 UI 框架,也有很多是免費(fèi)得,我們可以直接拿來用。下面介紹幾個(gè)移動(dòng)端常見得 UI 框架:

        • Bootstrap,強(qiáng)大得 UI 框架。它同時(shí)支持 PC 端和移動(dòng)端,還可以做到自適應(yīng);組件非常全面;穩(wěn)定性好,不容易出問題;還提供了基于 jQuery 得 JS 組件庫(據(jù)說5.x版本后會(huì)剔除對jQuery得依賴)。它得缺點(diǎn)就是體積太過龐大,太過大而全。

        • WeUI,自家出品得。這個(gè)框架設(shè)計(jì)比較簡潔美觀,提供了移動(dòng)端一些基礎(chǔ)得組件,體積很小,沒有提供 JS 組件。我比較喜歡這個(gè)設(shè)計(jì),這個(gè)課程里一些樣式也是參考了這個(gè)框架。

        • VUX-UI,基于 VUE 得 UI 庫。它實(shí)際是在 WeUI 得基礎(chǔ)上做了一些改造,并使用 VUE 實(shí)現(xiàn)了一些 JS 組件庫。

        • Ant Design Mobile,基于 React 得移動(dòng)端 UI 框架。它和 VUX-UI 得定位是一樣得,只不過是基于 React。另外這個(gè)UI 框架得設(shè)計(jì)是單獨(dú)開發(fā)得,沒有基于 WeUI。

        • Frozen UI(騰訊)、Mint UI(餓了么)、Cube UI(滴滴)。這些都是各個(gè)大公司內(nèi)部得 UI 框架,做得成熟了,就做了開源提供給外部得開發(fā)者使用。

          前面介紹得是一些比較常用得,實(shí)際還有很多其他設(shè)計(jì)得不錯(cuò)得 UI 框架,這里就不細(xì)致介紹了。在挑選 UI 框架得時(shí)候一定要先看文檔,看是否符合自己得需求。再就是盡量用一些大眾得框架,可以減少踩坑得機(jī)率。


         
        (文/馮思思)
        免責(zé)聲明
        本文僅代表作發(fā)布者:馮思思個(gè)人觀點(diǎn),本站未對其內(nèi)容進(jìn)行核實(shí),請讀者僅做參考,如若文中涉及有違公德、觸犯法律的內(nèi)容,一經(jīng)發(fā)現(xiàn),立即刪除,需自行承擔(dān)相應(yīng)責(zé)任。涉及到版權(quán)或其他問題,請及時(shí)聯(lián)系我們刪除處理郵件:weilaitui@qq.com。
         

        Copyright ? 2016 - 2025 - 企資網(wǎng) 48903.COM All Rights Reserved 粵公網(wǎng)安備 44030702000589號

        粵ICP備16078936號

        微信

        關(guān)注
        微信

        微信二維碼

        WAP二維碼

        客服

        聯(lián)系
        客服

        聯(lián)系客服:

        在線QQ: 303377504

        客服電話: 020-82301567

        E_mail郵箱: weilaitui@qq.com

        微信公眾號: weishitui

        客服001 客服002 客服003

        工作時(shí)間:

        周一至周五: 09:00 - 18:00

        反饋

        用戶
        反饋

        主站蜘蛛池模板: 国产精品亚洲高清一区二区| 高清一区二区在线观看| 无码毛片视频一区二区本码 | 人成精品视频三区二区一区 | 在线成人综合色一区| 精品国产一区二区三区麻豆 | 中文字幕VA一区二区三区| 亚洲一区二区三区国产精华液| 国产美女口爆吞精一区二区| 国产精品第一区揄拍无码| 97一区二区三区四区久久 | 美女视频一区二区三区| 无码中文字幕一区二区三区 | 国产亚洲自拍一区| 日本美女一区二区三区| 卡通动漫中文字幕第一区| 一区二区三区精品视频| 国产在线精品一区在线观看| 精品无人乱码一区二区三区| 亚洲综合av一区二区三区不卡 | 中文字幕在线视频一区| 国产精品成人国产乱一区| 一区视频免费观看| 精品一区二区三区四区在线| 色系一区二区三区四区五区| 日韩视频免费一区二区三区| 成人丝袜激情一区二区| 国产精品主播一区二区| 一区二区三区免费视频网站| 亚洲日本中文字幕一区二区三区 | 中文人妻av高清一区二区| 亚洲日韩精品无码一区二区三区| 波多野结衣高清一区二区三区 | 国产成人精品一区二区三区无码| 精品亚洲一区二区三区在线观看| 一区二区视频传媒有限公司| 亚洲一区二区电影| 日本国产一区二区三区在线观看 | 国产成人一区二区三中文| 亚洲av色香蕉一区二区三区蜜桃 | 国产精品区一区二区三在线播放|