一個有靈魂的UI設計案例！
前言
今天給大家分享的案例非常給力又有趣，很可能會改變你未來UI設計過程中的思考方式。
而且，如果你常常感覺被PM或者需求方牽著走，自己總是在做執行，那這篇文章會讓你找到突破方法。
案例解析
分享案例之前，我們先了解一下PM角色的職業特徵，接觸的PM多了會發現，很多PM工作中會給人一種目的性很強的感覺。
比如他們在向互動傳遞需求或自己畫原型圖時，常常是A重要的就把A放到最明顯的地方，看似合理，其實很多時候
互動邏輯
是缺失體驗的。
當然他們形成的這種思維方式是可以理解的，PM常常被各方需求纏身，沒有時間深入考慮體驗層面。
所以PM非常需要與互動、UI配合，這樣才能更好的完成產品設計。
但是，很多產品經理缺少與設計師建立配合的意識，而是習慣讓設計師去執行自己的設計想法。
更可怕的是，還不能讓設計師理解他設計的目的，這就導致設計師常常被帶跑偏。
開始案例分享
下圖是
互動設計
師按照產品經理的想法設計的原型圖，此頁面是會員成長值的得分統計。
頁面的功能目的是引導使用者做任務，從而得到更高的分值，升到更高的會員等級。
原型圖分為三個部分，上面是五維圖（蜘蛛圖），中間是平臺的推薦任務，下面是對應五維度的五個Tab任務。
身為UI設計師拿到原型圖，你會從哪些方面著手進行設計呢？
按原型圖來設計，最終的設計稿是下圖的樣子。
按原型圖設計稿
頁面中五維圖與下面的五個Tab是聯動關係，使用者點選五維圖可以控制Tab切換。
然而，現在中間插了一個“推薦任務”模組，這就會給人一種割裂感。
設計稿
問題解析
從體驗的角度來看，這樣的設計無法過關，與產品經理商討調整“推薦任務”位置，他完全不同意。
他的理由是，推薦任務是系統匹配給使用者最適合當前完成的任務，必須放到首屏這個位置。
產品經理
的表述
“必須放到首屏這個位置”
這就是讓設計師執行他的目的方案，而不是與設計師配合來解決這個需求。
遇到產品經理這樣“有理有據”的表述，相信很多UI設計師都會妥協，這時其實就被產品經理帶坑裡了。
產品經理落實需求的思考方式往往是直接了斷的，這就很容易缺失體驗，所以，互動設計師的價值就會體現於此。
但無論有沒有互動設計師來梳理互動，UI設計師都需要帶著
互動思維
進一步去驗證設計。
回到案例，雖然產品經理很強勢，但如果有問題，設計師還是應該去驗證並改正問題，以下是幾種改正方案。
方案一
方案一：
雖然符合產品的佈局邏輯，但是無法滿足產品需求。
因為推薦是演算法得出最適合使用者的任務，不出現在首屏就不能及時曝光，也就會降低使用者提升成長值的速度。
方案二
方案二：
產品佈局邏輯合理，但加標籤提示，只能曝光當前Tab的推薦任務，所以同樣會降低提升速度。
方案三（定稿）
方案三：
把推薦任務放到Tab中，不僅符合產品邏輯，也能在首屏充分曝光，能夠滿足產品需求。
當時把第三個方案給產品經理看後，他微微一笑欣然接受，相信下次他會多聽聽設計師的想法。
總結：
優秀的產品經理善於讓設計師明白他的需求目的，或是同設計師一起去探討設計方案，而不是強勢的讓設計師去遵循他的目的方案。
而作為設計師，要善於挖掘需求目的，多思考並驗證上游的產出，為他人把關就是提升自己的價值。
一個更有趣的案例
如果上一個案例，沒能讓你有所感悟，那讓下面這個案例來直擊你的靈魂。
先說一個事，曾經與產品經理開會過原型圖，當有人質疑為什麼這個頁面不能調轉到另一個頁面時。
產品經理隨口就說，“那在這個頁面加個按鈕入口就行了”，然後需求方都認同的說，“嗯，這樣邏輯上就走通了”。
這樣的思考方式，我稱之為
補窟窿思維
，當產品中出現一個問題時，馬上在問題的基礎上找解決辦法。
這樣往往會因為沒有做到全域性思考，而影響到其他功能體驗，久而久之產品還會變得臃腫難用。
接下來要分享的就是一個典型案例，產品經理和設計師都愛在這點上踩坑，領悟到這個案例的精髓，會讓你的思維更開闊。
下圖是線上版本的推薦醫師頁面，現在的需求是在此頁面增加一個使用者歷史預約入口，方便使用者找到曾經用過的醫師。
線上頁面
增加歷史預約入口，按照產品經理的想法設計，是下圖的樣子。
產品經理的設計方案
UI設計師認為產品經理的設計方案，不夠好看，視覺上過於突兀，還破壞了
頁面結構
。
UI設計師的想法是，把歷史預約入口換成圖示形式，放到頁面右上角，如下圖所示。
UI設計師的設計方案
以上兩種方案你會更傾向誰呢？
如果我選，我選擇產品經理的設計方案，雖然有點突兀，但可以滿足產品需求，因為滿足產品需求才是最重要的。
UI設計師的想法也可以理解，確實使用圖示不會破壞頁面結構，美觀度也不錯，但使用者的理解成本過高，會失去功能性。
敲黑板！重點來了～
產品經理的設計方案雖然好一些，但未必是最好的設計方案。
現在我們拋去在當前頁面中加入口的思維方式，把此頁面當成0-1重新思考設計。
透過整合梳理會發現，頁面中其實是兩大功能模組即“推薦醫師”和“
歷史預約
”。
推薦醫師與歷史預約
所以，其實把兩個功能模組設計成Tab切換更為合適，這樣既能突出功能滿足需求，也不會突兀，如下圖所示。
Tab切換體驗更好（定稿）
問題來了！
Tab切換是非常常見的設計形式，為什麼開始產品經理和UI設計師都沒想到呢？
其原因就是他們把思維侷限在了頁面加入口上，沒有從整合全域性功能的思考方式出發。
所以，
當頁面上加功能時，一定要站在全域性視角思考設計方案，
而且是必須這樣思考。