手把手教你 「如何 7 步從 0 ~ 1 設計一款產品經理一稿過,設計風格明確,用戶粘性高的軟件!」
據不完全了解,身邊大部分的 UI 同事都從 0 到 1 參与過一款或多款軟件的設計,設計過程中不知道你是否有過這樣的疑惑:
- 設計稿都做了 100 版了,但產品經理還是不滿意,是我設計不行嗎?
- 產品目標、用戶目標都標得清清楚楚了,但總是找不好設計關鍵詞,來來去去只會用「年輕化、輕量化」?
- 產品目標明確了,設計關鍵詞也有了,但為什麼做出來的稿子不是太概念,就是跟競品太像呢?
在解決這些困惑之後,我總結了一套自用的,適合從 0 ~ 1 進行軟件設計或項目改版的方法 ,並在其他項目上進行了二次驗證。
以實踐項目 —— 有道少兒詞典為例,上線一年期間,用戶次日留存峰值 36% 以上,也非常幸運,被 App Store Today 推薦 4 次,App Store 編輯推薦 8 次,被 App Store 納入 2019 本土優秀 App 盤點中,同時被預裝到蘋果線下直營店,作為樣機體驗軟件之一。所以,這個方法親測有效!
這篇文章,通過分析如何解決類似「產品經理不滿意、設計關鍵詞不對、設計風格無區別」這些問題,整理出 7 個幫你從 0 ~ 1 設計一款軟件的步驟。
文章較長,大概需要花費 15 分鐘,建議大家先看大綱,優先閱讀符合自身情況的部分。
產品經理為什麼不滿意?
從 0 ~ 1 進行軟件設計,免不了要多出幾個設計稿,但做了 100 稿,產品經理對頁面設計還是不滿意的話,很有可能有 2 點原因:
原因 1:目標不明確
一拿到需求就開始做,很容易忽略需求背後的目標,從 0 到 1 做一款新軟件更是要了解業務目標和用戶目標。
在提出解決辦法前,我們需要先捋清楚以下 2 個問題:
為什麼要了解目標?
公司開發軟件是為了達到某些目標或是實現某個目的的,只有了解目標才能更好地為公司創造價值。
什麼是業務需求、業務目標和用戶目標?
平時產品經理跟我們說,要設計一個頁面,設計 一個流程,這就是一個業務需求,而這個需求的背後,能夠解釋清楚這個需求是為了什麼,要做到什麼程度,這就是業務目標(通常包括用什麼手段,給用戶帶來什麼價值,達到什麼目的)。而軟件的目標用戶,他們在一個具體的時間、地點、環境下做了什麼操作,想達到什麼程度,滿足自己的什麼要求,這可以理解為用戶目標。
解決辦法 :多使用 「為什麼+動詞」 的問法,向產品經理了解業務目標、用戶目標。
從 0 ~1 做軟件需要了解的業務目標和用戶目標,我們都可以從產品經理那裡得到。
少兒詞典的產品經理很早就給出了業務目標和用戶目標。但,當我們需要更多細節的時候,可以使用「為什麼+動詞」這樣的問法。例如:
- 「我們要做一個少兒查詞軟件,定位是一款擁有權威釋義背書,在視、聽、觸方面打造良好體驗,緊扣教材和教學大綱的適合少兒和家長使用的伴學詞典。你來做吧!」「為什麼做這個?」
- 「現在兒童教育KOL越來越多,很多家長都很關心k12教育問題。市面上的很多產品都不太適合孩子使用」
- 「為什麼這樣的定位可以滿足用戶需求呢?」「為什麼是適合少兒和家長使用呢?」
- 「為什麼……」
在少兒詞典項目中
- 我們的業務目標是:一款擁有權威釋義背書,在視、聽、觸方面打造良好體驗,緊扣教材和教學大綱的適合少兒和家長使用的伴學詞典。
- 目標用戶群體是:小學 1~6 年級的孩子和他們的家長。
- 用戶目標是:當小學低年級的孩子在家學習的時候,他們的家長需要一款軟件,能緩解家長伴學的壓力。高年級的孩子需要一款軟件,為他們提供準確教學。
原因 2 :沒有對產品關鍵詞形成共識
我們既了解產品的業務目標,也知道用戶目標的情況下,方案還是被 pass 的話,可能是因為你給出的方案和產品經理想要的不是同一個東西。為什麼業務目標在這裏不起作用了呢?怎麼才能弄清楚產品經理想要的是什麼?我們可以用產品關鍵詞來回答這個問題。
為什麼業務目標在這裏不起作用了呢?
我們常見的業務目標的內容是很長的,用戶目標的內容也是很長的,在這種所有已知內容都很長的情況下,如果沒有準確理解內容,沒有對重點內容達成一致,就很容易產生偏差。例如我要向你描述一位美女,她的頭髮很柔順,臉蛋很漂亮,身材比例很好,衣品很好等…… 90% 的可能,我們腦海中想的不是同一個美女。但是,如果我跟你說,這是一個跟芭比娃娃很像的美女的時候,我們腦海中的形象會接近很多。
怎麼才能弄清楚產品經理想要的是什麼?
就像設計師在進行頁面設計時,需要設計關鍵詞一樣,產品經理在描述自己的業務目標的時候,也需要能概括業務目標重點,突出賣點的產品關鍵詞,這個產品關鍵詞能幫助設計師弄清楚產品經理想要的東西。
部分產品經理為了方便大家達成共識,會早早亮出產品關鍵詞,如果當你們的產品經理沒有辦法提供產品關鍵詞的時候,我們要學會在討論中找到。
解決辦法 :從業務目標開始跟產品經理討論項目信息,直到獲得雙方達成一致的產品關鍵詞
從業務目標和用戶目標開始跟產品經理討論項目信息,在討論的過程中,我們可以留意產品多次提到的幾個形容詞,寫下來,然後跟產品反覆核對確認,最後雙方確認且保留下來的這 3~4 個形容詞,就是這個項目的產品關鍵詞。
少兒詞典的產品關鍵詞是:權威內容,寓教於樂,適合孩子使用。這些關鍵詞被我貼在屏幕的顯眼處,就怕自己哪天忘記了。
設計關鍵詞為什麼總是找不對
尋找設計關鍵詞,是設計師非常熟悉的步驟,但常常也在這裏翻車,甚至還會出現,不管做什麼軟件,反反覆復就那幾個關鍵詞的情況,我們可以把原因歸結為:
原因:對用戶不夠了解
為什麼不了解用戶會導致關鍵詞找不對?
我們的用戶在選擇軟件、使用軟件的時候,最先了解到的是軟件的設計、體驗和功能。用戶下載軟件時,他們已有的認知會影響他們對軟件的幻想。就像給小男孩的衣服是天藍色,小女孩的衣服是嫩粉色一樣,如果用戶想要一件天藍色的衣服,而我們給他展示的是深藍色或是嫩粉色的衣服,這都會讓用戶產生疑惑甚至離開。因此,如果對用戶了解不準確,會導致我們輸出錯誤的設計關鍵詞。
而了解目標用戶是又一件複雜的事情。
首先,我們的目標用戶可能是一類人,如有道詞典,下載軟件用戶和使用用戶大概率是同一個人。目標用戶也有可能是兩類人或是更多,如少兒詞典,下載用戶是家長,使用用戶是家長和孩子,企業協作軟件也類似。
從接觸軟件,下載軟件,使用軟件,到判斷是否繼續使用軟件,不同的階段的目標用戶是不一樣的,目標用戶在不同階段的需求也是不一樣的。
其次,開發軟件的周期是很長的,在開發軟件的過程中,我們的用戶在不斷地接收新的知識和觀點,用戶的喜好,認知可能會發生很大的變化。
因此,為了更好地了解用戶,我們需要找到用戶跟軟件之間的交互關係,以及影響用戶喜好的因素。一共有 2 個步驟:
步驟 1. 分析不同用戶跟軟件之間的接觸點,從未來趨勢和用戶當前認知角度收集用戶資料
在這一步驟中,我們加入了 2 個概念,接觸點和未來趨勢。
什麼是接觸點?
接觸點指的是用戶與產品發生交互的關鍵點,用來捋清楚我們剛剛提到 「用戶跟軟件之間的交互關係」。以少兒詞典為例,家長和軟件之間的接觸點,可以羅列為:家長聽說少兒詞典 – 到應用中心下載軟件 – 打開軟件 – 使用軟件……可見要想打造一款用戶好評度高的好產品,僅僅優化軟件的體驗是不夠的。
為什麼要從未來趨勢和用戶當前認知角度去收集用戶資料?
剛剛有提到新軟件的周期是較長的,前期定好的風格、關鍵詞等,到了開發上線后卻不適用了,既浪費人力,也浪費資源,因此要考慮未來趨勢對用戶的影響。同時,用戶在選擇軟件的時候,已有的喜好/預期/經驗等用戶認知會影響用戶對軟件的判斷。就像大家想到夏天的冷飲時,腦海中會浮現冰塊、西瓜等元素,因此雪碧、西瓜等符合用戶對夏天認知的食品在天氣炎熱時會熱銷,但是受到大部分買家越來越注重卡路里這一未來趨勢的影響,低卡的西瓜冷飲也可能在未來一段時間大賣。
接觸點和未來趨勢、用戶認知之間有什麼關係?
了解用戶接觸點之後,我們就可以猜測用戶在這一接觸點的需求和心理,加入未來趨勢和用戶認知,能讓我們做出來的東西更符合用戶預期。
尋找接觸點。我們了解到,少兒詞典的目標用戶群體是 1~6 年級的學生和他們的家長,即 6~12 歲孩子,和 30~44 歲家長。然後,我們粗略地將用戶的接觸點劃分為,篩選軟件 – 下載軟件 – 使用軟件 – 判斷是否再次使用軟件,孩子、家長跟接觸點之間的關係就可以展示為:
孩子是軟件查詢、練習、核心功能體驗者,家長是內容審核者、軟件篩選者、伴學時軟件使用者。
找到接觸點之後,我們還需要把影響用戶認知的內容具象化。
例如,我們想了解夏天做什麼口味的飲品更好,我們可以從夏日飲品口味銷量排行榜,夏日新品類型,夏日廣告等角度來獲得更清晰的用戶認知。應用到少兒詞典中就是,家長在篩選軟件時,老師的要求,未來孩子考試的內容、日常輔導內容、大 V 推薦的內容等會影響家長對下載軟件的判斷。每個接觸點都可以使用這樣的方式,來聯想更多影響用戶認知的內容。然後我們將得到類似下面的表格:
根據表格,我收集了 近 10 頁的用戶信息
步驟 2. 提取收集到的信息,並放入四象限中,總結出2~4個視覺關鍵詞、體驗關鍵詞
雜亂無序的信息只有經過歸納之後才能被大家使用。
怎麼歸納總結雜亂的信息呢?
UI 設計師都清楚,在進行界面設計時,大標題、縮進、分層等排版方式能讓我們的頁面看起來更清晰易讀。處理雜亂的信息也同理,最先要做的是找到信息的重點,然後把信息歸類,最後再用一句對內容進行總結,方便大家理解。應用到我們提取關鍵詞的環節中就是,挑選重要信息、放入四象限中、總結出能歸納這些信息的關鍵詞。
挑選重要信息。以家長篩選軟件為例,當我們將熱門大 V 推薦的教學方法、內容,進行整理的時候,會發現美學、樂感、編程、外文圖書、兒童心理教育、英文教學方法(自然拼讀)等內容出現的頻率很高,在一堆內容中挑選跟少兒詞典相關的內容,如美學、外文圖書、兒童心理教育等。
放入四象限中。在這一方法中,我們將四象限劃分為設計和用戶認知 2 個方向,其中設計劃分為視覺風格和體驗風格,用戶認知劃分為當前認知和未來趨勢 。以剛剛挑選的兒童美學教育為例,這是一個屬於未來家長會越來越關注的少兒視覺發展方向,所以我們放在視覺風格、未來趨勢這一象限中。其他內容也類似,不斷地提取出現頻率高、用戶熱點高的內容,並根據內容類型放入四象限中
總結出能歸納這些信息的關鍵詞。以視覺和未來趨勢象限為例,我們收集到大 V 的美學教育,未來的課本發展趨勢,小學建築風格發展趨勢,他們都有一個特點,顏色柔和無攻擊,色彩豐富,因此,我們總結出一個視覺關鍵詞是柔和多彩。
其他內容也採用相同的方法進行總結,少兒詞典的視覺關鍵詞是柔和多彩,輕質感,親和陪伴,體驗關鍵詞是,探索多變,感官刺激和重複熟悉。
為什麼做出來的設計稿不是太概念就是沒風格?
視覺關鍵詞出來了,產品的業務目標也出來了,從關鍵詞到頁面樣式的邏輯也很嚴謹,但出來的風格卻會覺得跟關鍵詞不太搭,或是跟競品差異不大,在多款 App 實踐后,我們發現可能是這樣的原因:
沒有把關鍵詞的作用發揮出來
引用一句說爛了的名言 「一千個人眼中就有一千個哈姆雷特」。大家在對關鍵詞的理解是有差異的,以「年輕」為例子,一款針對活力的年輕人的衣服和一款針對潮流的年輕人的衣服,設計風格上可能是隔好幾條街的。因此,僅僅得到幾個視覺關鍵詞和體驗關鍵詞還不足以讓我們找准方向,我們還需要將關鍵詞組合和具體化。一共有 2 個步驟:
步驟 1. 分別組合產品關鍵詞和視覺關鍵詞,產品關鍵詞和體驗關鍵詞,找到同時滿足 2 組關鍵詞的規則
為什麼將關鍵詞結合能讓關鍵詞的作用發揮出來呢?
我們的目的是要做一款滿足產品需求,符合用戶認知的軟件。
從問題 1 和問題 2 中,我們得到了符合產品需求的產品關鍵詞,和符合用戶認知的視覺關鍵詞和體驗關鍵詞,想要同時滿足產品需求和用戶認知,我們需要找到他們的重合點。如下圖所示,將產品關鍵詞和視覺關鍵詞、體驗關鍵詞分別結合,這樣的出來的規則就能最大限度地符合我們的要求,既滿足產品需求,又符合用戶認知。
具體怎麼做呢?下面將分別從視覺和體驗角度舉例子。
視覺角度,以權威內容和柔和多彩結合為例:
「權威內容」 要求我們輸出的內容是符合教材,符合老師標準的,內容是準確無誤的、來源是可靠的;「柔和多彩」 要求我們在進行頁面設計的時候減少大面積顏色的使用,色彩柔和,且顏色多樣。
將兩者結合,我們得到的規則是:
- 市面上的語文和英語教材以橙色封面為主,因此軟件把橙色作為主色,僅在重點區域使用橙色;
- 展示內容要準確,在牛津內容布局上參考《牛津小學生》字典,中文字體採用跟教材相似的文鼎新中楷,英文字體採用跟衡水體相似的 Averta Std;
- 參考大 V 推薦的繪本、動畫片常用的顏色,將顏色定為橙色、黃色、藍色和綠色,降低顏色飽和度;
- 參考繪本的圖案,選擇圓形作為主要的形狀,加入柔和色彩,使用深色和淺色疊加的圓形;
- ……
根據這些內容,我們將得到下面的 4 個顏色和圓形疊加的形式。(ps:通過這樣的形式確定的是規則,如:以橙色為主結合另外 3 個顏色,圓形,使用深淺色搭配。具體顏色和疊加形式需要在具體頁面中進行調整)
體驗角度,以權威內容和探索多變為例:
體驗上,「權威內容」要求我們的操作形式是跟老師的教學相似,學習方法需要參考成熟且有效的方法;「探索多變」要求我們在交互形式上可以採用多種形式,給孩子探索未知的機會,交互形式要符合兒童操作習慣,如塗抹、翻轉、拖拉等
將兩者結合,我們得到的規則是:
- 中文字體跟寫,手寫塗抹交互形式,添加錯誤抖動反饋;
- 單詞記憶,參考如師通學習方法,採用卡片翻轉形式,將單詞和圖片內容分離;
- 英文跟讀,採用表情代替評分機制;
- ……
其他幾個關鍵詞的結合也是使用這樣的形式,這裏就不一一展開。下圖是少兒詞典的視覺關鍵詞和產品關鍵詞結合后的樣式。
步驟 2. 選擇複雜的核心頁面,把具象化的體驗規則、視覺規則融進頁面中,確定設計風格
規則梳理出來后,我們就要挑選一些重要頁面進行風格嘗試,以結構複雜的中文查詞單字結果頁為例:
分析小學一年級到六年級的考試內容,我們了解到部首、筆順筆畫、跟寫、發音等漢字的基礎信息是低年級用戶(小學三年級及以下)會使用到,他們要求信息完整且準確;像詞組、造句這些信息則是針對高年級學生,要求快速準確定位到具體的內容板塊。
分析完內容結構后,我們就需要根據內容布局,加入表格中總結的體驗規則:
- 重複熟悉,針對低年級用戶的使用習慣,我們將頂部信息劃分為展示區域和操作區域,方便用戶操作,降低用戶學習成本;
- 重複熟悉,中文查詞結果頁中,使用田字格上下布局的形式,使用課本同款楷體字,滿足學生的識別文字書寫規範的需求,也符合用戶認知;
- 探索多變,在 tab 切換的時候,我們將 tab 選中的顏色變成軟件的 4 個主色循環切換,激發孩子對軟件的探索慾望;
- 探索多變,按鈕形式上採用出血的圖案形式,打破常規;
- ……
最後,梳理好頁面的體驗形式之後,我們開始給頁面添加視覺規則:
- 在推導中,我們選擇多彩的顏色模式,常見的小學課本是以橙色為主,因此,軟件也選擇橙色作為主色,並加入黃色、綠色和藍色作為輔助顏色;
- 圖標採用的是孩子熟悉的元素+輕質感這樣的組合;
- 結合繪本和孩子常見元素,使用兩個圓形疊加的形式,作為軟件的主要元素;
- 為了讓內容更符合孩子閱讀和使用習慣,使用大字號和大間距的形式,常用字號是 32px,最小字號是 28px;
- ……
對比產品原型和市面上的一些競品,我們可以發現,查詞軟件在內容布局上相差無幾。如果沒有找到符合我們產品業務目標,同時符合用戶認知的規則,我們將被淹沒在一群查詞軟件中。
步驟 3. 建立一個畫板,把用到的顏色、規則、字體、間距等內容羅列出來,並給他們限定使用範圍,方便自己查閱和團隊合作
最後一步,相信很多設計師都會在設計過程中建立一套方便好用的設計規範庫,這裏就不展開來說了。
總結
最後,再對上文的所有內容進行概括。從 0 到 1 進行軟件設計我們需要用到下面這 7 步:
- 多使用「為什麼+動詞」的問法,向產品經理了解業務目標、用戶目標。
- 從業務目標開始跟產品經理討論項目信息,直到獲得雙方達成一致的產品關鍵詞。
- 分析不同用戶跟軟件之間的接觸點,從未來趨勢和用戶當前認知角度收集用戶資料。
- 提取收集到的信息,並放入四象限中,總結出2~4個視覺關鍵詞、體驗關鍵詞。
- 分別組合產品關鍵詞和視覺關鍵詞,產品關鍵詞和體驗關鍵詞,找到同時滿足 2 組關鍵詞的規則。
- 選擇複雜的核心頁面,把具體化的體驗規則、視覺規則融進頁面中,確定設計風格。
- 建立一個畫板,把用到的顏色、規則、字體、間距等內容羅列出來,並給他們限定使用範圍,方便自己查閱和團隊合作。
完成這 7 步,將可以讓你從 0 ~ 1 設計一款產品經理一稿過,設計風格明確,用戶粘性高的軟件。
拓展閱讀:
如何正確體驗分析一款軟件?來看 Airbnb 的實戰案例!
如何正確體驗一款軟件,甚至提出改進方法呢?本文用一個 Airbnb 的實戰案例,為你展示高手打開APP 的正確姿勢。
閱讀文章 >>
未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五註冊開戶_如何從零到一設計產品?有道設計師總結了這7個步驟!