歡迎來到培訓(xùn)無憂網(wǎng)!

全國切換

咨詢熱線 400-001-5729

位置:培訓(xùn)無憂網(wǎng) > 新聞資訊 > 電腦/IT > UI設(shè)計(jì) >  UI設(shè)計(jì)學(xué)習(xí)需要掌握哪些專業(yè)知識?

UI設(shè)計(jì)學(xué)習(xí)需要掌握哪些專業(yè)知識?

來源:培訓(xùn)無憂網(wǎng) 發(fā)布人:云朵

2022-02-24 10:19:49|已瀏覽:258次

UI設(shè)計(jì)學(xué)習(xí)需要掌握哪些專業(yè)知識?

一、頂部導(dǎo)航和左側(cè)導(dǎo)航的用法

      頂部導(dǎo)航:顧名思義導(dǎo)航在頂部,這也是目前網(wǎng)站最常見的主導(dǎo)航模式。頂部導(dǎo)航一般會含有個人中心和一些功能入口。

      頂部導(dǎo)航常作為一級導(dǎo)航。

      如果導(dǎo)航里面存在二級導(dǎo)航則可以聚合在下拉菜單里面,鼠標(biāo)hover出現(xiàn)下拉菜單,點(diǎn)擊下拉菜單里面的選項(xiàng),進(jìn)入對應(yīng)的功能界面。如下圖所示的ant design導(dǎo)航組件,鼠標(biāo)hover出現(xiàn)二級導(dǎo)航,導(dǎo)航里面還進(jìn)行了分組。側(cè)邊欄導(dǎo)航:多用于二級導(dǎo)航(相對于頂部導(dǎo)航而言)。側(cè)邊欄導(dǎo)航里面的功能一般會進(jìn)行分組,默認(rèn)展示出來,方便用戶可以全局知道所有的導(dǎo)航功能。當(dāng)然只有極少的業(yè)務(wù)需求為了節(jié)省內(nèi)容區(qū)域空間默認(rèn)收起,有的側(cè)邊欄會提供點(diǎn)擊收起左側(cè)欄功能。

頂部導(dǎo)航和左側(cè)導(dǎo)航的用法總結(jié):

      1.頂部導(dǎo)航一般作為一級導(dǎo)航,左側(cè)欄導(dǎo)航一般作為二級導(dǎo)航;

      2.當(dāng)網(wǎng)站只有一層導(dǎo)航建議使用頂部導(dǎo)航;

      3.當(dāng)網(wǎng)站導(dǎo)航存在父子層級,需要默認(rèn)展開子層級的話,則用左側(cè)欄導(dǎo)航;

     4.當(dāng)網(wǎng)站既有一級導(dǎo)航,又有二級導(dǎo)航則兩個導(dǎo)航一起使用。

二、返回、取消和關(guān)閉的用法

      我們在使用App的過程中,點(diǎn)擊進(jìn)入下一個界面的時候,有時候?qū)Ш綑谏鲜欠祷,有時候是取消,有時候是關(guān)閉。

那么什么時候使用返回、取消或者關(guān)閉呢?他們有沒有規(guī)則呢?

      如微信朋友圈,點(diǎn)擊朋友圈,進(jìn)入下一頁,新頁面從左往右出現(xiàn),這時候?qū)Ш綑谏鲜欠祷亍?/span>

返回,取消和關(guān)閉三個的用法總結(jié):

      1、下一頁從右到左轉(zhuǎn)場用返回;

      2、新頁面從底部出現(xiàn)覆蓋當(dāng)前界面,用取消或者關(guān)閉。當(dāng)需要填寫表單內(nèi)容時,用取消。當(dāng)非表單內(nèi)容填寫用關(guān)閉;

      3、進(jìn)入微信瀏覽器用關(guān)閉,這個比較特殊。因?yàn)橐裱脚_規(guī)則(如微信瀏覽器或小程序等)。

三、、如何判定功能強(qiáng)弱

      在設(shè)計(jì)界面的過程中,會遇到哪些功能或元素該強(qiáng)化,哪些功能或元素該弱化,如何去衡量和判定呢?

設(shè)計(jì)功能強(qiáng)弱依據(jù)有以下2點(diǎn):

      1、功能價值大,如果這個功能對產(chǎn)品來說具有很強(qiáng)的變現(xiàn)能力或者戰(zhàn)略意義,那么就算這個功能使用人數(shù)不多,數(shù)據(jù)不大,那么也要將它重點(diǎn)對待和設(shè)計(jì)。

      2、用戶使用使用是否高頻。當(dāng)用戶使用是高頻時,需要強(qiáng)化該功能或元素,增加用戶體驗(yàn),為產(chǎn)品留存更多的用戶。

四、網(wǎng)頁打開規(guī)則

     設(shè)計(jì)師在設(shè)計(jì)PC端網(wǎng)頁的時候,經(jīng)常會遇到一個困擾,點(diǎn)擊一個功能或者操作,下一個頁面究竟是新窗口打開還是當(dāng)前頁面打開。其實(shí)這個有一個原則:

      看新頁面是否有明顯的返回上一層的入口,有的話,當(dāng)前頁面打開,沒有的話,新窗口打開。

