頂部導(dǎo)航：顧名思義導(dǎo)航在頂部，這也是目前網(wǎng)站最常見的主導(dǎo)航模式。頂部導(dǎo)航一般會含有個人中心和一些功能入口。
頂部導(dǎo)航常作為一級導(dǎo)航。
如下圖貓眼PC網(wǎng)站，頂部導(dǎo)航包含首頁、電影、影院、演出、榜單、熱點和商城等導(dǎo)航功能模塊。
如果導(dǎo)航里面存在二級導(dǎo)航則可以聚合在下拉菜單里面，鼠標hover出現(xiàn)下拉菜單，點擊下拉菜單里面的選項，進入對應(yīng)的功能界面。如下圖所示的ant design導(dǎo)航組件，鼠標hover出現(xiàn)二級導(dǎo)航，導(dǎo)航里面還進行了分組。
側(cè)邊欄導(dǎo)航：多用于二級導(dǎo)航（相對于頂部導(dǎo)航而言）。側(cè)邊欄導(dǎo)航里面的功能一般會進行分組，默認展示出來，方便用戶可以全局知道所有的導(dǎo)航功能。
當然只有極少的業(yè)務(wù)需求為了節(jié)省內(nèi)容區(qū)域空間默認收起，有的側(cè)邊欄會提供點擊收起左側(cè)欄功能。
如下圖微信公眾號后臺，該網(wǎng)站只有側(cè)邊欄導(dǎo)航，沒有頂部導(dǎo)航。
頂部導(dǎo)航和左側(cè)導(dǎo)航的用法總結(jié)：
- 頂部導(dǎo)航一般作為一級導(dǎo)航，左側(cè)欄導(dǎo)航一般作為二級導(dǎo)航；
- 當網(wǎng)站只有一層導(dǎo)航建議使用頂部導(dǎo)航；
- 當網(wǎng)站導(dǎo)航存在父子層級，需要默認展開子層級的話，則用左側(cè)欄導(dǎo)航；
- 當網(wǎng)站既有一級導(dǎo)航，又有二級導(dǎo)航則兩個導(dǎo)航一起使用。
我們在使用App的過程中，點擊進入下一個界面的時候，有時候?qū)Ш綑谏鲜欠祷兀袝r候是取消，有時候是關(guān)閉。
那么什么時候使用返回、取消或者關(guān)閉呢？他們有沒有規(guī)則呢？
如下圖微信朋友圈，點擊朋友圈，進入下一頁，新頁面從左往右出現(xiàn)，這時候?qū)Ш綑谏鲜欠祷亍?/p>
如下圖，發(fā)朋友圈，點擊從手機相冊選擇，這時候新頁面從屏幕底部出現(xiàn)，導(dǎo)航欄上為取消。
如下圖，用戶點擊鏈接，通過微信內(nèi)置的瀏覽器打開，這時候?qū)Ш綑谏献優(yōu)榱岁P(guān)閉操作。
返回，取消和關(guān)閉三個的用法總結(jié)：
- 下一頁從右到左轉(zhuǎn)場用返回；
- 新頁面從底部出現(xiàn)覆蓋當前界面，用取消或者關(guān)閉。當需要填寫表單內(nèi)容時，用取消。當非表單內(nèi)容填寫用關(guān)閉；
- 進入微信瀏覽器用關(guān)閉，這個比較特殊。因為要遵循平臺規(guī)則（如微信瀏覽器或小程序等）。
在設(shè)計界面的過程中，會遇到哪些功能或元素該強化，哪些功能或元素該弱化，如何去衡量和判定呢？
設(shè)計功能強弱依據(jù)有以下2點：
- 功能價值大，如果這個功能對產(chǎn)品來說具有很強的變現(xiàn)能力或者戰(zhàn)略意義，那么就算這個功能使用人數(shù)不多，數(shù)據(jù)不大，那么也要將它重點對待和設(shè)計。
- 用戶使用是否高頻。當用戶使用是高頻時，需要強化該功能或元素，增加用戶體驗，為產(chǎn)品留存更多的用戶。
設(shè)計師在設(shè)計PC端網(wǎng)頁的時候，經(jīng)常會遇到一個困擾，點擊一個功能或者操作，下一個頁面究竟是新窗口打開還是當前頁面打開。其實這個有一個原則：
看新頁面是否有明顯的返回上一層的入口，有的話，當前頁面打開，沒有的話，新窗口打開。
目前很多UI都想轉(zhuǎn)交互設(shè)計，但是在小公司沒有交互設(shè)計師，UI設(shè)計師不知道交互設(shè)計師需要哪些技能和工作輸出物，更加不知道如何轉(zhuǎn)行。
對于UI設(shè)計師來說，可以在現(xiàn)有工作中，嘗試先畫交互原型，多思考交互流程，盡量別過度關(guān)注單個界面元素，養(yǎng)成原型流程思維。
多關(guān)注設(shè)計規(guī)范，這里的設(shè)計規(guī)范不僅包含視覺也包含交互。
UI設(shè)計師嘗試梳理有價值的項目，然后嘗試去思考復(fù)盤。推導(dǎo)出整個項目，例如接到需求，如何做需求分析，如何確定產(chǎn)品目標，設(shè)計目標，如果通過數(shù)據(jù)去優(yōu)化現(xiàn)有方法，如何通過其他設(shè)計策略提升產(chǎn)品設(shè)計的得到方案如何走查等等
關(guān)于什么是產(chǎn)品目標，設(shè)計目標，數(shù)據(jù)分析和設(shè)計，設(shè)計方法論有哪些，這些都可以在我的歷史文章找到。
轉(zhuǎn)行的具體做法如下：
梳理一套符合你們項目的設(shè)計規(guī)范，里面包含交互和ui組件，可以參考ant和element。在做的過程中可以看看我的web端設(shè)計規(guī)范文章做為參考：設(shè)計規(guī)范 | Web端設(shè)計組件篇－文本與選擇器
- 梳理幾套從接到產(chǎn)品需求，如何做設(shè)計推到最后設(shè)計方案的的方法。這個可以放在以后的項目中。不知道如何做設(shè)計推導(dǎo)可以看篇文章：體系化設(shè)計流程與思路
- 多和產(chǎn)品和需求方對接，并讓pm將畫原型的活交給你。根據(jù)UI規(guī)范組件直接搭建，提高人效。
- 內(nèi)部多主動推動一些事情，例如可用性測試，設(shè)計體驗優(yōu)化等。
作品集主要體現(xiàn)4點：
1. 項目價值
多思考項目的價值，做了哪些好點的項目，將這些項目拿出來，然后嘗試去思考復(fù)盤。
2. 設(shè)計方案推導(dǎo)能力
推導(dǎo)出整個項目，例如接到需求，如何做需求分析，如何確定產(chǎn)品目標，設(shè)計目標，如果通過數(shù)據(jù)去優(yōu)化現(xiàn)有方法，如何通過其他設(shè)計策略提升產(chǎn)品設(shè)計的得到方案如何走查等等
如果是UI作品集的話，努力將視覺圖做的好看點。然后做項目的時候，建立一套自己的設(shè)計推導(dǎo)法。例如如何定義產(chǎn)品風(fēng)格，如何確定主色、輔色。圖標如何制作（圖標設(shè)計方法）、流程設(shè)計的思考等等。對項目多思考，闡述下自己的理解等。
3. 團隊影響力
如何通過個人的一些推進，對團隊產(chǎn)生影響，這些影響和促進團隊發(fā)展，對團隊成正反饋。
4. 項目驅(qū)動能力
如何驅(qū)動產(chǎn)品經(jīng)理、開發(fā)和業(yè)務(wù)角色，做設(shè)計推動優(yōu)化，把控設(shè)計進度和流程。
承擔因您的行為而導(dǎo)致的法律責(zé)任，
本站有權(quán)保留或刪除有爭議評論。
參與本評論即表明您已經(jīng)閱讀并接受
上述條款。