UI、UE都應該掌握的、最具代表性和價值的6條專業知識點

編輯導語：向專業的人學習，不但可以節約我們的時間，而且可以學到具有專業水準的知識。本文作者從實際工作出發，結合自身工作經驗，對UI、UE需要掌握的專業知識進行了總結，希望對你有用。

因為本篇文章是我總結梳理具有代表性和價值的6條專業知識點，耐心看完后一定會有所收獲。

頂部導航和左側導航的用法

頂部導航：顧名思義導航在頂部，這也是目前網站最常見的主導航模式。頂部導航一般會含有個人中心和一些功能入口。

頂部導航常作為一級導航。

如下圖貓眼PC網站，頂部導航包含首頁、電影、影院、演出、榜單、熱點和商城等導航功能模塊。

如果導航里面存在二級導航則可以聚合在下拉菜單里面，鼠標hover出現下拉菜單，點擊下拉菜單里面的選項，進入對應的功能界面。如下圖所示的ant design導航組件，鼠標hover出現二級導航，導航里面還進行了分組。

側邊欄導航：多用于二級導航（相對于頂部導航而言）。側邊欄導航里面的功能一般會進行分組，默認展示出來，方便用戶可以全局知道所有的導航功能。

當然只有極少的業務需求為了節省內容區域空間默認收起，有的側邊欄會提供點擊收起左側欄功能。

如下圖微信公眾號后臺，該網站只有側邊欄導航，沒有頂部導航。

頂部導航和左側導航的用法總結：

• 頂部導航一般作為一級導航，左側欄導航一般作為二級導航；
• 當網站只有一層導航建議使用頂部導航；
• 當網站導航存在父子層級，需要默認展開子層級的話，則用左側欄導航；
• 當網站既有一級導航，又有二級導航則兩個導航一起使用。

返回、取消和關閉的用法

我們在使用App的過程中，點擊進入下一個界面的時候，有時候導航欄上是返回，有時候是取消，有時候是關閉。

那么什么時候使用返回、取消或者關閉呢？他們有沒有規則呢？

如下圖微信朋友圈，點擊朋友圈，進入下一頁，新頁面從左往右出現，這時候導航欄上是返回。

如下圖，發朋友圈，點擊從手機相冊選擇，這時候新頁面從屏幕底部出現，導航欄上為取消。

如下圖，用戶點擊鏈接，通過微信內置的瀏覽器打開，這時候導航欄上變為了關閉操作。

返回，取消和關閉三個的用法總結：

• 下一頁從右到左轉場用返回；
• 新頁面從底部出現覆蓋當前界面，用取消或者關閉。當需要填寫表單內容時，用取消。當非表單內容填寫用關閉；
• 進入微信瀏覽器用關閉，這個比較特殊。因為要遵循平臺規則（如微信瀏覽器或小程序等）。

如何判定功能強弱

在設計界面的過程中，會遇到哪些功能或元素該強化，哪些功能或元素該弱化，如何去衡量和判定呢？

設計功能強弱依據有以下2點：

• 功能價值大，如果這個功能對產品來說具有很強的變現能力或者戰略意義，那么就算這個功能使用人數不多，數據不大，那么也要將它重點對待和設計。
• 用戶使用是否高頻。當用戶使用是高頻時，需要強化該功能或元素，增加用戶體驗，為產品留存更多的用戶。

網頁打開規則

設計師在設計PC端網頁的時候，經常會遇到一個困擾，點擊一個功能或者操作，下一個頁面究竟是新窗口打開還是當前頁面打開。其實這個有一個原則：

看新頁面是否有明顯的返回上一層的入口，有的話，當前頁面打開，沒有的話，新窗口打開。

UI轉交互

目前很多UI都想轉交互設計，但是在小公司沒有交互設計師，UI設計師不知道交互設計師需要哪些技能和工作輸出物，更加不知道如何轉行。

對于UI設計師來說，可以在現有工作中，嘗試先畫交互原型，多思考交互流程，盡量別過度關注單個界面元素，養成原型流程思維。

多關注設計規范，這里的設計規范不僅包含視覺也包含交互。

UI設計師嘗試梳理有價值的項目，然后嘗試去思考復盤。推導出整個項目，例如接到需求，如何做需求分析，如何確定產品目標，設計目標，如果通過數據去優化現有方法，如何通過其他設計策略提升產品設計的得到方案如何走查等等

關于什么是產品目標，設計目標，數據分析和設計，設計方法論有哪些，這些都可以在我的歷史文章找到。

轉行的具體做法如下：

梳理一套符合你們項目的設計規范，里面包含交互和ui組件，可以參考ant和element。在做的過程中可以看看我的web端設計規范文章做為參考：設計規范 | Web端設計組件篇－文本與選擇器

• 梳理幾套從接到產品需求，如何做設計推到最后設計方案的的方法。這個可以放在以后的項目中。不知道如何做設計推導可以看篇文章：體系化設計流程與思路
• 多和產品和需求方對接，并讓pm將畫原型的活交給你。根據UI規范組件直接搭建，提高人效。
• 內部多主動推動一些事情，例如可用性測試，設計體驗優化等。

作品集

作品集主要體現4點：

1. 項目價值

多思考項目的價值，做了哪些好點的項目，將這些項目拿出來，然后嘗試去思考復盤。

2. 設計方案推導能力

推導出整個項目，例如接到需求，如何做需求分析，如何確定產品目標，設計目標，如果通過數據去優化現有方法，如何通過其他設計策略提升產品設計的得到方案如何走查等等

如果是UI作品集的話，努力將視覺圖做的好看點。然后做項目的時候，建立一套自己的設計推導法。例如如何定義產品風格，如何確定主色、輔色。圖標如何制作（圖標設計方法）、流程設計的思考等等。對項目多思考，闡述下自己的理解等。

3. 團隊影響力

如何通過個人的一些推進，對團隊產生影響，這些影響和促進團隊發展，對團隊成正反饋。

4. 項目驅動能力

如何驅動產品經理、開發和業務角色，做設計推動優化，把控設計進度和流程。

以上6條內容是我覺得UI或UE都可能需要的，具有一定的價值，所以我分享出來，希望對大家有所幫助。

如果你有其他意見和建議，歡迎在評論區留言一起交流。

歡迎關注作者的微信公眾號：「Echo的設計筆記」