五、UI轉(zhuǎn)交互

      目前很多UI都想轉(zhuǎn)交互設(shè)計(jì),但是在小公司沒有交互設(shè)計(jì)師,UI設(shè)計(jì)師不知道交互設(shè)計(jì)師需要哪些技能和工作輸出物,更加不知道如何轉(zhuǎn)行。

      對于UI設(shè)計(jì)師來說,可以在現(xiàn)有工作中,嘗試先畫交互原型,多思考交互流程,盡量別過度關(guān)注單個界面元素,養(yǎng)成原型流程思維。

多關(guān)注設(shè)計(jì)規(guī)范,這里的設(shè)計(jì)規(guī)范不僅包含視覺也包含交互。

      UI設(shè)計(jì)師嘗試梳理有價值的項(xiàng)目,然后嘗試去思考復(fù)盤。推導(dǎo)出整個項(xiàng)目,例如接到需求,如何做需求分析,如何確定產(chǎn)品目標(biāo),設(shè)計(jì)目標(biāo),如果通過數(shù)據(jù)去優(yōu)化現(xiàn)有方法,如何通過其他設(shè)計(jì)策略提升產(chǎn)品設(shè)計(jì)的得到方案如何走查等等

     關(guān)于什么是產(chǎn)品目標(biāo),設(shè)計(jì)目標(biāo),數(shù)據(jù)分析和設(shè)計(jì),設(shè)計(jì)方法論有哪些,這些都可以在我的歷史文章找到。

轉(zhuǎn)行的具體做法如下:

      1.梳理一套符合你們項(xiàng)目的設(shè)計(jì)規(guī)范,里面包含交互和ui組件,可以參考ant和element。

      2.梳理幾套從接到產(chǎn)品需求,如何做設(shè)計(jì)推到最后設(shè)計(jì)方案的的方法。這個可以放在以后的項(xiàng)目中。

      3.多和產(chǎn)品和需求方對接,并讓pm將畫原型的活交給你。根據(jù)UI規(guī)范組件直接搭建,提高人效。

      4.內(nèi)部多主動推動一些事情,例如可用性測試,設(shè)計(jì)體驗(yàn)優(yōu)化等。

六、作品集

作品集主要體現(xiàn)4點(diǎn):

      1.項(xiàng)目價值。多思考項(xiàng)目的價值,做了哪些好點(diǎn)的項(xiàng)目,將這些項(xiàng)目拿出來,然后嘗試去思考復(fù)盤。

      2.設(shè)計(jì)方案推導(dǎo)能力。推導(dǎo)出整個項(xiàng)目,例如接到需求,如何做需求分析,如何確定產(chǎn)品目標(biāo),設(shè)計(jì)目標(biāo),如果通過數(shù)據(jù)去優(yōu)化現(xiàn)有方法,如何通過其他設(shè)計(jì)策略提升產(chǎn)品設(shè)計(jì)的得到方案如何走查等等

      如果是UI作品集的話,努力將視覺圖做的好看點(diǎn)。然后做項(xiàng)目的時候,建立一套自己的設(shè)計(jì)推導(dǎo)法。例如如何定義產(chǎn)品風(fēng)格,如何確定主色、輔色。圖標(biāo)如何制作(圖標(biāo)設(shè)計(jì)方法)、流程設(shè)計(jì)的思考等等。對項(xiàng)目多思考,闡述下自己的理解等。

      3.團(tuán)隊(duì)影響力,如何通過個人的一些推進(jìn),對團(tuán)隊(duì)產(chǎn)生影響,這些影響和促進(jìn)團(tuán)隊(duì)發(fā)展,對團(tuán)隊(duì)成正反饋。

      4.項(xiàng)目驅(qū)動能力,如何驅(qū)動產(chǎn)品經(jīng)理、開發(fā)和業(yè)務(wù)角色,做設(shè)計(jì)推動優(yōu)化,把控設(shè)計(jì)進(jìn)度和流程。

      注:尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://elsolbar.com/news-id-23197.html 違者必究!部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請自行核實(shí)或聯(lián)系我們,了解更多相關(guān)資訊請關(guān)注UI設(shè)計(jì)頻道查看更多,了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請?jiān)囌n。關(guān)注官方微信了解更多:150 3333 6050

留下你的信息,課程顧問老師會一對一幫助你規(guī)劃更適合你的專業(yè)課程!
  • 姓名:

  • 手機(jī):

  • 地區(qū):

  • 想學(xué)什么:

  • 培訓(xùn)無憂網(wǎng)
免 費(fèi) 申 請 試 聽
提交申請,《培訓(xùn)無憂網(wǎng)》課程顧問老師會一對一幫助你規(guī)劃更適合你的專業(yè)課程!