1套流程,梳理產品設計項目的“從0到1”
在大公司里面,一個項目是如何從0到1的產生,什么時候開始設計?設計之前要了解什么?是先做規范還是先做界面?完整設計流程是什么樣的?今天一篇簡單的文章告訴你流程和方法。
01 了解產品定位
任何一個產品都有自己的愿景和商業目標,在開始一個項目前第一步一定需要了解,這個產品它解決什么商業問題?它的用戶是誰?什么年齡段等等!
Instagram 定位圖片社交,它的核心功能就是照片分享,在上面分享你的生活,你的愛好,從而鏈接關系,這就是它定位,Instagram 在移動端融入了很多社會化元素,包括好友關系的建立、回復、分享和收藏等,這是Instagram作為服務存在而非應用存在最大的價值。
LINE 是韓國公司NHN下的一款社交APP,功能和微信類似,LINE對用戶吸引力最大的即“聊天表情貼圖”,超過250種的表情貼圖讓用戶在使用LINE時多了一個有趣的心情傳達工具。
Snapchat 該應用最主要的功能便是所有照片都有一個1到10秒的生命期,用戶拍了照片發送給好友后,這些照片會根據用戶所預先設定的時間按時自動銷毀。
在做一個項目前,一定需要充分了解這個項目的定位是什么,如何用一句話向用戶傳遞這個產品是干什么的,它商業價值是什么樣的,只有充分了解清楚了,你才能下一步明確知道為誰設計!
02 了解為誰設計
清楚產品愿景定位后,就需要下一步了解你的用戶,用戶是誰,他們都多大,什么年紀段,喜歡什么樣的產品?平時生活喜好有哪些,這些都需要去了解。
假如產品是款少兒上課產品,那么你得了解這些用戶特征,比如他們平時學習中喜歡什么樣學習環境,學會什么樣的軟件。
如果用戶是高中生,高中生喜好是什么,平時喜歡衣服品牌是什么,只有充分了解用戶前提下,才能做出正確的設計判斷。
舉個例子
▲ OPPO2019廣告
▲ 新年貼畫設計
同樣是運用財神的一組設計,一個用戶是年輕的90后和海外用戶,一個是我們爸媽這個年代用戶,那么設計手法,設計風格肯定差異性很不一樣,所以在做一個設計前,弄清楚你的用戶很重要,你的用戶審美,喜好等等,只有弄清楚這些才能有效的設計出符合他們審美的設計。
03 了解產品價值
來自IDEO的Tim Brown的一個方法,在一個項目創新之前一定需要弄清楚How might we,大概意思就是一個項目啟動前,一定得明確這個項目的價值是什么,它可以幫助我們用戶,完成什么。
舉一些例子:
Snapchat 的HMW是什么:將私密的聊天和普通聊天隔離并使得它有趣
那么這個私密和隔離就是這個產品的核心要點,它的所有功能都是圍繞著這兩塊來設計。
窮游的的HMW是什么:把旅途中的攻略變為令人向往的一部分。那么攻略,令人向往就是窮游很多功能設計的核心點。
所以開始一個項目前,除了我們知道它的商業目標,產品愿景,用戶人群后,同時它的價值也是我們需要關注的點。
04 明確設計主張
有了前面那些部分,產品愿景,商業目標,用戶人群,產品價值后,這個階段就應該明確定義好你所做的產品設計主張是什么?
什么是設計主張,簡單來說就是一個人的性格和特點,我們身邊每天接觸那么多人,哪些人能給你留下印象深刻呢?可愛的,還是有氣質的,產品和人一樣都需要有性格。
最怕我們做的設計,做的產品沒有性格很平庸,所以一定要定義一個產品的性格特征。
bean這款產品的價值是最新的一些明星音樂發布,用戶群體都是90后,追星一族,所以在整個產品設計,定義的設計主張就是潮流,年輕化,在整個產品設計上,交互上都圍繞潮流,年輕化來打造,形成整個產品潮流年輕化的感受。
圖形上體現潮流年輕化:每一個都不一樣,播放按鈕也是通過LOGO的桃心演繹,每個按鈕里面圖形都是根據內容去變化的。
圖形上體現潮流年輕化:音樂專輯banner和海報,和界面中元素一致,同時拓展性更強,排版上高度一致同時又有各種的特點。
色彩上體現潮流年輕化:色彩系統上,顏色飽和度更高,更多年輕化色彩運用在里面,讓整個視覺系統呈現年輕化。
線上設計:線上官網設計,第三方社交設計都是統一一套潮流,年輕的設計手法。
線下設計:在線下IP上同樣圍繞著年輕化,潮流去打造。
接下來,再以另一款產品為例做分析:
它是韓國一款生活化的電商設計,它的整個用戶人群就是一些對生活有品質的中產階級,產品特別也是通過雜志化運用,幫你挑選好一些好的有品位的產品,所以設計師整個設計定義就是優雅、儀式感,一起來看看設計師圍繞這2個關鍵詞怎么在交互和視覺上打造的。
交互上:產品沒有過多裝飾內容,通過這種簡單清晰的圖片,所有掌控權交給用戶,滑動的操作方便快捷,通過交互和視覺來體現優化和儀式感。
視覺上:雜志化優雅的排版,就像閱讀一本書一樣,沒有任何細節瑕疵,完美有品質把每一個產品交代清楚。
排版上:將雜志,品質感淋漓極致的體現處理,從商品選擇,到商品細節查看,都無不體現這個產品對生活的講究。
色彩上:低飽和的配色,優雅的排版,統一且精致。
所以在這個階段,對于設計主張的明確是尤其重要的,需要先定義好關鍵詞,再結合關鍵詞去產出關鍵詞下的視覺表現,比如色彩,交互,視覺圖形等關鍵頁面。
05 方案設計
在明確設計主張后,那么我們就可以著手設計,但是到這里,很多朋友又有很大困難,是先做規范呢,還是先做UIkit,每個人心中仿佛有不同的答案,特別是一個項目時間緊湊,又有很多人合作情況下,顏色,按鈕,列表怎么用,包括樣式等等,下面分享下我個人經驗。
1. 定核心頁面風格
假設明確了設計主張是年輕化,潮流感,那么可以基于這個設計主張,進行視覺探索,如果團隊有幾個設計師,可以一起出設計方案,出方案一般會挑選核心4、5個頁面進行設計,設計好了后,和領導評審,明確某一個設計方向。
2. 梳理基礎組件
前面階段已經定義好的大概風格,最好能確定4張頁面的主風格,確定好主風格,然后進行組件細化。
確定風格后,梳理常用設計元素,從顆粒度最小的開始,比如線條,按鈕樣式,顏色,表單,字體,行間距,網格系統等等,比如字號,有幾種字號,字號的行間距是多少,是文字的1.2倍,還是1.5倍,按鈕分幾種樣式,線框的,填色的,還是帶投影的等等每周這個界面。
當然也可以一邊設計,一邊把確定的元素錄入到Uikit里面,需要注意的是圖標,圖標是一個產品中很能體現風格的地方,需要好好的研究,圖標一定需要做出自己的特色處理。
3. 更新組件
做的過程中,可以邊做邊維護更新組件,小組也可以進行分工,誰負責色彩,誰負責圖標,常用的分類一般是:色彩,樣式,按鈕,間距,字體,網格,空白頁,插畫,列表,導航,然后還有一些大家產品各種業務的場景
基本這個階段的執行就是:
概念設計探索—選5頁開始設計–確定字體顏色–按鈕樣式–網格間距–整理成組件到uikit–圖標規范–插畫規范–整理
06 最后
以上基本就是大公司的一個項目從0到1的大概過程,簡單回顧下設計總結的幾步:
- 了解產品定位
- 用戶是誰,為誰做設計
- 產品的價值(HMW公式)
- 明確設計主張方案設計(先核心頁面再Uikit)
#專欄作家#
Sky,微信公眾號:我們的設計日記(ID:helloskys),設計交流可加微信:hellosky678,人人都是產品經理專欄作家。原支付寶體驗設計專家,阿里巴巴天貓設計專家;10年知名互聯網公司設計經驗,對于產品從0到1、品牌定位、金融產品、設計規范、運營規范、大促等有豐富實戰經驗。
本文原創發布于人人都是產品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協議
邏輯有問題啊
挺不錯的!設計這一塊非常不錯!??
還是偏設計
小編是設計轉產品的吧