2019年7月20日,UXRen北京舉辦了《如何通過體驗設(shè)計賦能產(chǎn)品增長》的沙龍分享,本文基于嘉賓 何曉頔(搜狗高級用戶研究工程師)的現(xiàn)場分享總結(jié)而成。
何曉頔2015年開始從事用研工作,2018年加入搜狗,目前在搜狗搜索擔(dān)任用戶研究工程師;期間支持搜狗搜索相關(guān)產(chǎn)品的用戶研究工作,完成搜狗閱讀app、搜狗搜索app、搜狗圖片搜索改版研究,搜狗醫(yī)療搜索系列研究,搜狗翻譯app調(diào)研等項目;擅長全局思考問題,綜合考慮各方訴求,通過研究方法的熟練運用,需求的深度解讀,結(jié)果的產(chǎn)出,不斷提升用研的影響力及價值。
由于用研資源的緊張,傳統(tǒng)研究模式周期長,使得用研游離在項目邊緣,融入難,導(dǎo)致時效性跟不上整個項目的推進(jìn),出現(xiàn)信息不對等的情況,從而造成研究方向的偏差,而且研究結(jié)果也會和設(shè)計、產(chǎn)品的需求脫節(jié),造成落地難的問題。
敏捷用研可以很好的解決這個問題,它可以很好地融入在項目的各個階段中,能夠在3-5天內(nèi)地完成調(diào)研需求,真正融入到整個項目的流程中,在每個階段都以結(jié)果導(dǎo)向的解決問題,形成每個階段的連接器。所以說他以用戶思維為核心,通過用研的驅(qū)動性,增加用戶在整個項目中的參與度和體驗感,不僅能夠?qū)崿F(xiàn)成本的減少,還能提高響應(yīng)的效率,實現(xiàn)信息層面的對等,還原用戶的真情實感,性價比高的同時還提升了用研的價值。
敏捷用研可以在敏捷項目的各環(huán)節(jié)中發(fā)揮作用,而且在不同階段可以有針對性的解決問題。
2.1 改版前
需求分析
用戶點擊行為研究
書城結(jié)構(gòu)布局研究
2.2 改版中
用戶需求挖掘
搜索行為探索
2.3 改版后:改版效果評估
2.4 項目合作模式
3.1 招募策略——健全流程
招募問卷設(shè)計
招募渠道
招募用戶特征及數(shù)量
獎勵機制
3.2 研究策略——模板化、透明化
模板化:搭建問題包,分門別類、系統(tǒng)整理,隨時調(diào)用、整合
過程透明:邊訪談邊總結(jié),根據(jù)需求,隨時調(diào)整、直到數(shù)據(jù)樣本趨于穩(wěn)定
3.3 溝通策略——循序漸進(jìn)
結(jié)合迭代研究模式,從小范圍調(diào)研起步,與客戶及時共享研究進(jìn)度和成果,循序漸進(jìn):
3.4 參與策略
3.5 小結(jié)
敏捷調(diào)研不是為了快而快,而是快速解決產(chǎn)品需求和設(shè)計問題打造好的體驗!
問題1:內(nèi)部用戶招募。國企,公司logo優(yōu)化調(diào)研, 因為時間和成本的關(guān)系,邀約的是公司的內(nèi)部員工(年齡集中在40-50歲區(qū)間段),調(diào)研的結(jié)果內(nèi)部員工更偏好原logo的微小變化的版本,與設(shè)計方期望差別非常大,想知道是否是不應(yīng)該找內(nèi)部員工測試。
回答:就上述問題,不建議找內(nèi)部員工測試。
內(nèi)部招募是一種短平快的用戶招聘渠道,但是,
問題2:概念測試。概念型產(chǎn)品可以用電話訪談的形式進(jìn)行測試么
回答:概念型產(chǎn)品,由于屬于市場上未出現(xiàn)產(chǎn)品,很難在電話中通過語言描述的方式讓用戶理解和想象出來,因此,概念類測試不建議用問卷和電話訪談的方式,建議通過面對面訪談+高保真原型展示的方式進(jìn)行測試,如果實在滿足不了高保真,哪怕線框的示意圖都比單薄的語言描述更強。
問題3:用研考核機制。用研的輸出建議,有些被采納,有些不被采納,采納的建議到產(chǎn)品成型很多已不是建議的“原型”了,如何衡量用研結(jié)果的直接作用。
回答:
每一次學(xué)習(xí)改版案例,不僅僅只是去看在視覺層面的變化,更多的應(yīng)該是要學(xué)習(xí)到作者改版背后的思考。為什么要這么改,原因是什么,目的又是什么,怎么做,有哪些限制等等,有很多東西要去思考。所以,帶著問題并結(jié)合自己實際中所做的項目來看案例,應(yīng)該會是一個很有收獲的過程。
Booking.com繽客 是一家荷蘭初創(chuàng)公司,并已經(jīng)發(fā)展成為全球最大的旅游電子商務(wù)公司之一。
在Booking上,旅客可以選擇世界上任何一處的住宿地點,包括公寓,度假酒店,民宿,五星級豪華度假村,樹屋甚至冰屋等等。每天,通過平臺預(yù)訂的房間數(shù)超過155萬。無論是商務(wù)旅行還是休閑旅行,人們都可以快速輕松地預(yù)訂到理想的住處。
自從Booking發(fā)布以來,許多競爭對手都采用類似的商業(yè)模式瘋狂跟進(jìn),搶占市場,并且在某些方面比Booking本身做的還好。
在調(diào)研的前期階段,我去搜集了一些競爭對手和類似的平臺,分析UI,用戶體驗,用戶地圖,信息架構(gòu)和關(guān)鍵功能。但是我并不會花太多時間過于深入的去分析這些產(chǎn)品,因為我希望將重點放在Booking這個產(chǎn)品本身的訴求上。
在之前的調(diào)研過程中,我發(fā)現(xiàn)了許多不同的使用場景,經(jīng)過匯總歸集,我集中關(guān)注以下3個場景:
在進(jìn)一步的研究中,我明確了4位具有不同需求和不同目標(biāo)的典型用戶,這些數(shù)據(jù)對于改善不同用戶的體驗非常有用。
這個分析的目的是通過梳理最佳的用戶流程并提升產(chǎn)品體驗,來為不同需求的用戶提供最好的用戶體驗。
△ 數(shù)據(jù)來源:在線研究和用戶訪談(30個用戶樣本)
收集用戶評論,從中我收到了很多有價值的反饋,這些評論中沒有特別明確指出是可用性或功能性的問題。我將這些反饋分為4類(譯者注:對反饋的問題進(jìn)行提煉整理):
毫無疑問,最相關(guān)的是預(yù)訂被取消的問題。太多用戶會注意到不合理的費用或與房間的主人取得聯(lián)系時遇到困難。
基于30個用戶樣本,我試圖獲得進(jìn)一步的用戶反饋,從中注意到以下的幾點事實:
我想引用一段話,來總結(jié)這里面遇到的問題,這段話也蠻有意思的,它說的是:
「與其他應(yīng)用比較來看,套路顯得有點多,會讓你覺得一切看起來都蠻劃算,總是想多賣一些東西給你?!?
總結(jié)之前的分析,我提出了以下幾點觀點:
從用戶痛點出發(fā),嘗試找到合適的解決方案,來提升產(chǎn)品體驗。
1. 主頁
總的來說,我對首頁進(jìn)行了大手術(shù)。主頁的搜索功能已經(jīng)完全重新設(shè)計,減少過多的干擾信息。
導(dǎo)航:我設(shè)計了一個新的導(dǎo)航欄,剝離出「已保存」功能,這樣用戶就可以快速找到自己所收藏的商品。此外,我也優(yōu)化了「交易」的模塊,后面我會詳細(xì)的說說這塊的改動思路。
其它功能 :至于之前的版本,我保留了搜索和相關(guān)推薦的功能,重新設(shè)計界面以改善UI的可用性。
2. 社交功能
如今,社交網(wǎng)絡(luò)在用戶的生活中扮演重要的角色,那沒理由在booking中做的這么差。我搞了一個新功能,允許用戶關(guān)聯(lián)自己的好友并查看他們的選擇,包括他們的評價(喜歡/不喜歡)。我已將此功能放置到主頁的下方,因為我希望在將其推廣到其他模塊之前收集更多有關(guān)它的數(shù)據(jù)。
3. 搜索功能
把這個功能分解為多個步驟。在輸入第一個詞后,即使沒有指定日期或其他信息,也能顯示相匹配的酒店。此外,我也加入了語音搜索,使搜索更容易?;谥拔覍Σ煌脩艚巧亩x,搜索的結(jié)果將根據(jù)最后的信息進(jìn)行推薦:
4. 列表頁面
列表頁針對易用性方面做了整體的優(yōu)化:
5. 詳情頁
我列出許多可以在詳情頁面中加入的修改。將總價格突出顯示,以免有些隱形消費用戶可能會被忽略。
增強了一個與評論相關(guān)的次要功能,允許用戶通過不同標(biāo)簽篩選它們。
6. 交易功能
在優(yōu)化開始時,我確定了操作場景2—— 「用戶還不知道自己的目的地」作為優(yōu)化方向。為了提供更好的用戶體驗,我增加了一個新的功能,用戶可以在其中找到不同目的地的區(qū)間。利用篩選功能,用戶可以選擇最適合其需求的區(qū)間(區(qū)間 – 大陸 – 國家等…)
最后,我還設(shè)計了一個整個項目的動效原型,把之前所有重設(shè)計的頁面串聯(lián)起來。
由于時間限制,分析和結(jié)果是基于我的個人經(jīng)驗和少量數(shù)據(jù),需要進(jìn)行深入分析和其他測試,以便完善和驗證解決方案。
文章來源:優(yōu)設(shè)網(wǎng)
在去餐廳用餐之前,我們還有些時間再了解一項基礎(chǔ)設(shè)計原理。讓我們回頭看看在「鄰近性」原理當(dāng)中提到的燈光明暗控制開關(guān)。你能僅通過最左側(cè)這個開關(guān)的樣式看出它所控制的燈光明暗度嗎?
如下圖這樣又如何?
我們之所以能從后者當(dāng)中進(jìn)行判斷,所依據(jù)的就是映射關(guān)系。所謂「映射」,即是指,將被控對象的行為規(guī)律體現(xiàn)到控件自身的操作方式中,譬如開關(guān)把手的上升和下降,對應(yīng)著燈光亮度的升高和降低。
映射同樣體現(xiàn)在多個控件的布局當(dāng)中,它們的次序應(yīng)該能夠反映出多個被控對象之間的相對位置關(guān)系。
我們假設(shè)這三個開關(guān)用于控制臥室天花板上的三盞燈。依據(jù)映射關(guān)系而設(shè)計的開關(guān)位置應(yīng)該能夠幫助人們快速判斷出它們各自控制著哪一盞燈。映射原理有助于設(shè)計師對控件的類型、位置和次序進(jìn)行決策。
當(dāng)映射關(guān)系不明確時,我們通常需要依靠文本標(biāo)簽才能理解開關(guān)與燈之間的對應(yīng)關(guān)系。這并非完美的解決方案,因為閱讀和理解文字需要花費時間和精力,同時人們也難以依靠記憶進(jìn)行快速操作。
在界面設(shè)計當(dāng)中,映射關(guān)系也體現(xiàn)在控件類型的選擇上。例如通過滑塊(slider)控制文本的橫向字間距就是很符合直覺的交互方式。而相比于滑塊或是步進(jìn)控件(stepper),旋鈕則更適于旋轉(zhuǎn)操作。
當(dāng)然,最直接的映射才是最好的映射。為人們提供直接操作目標(biāo)對象的能力是最為簡單、精準(zhǔn)、符合直覺的解決方案。macOS 上的鼠標(biāo)指針操作,或 iOS 當(dāng)中的手勢操作,都可以為人們帶來直接操作的體驗。
不知各位如何,我是很餓了,這就準(zhǔn)備下樓去吃飯。我們在大堂見,然后一起去餐廳。
坐在餐桌前,你會看到面前擺放著一個空盤子。我們能用這個盤子做什么?顯然,放些食物在里面。除此之外呢?
盤子很光滑,可以旋轉(zhuǎn)或是滑來滑去。
盤子有一圈寬邊,可以抓著拎起來。
我們對于如何與這個盤子進(jìn)行互動的觀點便是可供性的體現(xiàn)。換句話說,盤子的外形特征為我們提供了如何與之進(jìn)行互動的視覺及觸覺線索,使我們意識到哪些交互行為可行,哪些不可行。我們會意識到要將食物放進(jìn)去,或是將它滑到其他地方。但我們通常不會想要倒水進(jìn)去,然后端起來喝。
可供性并非物體自身所具備的屬性,它更多是在代表行為主體與目標(biāo)對象之間的互動關(guān)系??晒┬詴蛐袨橹黧w的差異而有所不同。舉個極端些的例子,對我而言,飛盤可以用來抓住或扔出去,而對我的狗來說,飛盤就是單單用來叼的。不過另一方面,碟子對我和我的狗來說都是用來盛放食物的。
由于可供性所具有的主觀特性,一個人能感知到的交互特性在另一個人看來則未必如此。當(dāng)可供性所傳達(dá)的交互特性與人們的常規(guī)行為有著高度關(guān)聯(lián)時,人們會更加容易感知到。
例如,我其實可以把碟子當(dāng)作茶托,這會是個不錯的茶托。但我猜我們大家日常很少真的這樣去做,因此我會更樂于將碟子視為盛放食物的容器,而非將水杯放在里面。
我們能從我們所互動過的任何環(huán)境及事物當(dāng)中感知到可達(dá)性。當(dāng)我們走進(jìn)餐廳時,門的大小及形狀可以傳達(dá)出供人穿過的特性,連續(xù)的地面使我們意識到可以在上面安穩(wěn)地行走。
椅子的造型暗示我們可以坐下,桌子的構(gòu)造令我們明白可以將物品擺放在上面。
人造物品當(dāng)中都包含有傳達(dá)可供性的視覺線索,使人們明白哪些行為可行。清晰的、顯而易見的視覺線索可以幫助人們迅速了解如何與之進(jìn)行互動。
對于 app 界面設(shè)計而言也是同樣的道理?;瑝K控件由把手和滑軌構(gòu)成,暗示著拖拽的特性。
旋鈕的樣式意味著可以旋轉(zhuǎn)。
按鈕則一目了然地傳達(dá)著可點擊的特征。
在以上每一個例子當(dāng)中,可供性的傳達(dá)效率都是極高的。事實上,隨著時間的推移,我們會越發(fā)適應(yīng)于抽象度不斷提升的可供性傳達(dá)形式。我們所熟悉的界面當(dāng)中的按鈕,無非是現(xiàn)實世界里真實按鈕的高度抽象化版本;那四個圓角足以將虛擬與現(xiàn)實兩個版本的同一種物體關(guān)聯(lián)起來。
同理,滑塊把手周圍那細(xì)微的投影效果也足以讓我們意識到其獨立于滑軌之上的操作特性。
而且,僅有的這一點點視覺線索可能都不是必需的,對于很多人來說,一條直線上的一個實心圓足矣傳達(dá)滑動操作的可供性了。
有時候,可供性也可以通過動效進(jìn)行傳達(dá)。在天氣 app 中點擊主體內(nèi)容,界面整體便會稍稍上升,暗示著可以通過滾屏來查看更多內(nèi)容。
無論你使用何種方法,都必須確保 app 界面能夠清晰準(zhǔn)確地傳達(dá)其自身的交互特性,否則,人們將困惑于如何與之互動。他們很可能會以錯誤的方式進(jìn)行操作,然后發(fā)現(xiàn)無果,進(jìn)而將控件理解成不可交互的元素,app 的可用性也會因此而受損。
在佐藤看來,這些整理工作常常被他人視為是在浪費時間,而實際上整理是一種培養(yǎng)思路的好習(xí)慣,長此以往,不僅能讓自己的思路變得更加清晰,同時,思維也會跟著變得更加敏銳起來。
在與客戶的溝通過程中,我們可以清楚的了解到,具體需求是什么。隨后再將這個需求中的關(guān)鍵點進(jìn)行提煉與整理,最終完成這個設(shè)計。而不應(yīng)該全是憑借設(shè)計師自己的靈感和專業(yè)水準(zhǔn)去完成創(chuàng)作。
△ 多摩美術(shù)大學(xué)以「自由與意力」作為教育理念?,F(xiàn)為日本規(guī)模最大的美術(shù)大學(xué)。
佐藤的父親是位建筑師,祖父是俄羅斯語學(xué)者、前東京外國語大學(xué)榮譽教授。在這樣的家庭環(huán)境的熏陶之下,讓佐藤從小就喜歡上了畫畫。并且在報考志愿的時候,也選擇了藝術(shù)類的大學(xué)。但這一切似乎并沒有那么容易,沒錯,他落榜了。
但這并沒有讓他放棄這個想法,經(jīng)過了兩次落榜之后,終于在他20歲的時候,進(jìn)入了多摩美術(shù)大學(xué)就讀。
1989年,剛剛從多摩美術(shù)大學(xué)畢業(yè)的佐藤,憑借著優(yōu)異的成績,入職了一家日本知名的廣告公司「博報堂」。在這期間,受到了Takuya Onuki先生的指導(dǎo),成長迅速。經(jīng)過長達(dá)六年的工作積累,佐藤終于小有成就。他的作品「本田型格(Honda Integra)」獲得藝術(shù)指導(dǎo)協(xié)會的(ADC)年度大獎。在「博報堂」工作的這些年,佐藤除了收獲了大量的經(jīng)驗和知識外,還遇上了在人生中給予他巨大幫助的人,也就是他的妻子佐藤悅子。
時間一轉(zhuǎn)又過了五年,這時的佐藤已經(jīng)習(xí)得了一身本領(lǐng),終于有一天,他決定離開這家公司,去成立屬于自己的工作室 「 株式會社サムライ」 ,至此開啟了他魔術(shù)般的設(shè)計生涯。
△ 事務(wù)所內(nèi)部一角
在次偶然的情況下,有位外國攝影師問他「可士和」在英文里是什么意思,當(dāng)他解釋到第二個字」士」的時候就卡住了,因為在日文的發(fā)音羅馬里「 SAMURI 」是武士的意思。也這是事件啟發(fā)了他的想法,并且給自己的事務(wù)所命名為「 SAMURI 」。根據(jù)佐藤的妻子回憶,當(dāng)時她聽到這名字的第一反應(yīng)是:「什么?武士事務(wù)所?也太土了吧!」
在佐藤可士和的作品中,除了人盡皆知的優(yōu)衣庫設(shè)計。他所經(jīng)手的工作還包括有:偶像團(tuán)體「SMAP」的整體視覺設(shè)計、NTT移動電話設(shè)計、紐約全球旗艦店的創(chuàng)意指導(dǎo)、迅銷公司的企業(yè)識別設(shè)計、藤幼稚園的更新計劃、國立新美術(shù)館的標(biāo)志設(shè)計等。
除了獲得眾多獎項外,在2007年,佐藤成為了明治學(xué)院的客座教授,同時也是東京ADC(藝術(shù)指導(dǎo)俱樂部)、東京TDC(字形指導(dǎo)俱樂部)、JAGDA(日本平面設(shè)計師協(xié)會)的常駐會員。
在佐藤可士和看來,只依靠靈感的設(shè)計是遠(yuǎn)遠(yuǎn)不夠的,除此之外,設(shè)計師還需要去考慮產(chǎn)品背后的邏輯。靈感如果太跳躍性,太過超前的話,是沒辦法解決現(xiàn)有問題的。但是在設(shè)計的過程中,靈感也是必不可少的關(guān)鍵因素,許多時候我們都需要通過「靈感」來擴充想法。而靈感的并不一定非要在自己的腦海中產(chǎn)生,通常創(chuàng)意的答案就在客戶哪里,而我們做的工作只是總結(jié)對方的思緒并加以重新創(chuàng)造。
△ 佐藤可士和的超整理術(shù)
在《佐藤的整理術(shù)》這本書中也曾表明過,他自己的工作室里面沒有多余的東西,沒有電話和電視,偌大的會議室里也只有一條長長的會議桌和雪白的墻。
△ 佐藤可士和的事務(wù)所(內(nèi)部)
把環(huán)境中的干擾元素清理到限度,這有助于人對的情緒的整理。還有每當(dāng)他完成一個項目都會聚集所有員工來整理所有的資料。目的也在于在整理的過程中讓人時刻的保持清醒的精神狀態(tài),以做出更迅速、更準(zhǔn)確的判斷。
佐藤所從事的職位是「藝術(shù)指導(dǎo)」,可能一般人認(rèn)為的藝術(shù)指導(dǎo)工作,就是負(fù)責(zé)「擬定和執(zhí)行平面計劃的統(tǒng)籌者?!?
但在他看來藝術(shù)指導(dǎo)是「擬定全盤的溝通戰(zhàn)略,并運用設(shè)計的力量將其化為有形之物」的工作,通過跟客戶進(jìn)行多次全方位的溝通,整理出客戶的需求以及內(nèi)心的期待,從而做出符合客戶與市場需求的解決方案。佐藤將自己的職位定位為醫(yī)生,客戶就是患者,通過「望聞問切」找出癥狀的病因和治療方向。
在整理的過程中需要統(tǒng)理對方的思緒,很多時候客戶雖然對自己的產(chǎn)品非常了解,但對于產(chǎn)品的市場價值卻并沒有明確的認(rèn)知,或者頭緒很亂,不能總結(jié)出產(chǎn)品特點和價值。也有些客戶對于自己的需求說不清楚,有時候是他們想要的太多,但他們并沒有明確自己的目標(biāo)是什么。這時就需要跟客戶深度溝通一一推敲客戶堆積如山的問題,加以整理、逐步將產(chǎn)品最關(guān)鍵最本質(zhì)的焦點提取出來,將其打磨精致成為聯(lián)結(jié)產(chǎn)品和消費者的橋梁。
1. SMAP(2000)
2000年,佐藤可士和擔(dān)任了由木村拓哉等超人氣偶像組成的組合SMAP的整體形象策劃。這次設(shè)計中他采用全新的傳播策略。否定傳統(tǒng)的廣告宣傳方式,為日本流行音樂領(lǐng)軍團(tuán)體之一SMAP的十周年紀(jì)念引入了一種很酷的宣傳方式。
佐藤可士和以「流行樂隊就是品牌」的新視角,重新定位了SMAP,并制定一種新的傳播策略,在CD夾克和各種音樂會商品上都使用了獨特的視覺標(biāo)識。佐藤可士和將涉谷停放的汽車披上印著樂隊形象的車罩,在路燈上懸掛橫幅、為公共汽車車身設(shè)計特殊的視覺樣式,還有報紙廣告和海報宣傳等其他傳播媒介。
受樂隊CD包,盒子,碟底的啟發(fā),他重新修改了位置和顏色比例,設(shè)計出一個容易讓人記住的三色符號。并通過各種街頭活動營造出轟動,熱鬧切且有吸引力的熱點。
他將整個城市定位為一個大型傳播媒介的想法得到了高度認(rèn)可,并在2000年贏得了許多著名獎項??墒亢瓦€為樂隊設(shè)計了一種以他們發(fā)行的CD命名的飲料,「Drink Smap!」并進(jìn)行了更多的實驗廣告。他設(shè)計了飲料運輸車、工人工作服和安裝在音樂商店的自動售貨機。利用這獨特的產(chǎn)品作為廣告媒介,成功的吸引了大量的關(guān)注。
2. OZOC (2002)
佐藤可士和曾擔(dān)任OZOC(年輕女性時尚品牌)的創(chuàng)意總監(jiān),并負(fù)責(zé)其旗艦店的傳播策略,該旗艦店于2002年在原宿開業(yè)。佐藤可士和在建筑師荒木伸男(Nobuo Araki)的幫助下開始了這個項目,創(chuàng)作出一個紅色立方體建筑,但一個月后,這座建筑的顏色一夜之間變成了樸素的白色木材。
佐藤可士和將建筑概念定義「變化」?!缸兓故菚r尚的本質(zhì),隨著時間的變化而變化。他將建筑與OZOC品牌的靈活性進(jìn)行了結(jié)合,展示OZOC品牌對潮流的敏感度。OZOC在日本有100多家商店,它希望為品牌傳播創(chuàng)造一種獨特的方法。
佐藤可士和拋棄了以往時裝廣告策略,即使用外國模特的照片。將OZOC的新旗艦店作為媒介,并稱之為「原宿廣告架構(gòu)項目」(haap)。為了強調(diào)這一理念,佐藤可士和利用建筑工藝,為店面外部建造了一系列廣告板。為了強調(diào)設(shè)計概念,還將建筑過程和設(shè)計的稿圖,模型等應(yīng)用于廣告主題。佐藤還制作了一本特殊的概念書里面記錄著建筑的施工過程,并在開幕式上分發(fā)給記者和其他相關(guān)從事者。
他證明了除了文字,照片等傳統(tǒng)廣告媒介外,建筑設(shè)計和室內(nèi)設(shè)計也能在品牌傳播中發(fā)揮著積極和重要的作用。
3. 藤幼兒園(2004)
佐藤先生為藤幼兒園提出了一個全新的觀點,指出「幼兒園本身就是一個巨大的游樂場」的宏偉概念。他將建筑作為培養(yǎng)每個孩子創(chuàng)造力的媒介賦予了新的視角。佐藤先生利用場地上現(xiàn)有的日本大榆樹,提出了一個木制屋頂和甜甜圈型的建筑,孩子們可以在上面每天跑步和玩耍。中間的區(qū)域被設(shè)計一個中央庭院,來促進(jìn)平時公共活動時的團(tuán)結(jié)性。佐藤先生也為幼兒園設(shè)計了操場設(shè)備,將它融入了幼兒園本身。他的想法是使幼兒園成為「學(xué)習(xí)的接口」,成為新的幼兒教育模式。
佐藤與手塚夫婦建筑團(tuán)隊合作,手塚夫婦的設(shè)計以融合自然的多功能空間而聞名。他們的建筑理念是:「無人獨處的空間」。幼兒園的空間設(shè)計也秉持著這一理念。屋頂作為孩子們的游樂場,為孩子們提供了豐富而有趣的內(nèi)置設(shè)備。
讓孩子可以屋頂上自由地奔跑和玩耍,然后通過滑梯或繩梯回到地面。甚至連排水系統(tǒng)都是為孩子們設(shè)計的,從屋頂收集的雨水形成瀑布。佐藤先生還為幼兒園標(biāo)志、網(wǎng)站和兒童t恤設(shè)計了類似剪紙的字體和字符。
該項目以「幼兒園本身就是一個巨大的游樂場,培養(yǎng)每個孩子的創(chuàng)造力」為理念,代表幼兒教育的未來,在國際上獲得了高度贊譽,獲得了2011國際機構(gòu)(CELE)頒發(fā)的「最優(yōu)秀設(shè)施獎」,以及眾多其他全球建筑和教育獎項。
4. 優(yōu)衣庫(2006)
2006年優(yōu)衣庫在紐約SOHO的旗艦店開業(yè)開始,佐藤可士和負(fù)責(zé)了時尚品牌優(yōu)衣庫的所有全球品牌傳播活動。為了實現(xiàn)優(yōu)衣庫獨特的創(chuàng)意和設(shè)計基礎(chǔ),他提出了以「具有美學(xué)意識的超合理性」為概念,總結(jié)了優(yōu)衣庫對世界的價值和主張。
可士和通過修改日本片假名和原始字體設(shè)計出新的視覺標(biāo)志,并組織了由建筑師、室內(nèi)設(shè)計師和平面藝術(shù)家組成的專家團(tuán)隊,為倫敦、巴黎、上海、東京和柏林的每一家旗艦店設(shè)計,每個地區(qū)的旗艦店都延續(xù)著相同的基調(diào)和感覺。這種與優(yōu)衣庫整體業(yè)務(wù)管理直接相關(guān)的全面?zhèn)鞑ゲ呗?,提升了?yōu)衣庫品牌的全球影響力。
優(yōu)衣庫在紐約Soho的第一家全球旗艦店的logo,用回了原logo鮮艷的紅色,片假名和英文表達(dá)了優(yōu)衣庫如何將歐美的休閑裝轉(zhuǎn)變成日本風(fēng)格。
整個平面設(shè)計從標(biāo)志到原始字體都是傳播策略的核心。佐藤將標(biāo)志和字體組合成一種視覺圖案,并將其運用在建筑外墻面板,出租車車廂,屋頂,和各種媒體,通過各種傳播形式來吸引人們對優(yōu)衣庫的興趣,促使人們?nèi)チ私鈨?yōu)衣庫。
此外,以負(fù)責(zé)設(shè)計各個旗艦店的片山正通先生、擔(dān)任網(wǎng)站設(shè)計的中村勇吾先生為中心,組建了在全球展開的創(chuàng)意團(tuán)隊將優(yōu)衣庫的品牌形象,在巴黎、倫敦、柏林、莫斯科、上海等各城市進(jìn)行品牌本地化。
佐藤還為優(yōu)衣庫的襯衫品牌「UT」進(jìn)行設(shè)計,2007年東京原宿旗艦店開業(yè)并發(fā)布襯衫專業(yè)品牌「ut」,并以「襯衫的未來的便利店」為概念開展了設(shè)計。將t恤衫放入瓶包裝瓶,陳列在設(shè)計成飲料機型的展架上呈現(xiàn)出一種未來式的購物感。
「UT」一發(fā)布就在日本國內(nèi)引起熱烈反響,商店數(shù)天擠滿了客戶甚至連店內(nèi)的商品也出現(xiàn)了銷售一空的場景,這種現(xiàn)象讓人不禁發(fā)出欣喜的贊嘆。佐藤以一種全新的品牌設(shè)計戰(zhàn)略來重塑優(yōu)衣庫。將公司經(jīng)營與品牌設(shè)計相結(jié)合創(chuàng)造出一種全新的品牌戰(zhàn)略。
5. 今治毛巾品牌形象(2006)
「Imabari毛巾品牌項目」于2006年作為日本經(jīng)濟(jì)、貿(mào)易和工業(yè)部推廣日本品牌項目的一部分。由于無法招募到下一代工人,Imabari面臨著與廉價外國產(chǎn)品的競爭,前途未卜。佐藤可士和得知情況后為該公司制定了新的品牌標(biāo)識和品牌策略,將Imabari的高價值轉(zhuǎn)化為「最安全、最可靠、質(zhì)量最高的品牌」。佐藤可士和創(chuàng)造的標(biāo)志象征著Imabari(今治)地區(qū)豐富的自然和工業(yè)的復(fù)興。將Imabari的品牌定位為品質(zhì)保證的標(biāo)志,選擇了純白的毛巾作為主打產(chǎn)品,體現(xiàn)了品牌的精髓。
將「最安全」和「最可靠」作為核心品牌理念。當(dāng)時,由于發(fā)生了幾起食品安全事件,日本消費者的危機感增強了。人們對食品信息的安全性非常重視。佐藤可士和利用這種焦慮,直接定位Imabari產(chǎn)品的可追溯性和高質(zhì)量。紅、藍(lán)、白分別代表太陽、海洋和水,是Imabari毛巾高品質(zhì)的基礎(chǔ)。這個標(biāo)志的首字母是「I」,增加了歐洲的味道,為「全球品牌」定下了基調(diào)。
白毛巾以前并沒有被用來代表高質(zhì)量,但佐藤認(rèn)為,作為Imabari的主要產(chǎn)品,它最清楚地代表了Imabari的價值。這清晰明確的信息極大地提高了Imabari的品牌知名度和銷量,并將其定位為日本的全球品牌之一。
2012年,在東京青山南美開設(shè)了第一家概念店。2017年在產(chǎn)地今治設(shè)立了旗艦店和毛巾實驗室。為了展示日本Imabari毛巾的區(qū)域生產(chǎn)商。還新成立了「毛巾實驗室」,讓游客可以在這里體驗毛巾的安全高質(zhì)量的品質(zhì)。所有這些活動都有助于加深消費者對該品牌的吸引力和熱情。這個項目的創(chuàng)新方向,包括制定和執(zhí)行的溝通策略,大膽的標(biāo)志和清晰的品牌信息獲得該地區(qū)100多家公司的共同關(guān)注。
6. 國立新美術(shù)館(2007)
2007年1月開幕的國立新美術(shù)館,是日本第五個國立美術(shù)館,也是最大的國家美術(shù)館,也是三十年來第一家開放的博物館。它沒有永久的收藏,作為一個展覽場所更多的活動來源于藝術(shù)教育和展覽活動。
佐藤可士和以」全新「做為出發(fā)點,將」沒有收藏品「的缺點轉(zhuǎn)化為優(yōu)點,并結(jié)合美術(shù)館做為「日本最大的展示空間」的優(yōu)點來規(guī)劃策略。
識別標(biāo)志以「新」這個字作為主要元素,想要用視覺表現(xiàn)出美術(shù)館的與過去其他美術(shù)館的不同,「就不能局限于舊框架,通過迄今沒有任何人做過的嘗試。佐藤可士和提取」開放「做為關(guān)鍵詞,因為該美術(shù)館致力發(fā)揮藝術(shù)中心的功能,除了搜集信息之外,更是期望美術(shù)館能成為信息交流地。
佐藤將「新」設(shè)計成美術(shù)館的視覺標(biāo)志并通過標(biāo)志強調(diào)這種「開放場所」的特征,去除「新」這個文字里所有線條和彎角的封閉部分,制作獨特的開放式字體。此外,所有線條都是一邊直角,另一邊圓角,這個靈感源自黑川紀(jì)章先生建筑的啟發(fā),美術(shù)館建筑的正面呈現(xiàn)海浪般的曲線,另一側(cè)的展示空間則是直線,通過字體的特征讓人聯(lián)想到建筑的外形。
他還為博物館衍生品和標(biāo)牌開發(fā)了原創(chuàng)的模板式英文和數(shù)字字體,以表達(dá)博物館的開放性和多元化,并將其核心價值觀和獨特建筑統(tǒng)一為一體,作為其綜合視覺傳播策略的一部分。通過統(tǒng)一建筑概念和視覺傳播概念,提升了美術(shù)館的設(shè)計完整度和統(tǒng)一性,確立美術(shù)館整體的全新形象。
7. 千里復(fù)健醫(yī)院(2007)
「康復(fù)度假村」是佐藤可士和2007年為這家醫(yī)院開發(fā)的宏偉概念。醫(yī)院的作用是提供康復(fù)治療的施設(shè),為正在康復(fù)的病人恢復(fù)活力和信心讓他們回歸正常生活。
通過理事長橋本康子醫(yī)生的敘述的詳情,整理和思索后提出「復(fù)健休閑中心」概念。醫(yī)院是修養(yǎng)的場所,但是通過提供舒適的空間和真誠的服務(wù),能發(fā)揮心靈康復(fù)的功能。
由可士和擔(dān)任家具設(shè)計的監(jiān)制,建筑內(nèi)部采用休閑飯店風(fēng)格,有熱帶魚悠游其間的水槽,客廳有暖爐,芳香療法,和圖書館。家具全部是摩登的北歐制品,采用柔和的間接照明,充滿溫馨感的木質(zhì)地板讓患者放松心情。員工制服全服翻新,委托滝沢直己先生設(shè)計,新的制服給人整齊潔凈的印象,又兼具「整齊」和「高雅」的高級感可以使患者感到安心。
醫(yī)院的結(jié)構(gòu)都是木質(zhì)材料目的是為了營造出溫暖的氛圍,讓患者感受到大自然的治愈能力。佐藤先生還制定了康復(fù)醫(yī)院新腦卒中病房的更新計劃,該病房是為紀(jì)念康復(fù)醫(yī)院成立10周年而建造的。他擴大了「康復(fù)度假村」的概念,為患者提供放松的環(huán)境,并將重點放在康復(fù)上,作為醫(yī)院新計劃的一部分。
此外醫(yī)院還設(shè)置了一間音樂室和一間鋪著木板的美術(shù)室。佐藤先生還將自己親自創(chuàng)作的繪畫和瓷器放置在大廳內(nèi)外展出,為患者提供一種新的治療藝術(shù)能量。
8. 7-11便利店(2010)
7-11便利店是世界上最大的便利店連鎖集團(tuán)。它不僅具備便利店個性化和便捷化的特色,更有著其經(jīng)營和發(fā)展的獨到之處。其龐大的店鋪網(wǎng)絡(luò),規(guī)范化的商品管理,與時俱進(jìn)的經(jīng)營理念。
在即將到來40周年之際,佐藤可士和為7-11便利店重新制定了一套經(jīng)營戰(zhàn)略,重新定位該品牌的重點,便利店的優(yōu)點并不在于價格而在他的產(chǎn)品質(zhì)量和形象,為了提高品質(zhì)和形象,可士和為便利店重新設(shè)計了1700多項商品包裝。這一舉措打破了每季度最高銷售記錄。佐藤可士和強調(diào)賣的不只是商品,而是對生活的重視,設(shè)計源于生活,應(yīng)該通過設(shè)計來培養(yǎng)生活美感。
佐藤先生還參與了「Seven Cafe」(七咖啡)咖啡機的命名、包裝和設(shè)計并創(chuàng)造出超高的人氣,可以被認(rèn)為是一種社會現(xiàn)象。并在1年里占據(jù)國內(nèi)咖啡銷量No.1的位置。
佐藤先生專注于最細(xì)節(jié)的設(shè)計,以最大限度地發(fā)揮這些優(yōu)勢。簡單的包裝設(shè)計,非常適合個人家庭餐桌,受到尋求高品質(zhì)產(chǎn)品的消費者的歡迎。佐藤還針對食品進(jìn)行分類,并按類別放置品牌標(biāo)簽,以便客人能夠根據(jù)自己的需求輕松地選擇產(chǎn)品。品牌重塑的第二年開始,以日常用品為主的「生活方式」品類開始逐步打造自有品牌。
在第三年,他推出了「Seven Café」,給7-11便利店帶來了巨大的成功。佐藤先生將重塑品牌的傳播方法結(jié)合到產(chǎn)品中,并從設(shè)計的角度出發(fā)結(jié)合。這是其他便利店產(chǎn)品都沒有的一個因素。因此,他不僅帶來了巨大的經(jīng)濟(jì)成功,也帶來了巨大的影響,創(chuàng)新日本的生活方式。
9. 開被樂記念館(2011)
「開杯樂紀(jì)念館」以創(chuàng)造思考為概念,通過有關(guān)方便面的各種展覽和體驗項目,讓參觀者在愉快的氣氛中了解發(fā)明、發(fā)現(xiàn)的重要性,學(xué)習(xí)創(chuàng)業(yè)精神,是一個體驗型飲食教育設(shè)施。該公司的創(chuàng)業(yè)者安藤百福先生生前一直有一個念頭:「希望告訴孩子們發(fā)明、發(fā)現(xiàn)的重要性」 紀(jì)念館的logo創(chuàng)作靈感來源于開杯樂靠近杯口的外沿設(shè)計,設(shè)計3個驚嘆號「?。?!」來表現(xiàn)「發(fā)明和發(fā)現(xiàn)」的喜悅。內(nèi)部基調(diào)以紅色和白色為主,簡潔明了。并將這一理念體現(xiàn)在博物館的平面,空間和展示內(nèi)容。
10. YANMAR公司(2013)
為了紀(jì)念Yanmar誕生 100周年,佐藤可士和為yanmar公司重新定制了一個品牌戰(zhàn)略,該公司涉及工程、農(nóng)業(yè)、建筑、海洋工程和全球能源等多個領(lǐng)域。
為了實現(xiàn)yanmar公司全球化的目的,佐藤制定了名為「高端品牌項目」戰(zhàn)略,以展示洋馬公司計劃的未來發(fā)展方向。
佐藤為公司設(shè)計新的標(biāo)志,還與創(chuàng)作者合作,創(chuàng)造了拖拉機原型和新農(nóng)業(yè)服裝,作為體現(xiàn)洋馬全球化的意愿。YANMAR的品牌形象在國內(nèi)外有所不同,在日本它以其拖拉機和公司卡通男孩角色Yanboh和Marboh而聞名。在海外,洋馬是游艇和海洋工業(yè)的熱門品牌?;谶@一事實,佐藤將洋馬的許多活動轉(zhuǎn)移到「食品生產(chǎn)」和「能源轉(zhuǎn)型」這兩個主要視角,專注于一個企業(yè)使命,即追求一個可持續(xù)的,循環(huán)型社會。
佐藤設(shè)計了源自O(shè)ni-Yanma的Flying Y標(biāo)志,該標(biāo)志啟發(fā)了公司名稱,在日語中意為「蜻蜓」。此外,在新聞發(fā)布會和經(jīng)銷商活動上以新拖拉機和新農(nóng)業(yè)、海洋服裝的設(shè)計為特色,有力地表達(dá)了Yanmar的未來愿景。
佐藤還負(fù)責(zé)監(jiān)制和指導(dǎo)位于大阪的新辦公樓的建設(shè),在辦公樓在2014年建成。建筑本身的定位旨在通過采用進(jìn)的環(huán)境技術(shù)實現(xiàn)零排放的概念模型。佐藤可士和將YANMAR FLYING-Y BUILDING大樓定位為傳播媒體,不斷傳遞洋馬「可持續(xù)未來」的使命。
11. MoltBene企業(yè)新形象(2015)
MoltBene是日本著名護(hù)發(fā)公司,在即將到來的40周年紀(jì)念,邀請了佐藤可士和為公司制定新品牌戰(zhàn)略的策劃和執(zhí)行,包括改變公司名稱, 并為「MoltBene」開發(fā)新的企業(yè)形象。他為公司提出一個新的命題「人生中,體驗新的美」。他還將集團(tuán)子公司整合在這一新口號和新公司名稱「美的體驗」概念里。
佐藤設(shè)計的新標(biāo)志靈感來自于「美」的日文漢字形式。整個標(biāo)志是由 「美」簡化和抽象而形成的,并使用紫色作為公司的新企業(yè)顏色。這區(qū)分了公司的獨特性,因為紫色不是公司徽標(biāo)中常用到顏色。同時負(fù)責(zé)新公司總部的入口和美容工作室的室內(nèi)設(shè)計,并負(fù)責(zé)安裝藝術(shù)品。
佐藤先生設(shè)計了公司新總部內(nèi)部新美容工作室。用于員工培訓(xùn),與新聞會議等,旨在該空間與整體品牌戰(zhàn)略同步。
從工作室天花板上的織物和佐藤先生在墻上的表達(dá)了這個工作室作為新「美」的體驗發(fā)源地的定位。通過在新公司名稱、新標(biāo)識、新美容工作室的內(nèi)部設(shè)計以及其他新的傳播媒介中象征性地融入新的使命宣言,將這些元素融合在一起,向社會提出了一種新的品牌戰(zhàn)略方案。
12. Miwa Yamamoto(2016)
Miwa Yamamoto是一家Tenobe Somen(日本手工細(xì)麥面)公司。為了紀(jì)念誕生300周年,佐藤可士和被委托設(shè)計新的公司名稱和新標(biāo)識,還有公司的旗艦產(chǎn)品「白龍」新包裝設(shè)計。在整個項目中,佐藤致力于將當(dāng)代日常生活和傳統(tǒng)工藝與日本食品傳統(tǒng)之間相融合創(chuàng)造出和諧共生的形態(tài),同時也為品牌創(chuàng)造了未來的形象。
考慮到公司日后擴張其他產(chǎn)品生產(chǎn)線,從而應(yīng)對日益多樣化的消費者飲食習(xí)慣,佐藤可士和先生提出將公司名字「Miaw SomenYamamoto」簡化成為「Miwa Yamamoto」。
他表示公司歷史悠久,與奈良古城歷史相互交織有著深刻的歷史淵源。基于這份歷史情感佐藤以印章的形式設(shè)計出公司的新標(biāo)志。公司產(chǎn)品」白龍」的包裝以白色為基調(diào),配合極簡又細(xì)致的圖案。簡單而現(xiàn)代的,與其他競爭產(chǎn)品區(qū)別開來。包裝上的圖案細(xì)膩又精致與產(chǎn)品產(chǎn)生呼應(yīng),同時標(biāo)志象征著Miwa Yamamoto細(xì)麥面背后獨特而精致的技術(shù)水平。
13. DIFFERENCE(2016)
2016年佐藤為DIFFERENCE更新品牌形象系統(tǒng),還為此定制了一套全新的西裝訂購系統(tǒng)??腿送ㄟ^店內(nèi)的裁縫進(jìn)行初步測量,將測量好的尺寸保存進(jìn)一個獨特的APP應(yīng)用中,從開始的測量尺寸到選材,布料,到支付都可通過該應(yīng)用完成。
這建立了一套全新的服務(wù)模式,將線下實體店和線上店鋪連接起來創(chuàng)造出一套新的訂購系統(tǒng)。佐藤先生還提供了根據(jù)每個顧客的數(shù)據(jù)進(jìn)行促銷信息分析,將合適的促銷信息傳播到合適的客戶身上。極大限度地發(fā)揮了定制西服的優(yōu)勢。
2016年10月在青山開業(yè),佐藤先生設(shè)計了一個精致的室內(nèi)空間。該應(yīng)用程序允許商店提前詢問顧客的個人喜好和預(yù)算,向他們展示不同的西裝選擇和面料樣品,這樣顧客一旦來到商店,就可以觸摸和感覺他們「想要」的西裝。顧客在真實商店和虛擬商店之間有一種無縫的體驗。很多客戶都很歡迎這項服務(wù),因為每個人都可以在整個過程中享受到高質(zhì)量的服務(wù)和個性化。
14. 武田制藥(2018)
佐藤可士和為武田制藥有限公司在東京·日本橋本町建設(shè)了的新全球總部提供了室內(nèi)設(shè)計指導(dǎo)。佐藤設(shè)計了一個精致又具有代表性的室內(nèi)空間,向世界展示武田公司的品牌核心。
他根據(jù)武田自成立以來的使命「生命的力量」為概念來進(jìn)行設(shè)計并體現(xiàn)在公司的內(nèi)部結(jié)構(gòu)中, 從入口到接待處到工作區(qū)域的運動過程講述了人類生活的故事。
并以生命中不可缺少的八個元素,生命,水,光,地球,樹,人,聯(lián)系和未來的漢字來作為空間裝飾里的主要形式。將這些漢字提煉成現(xiàn)代符號,傳達(dá)出了一種日本企業(yè)特有的「和」的感覺,并作為藝術(shù)品應(yīng)用于墻壁、地毯和燈光。
該項目作為空間品牌的視角得到了廣泛關(guān)注,不僅是為了傳達(dá)武田支持「生命的力量」,還為所有與武田合作的人提供了分享同樣美好未來的空間。
15. 日清食品公司設(shè)計工廠(2019)
2019年負(fù)責(zé)日清食品關(guān)西工廠的參觀設(shè)施的創(chuàng)意指導(dǎo)、室內(nèi)裝飾設(shè)計。佐藤結(jié)合了趣味性和品牌歷史,設(shè)計出與普通工廠不同的形式。
在入口處是巨大的杯,面外觀采用日清的代表色:紅與白為主,從入口處走進(jìn)內(nèi)部參觀后,映入眼簾的便是一條長長的紅色走廊,全長200米的鮮紅的參觀通道內(nèi)部同樣延續(xù)了入口處的紅白設(shè)計,與工廠內(nèi)部的干凈用色形成強烈對比,給人留下一種沖擊又和諧的對比,在紅色走廊里有40個大顯示器展示生產(chǎn)過程,每分鐘生產(chǎn)400個杯面,同時還能聽到生產(chǎn)線中發(fā)生的聲音取樣。
日清工廠總面積約10萬平方米,1年內(nèi)最多可生產(chǎn)10億頓產(chǎn)品。擁有尖端設(shè)備和IoT技術(shù),是國內(nèi)最大的食品工廠之一。
16. SAMURAI INCUBATE(2019)
2019年7月SAMURAI INCUBATE在日本總部的公司更換了全新的辦公地點,同時也重新修訂了企業(yè)形象系統(tǒng)。佐藤可士和為該公司重新整理了行動的方針,對齊經(jīng)營理念提出修正,把焦點聚焦在「志勇禮誠」這句話上。
LOGO標(biāo)志把「志勇禮誠」這四個字,無限的抽象化與簡化,使logo的視覺表現(xiàn)上與日本極簡的審美觀念融合統(tǒng)一。
四個正方形水平排列,即統(tǒng)一又平衡穩(wěn)固,象征了今后公司新事業(yè)的基礎(chǔ)。新辦公司在東京都港區(qū)的六本木一丁目街道中,佐藤認(rèn)為新的公司地點是新開始的舞臺,寓意著在這里能創(chuàng)造出更多新的商業(yè)機遇。新公司在六本木區(qū)選擇了一棟三層樓并以「無」作為概念,去除了樓中附屬的東西讓大樓接近剛建好的狀態(tài)。
公司二樓的靈感來自于「道場」這里能根據(jù)不同的用途靈活運用其空間,也可以做為一些特殊活動的場所。正面有一面純白的墻,傳達(dá)著一種從無到有的理念,同時也是這個空間中重要的標(biāo)志。其他的空間是無隔斷的一體化空間設(shè)計,可以滿足快速的繁忙事務(wù)的處理。在空間設(shè)計中材質(zhì)選擇了木頭、不銹鋼、布、玻璃,希望這里散發(fā)出輕松和質(zhì)樸的氛圍。
還在頻繁地使用彈窗對用戶展示重要提示嗎?明知這樣有損體驗卻沒有更好的選擇嗎?那么不妨來試試干擾度更低,卻依然可以用于重要提示的 Sheet 控件吧。
Sheets 控件并非彈窗,通常會被熟稱為「浮層」或「浮窗」。
該控件在 iOS 和 Android 系統(tǒng)規(guī)范中都有相關(guān)定義,屬于多才多藝的控件,可以用于給予信息提示,也可用于展示更多的拓展信息。
從用于提示的角度來看,Sheets 控件和 Dialogs 控件的相同點和不同點在哪里呢?
模態(tài)化
二者都可以設(shè)置模態(tài),當(dāng)模態(tài)控件顯示時,頁面背景會顯示深色遮罩,并立即打斷用戶當(dāng)前操作。
承載操作和信息
二者都可以承載豐富的操作和信息,支持嵌入列表、選擇器等控件及圖片、文本信息。
觸發(fā)方式不同
Dialog 可以不通過用戶操作而自動觸發(fā),Sheet 必須通過用戶操作才可以觸發(fā)顯示,因此用戶對 Sheet 的顯示會更有預(yù)期。
關(guān)閉方式不同
Dialog 的關(guān)閉方式較少,通常會要求用戶進(jìn)行選項操作后才可關(guān)閉;Sheet 的關(guān)閉方式較多,對于用戶而言有更豐富的選擇權(quán)。
因此綜上所述,我們可以發(fā)現(xiàn),Sheet 對比 Dialog 的優(yōu)勢在于,它的顯示會更符合用戶的預(yù)期,它的干擾層度也會低于Dialog(因為更易關(guān)閉)。
下面就由我來依次詳解其特性和玩法吧。
專屬于 Android 的 Sheets 控件。
用于補充內(nèi)容相關(guān)的更多信息(非模態(tài))、提供可交互的菜單或?qū)υ挘B(tài))或其它關(guān)鍵功能/任務(wù)的拓展。
菜單樣式
可嵌套 Menus,展示多個選項內(nèi)容。
宮格樣式
可使用宮格布局,展示多個選項內(nèi)容。
迷你樣式(非模態(tài))
一個非模態(tài)底部浮窗可被設(shè)置固定展示在頁面底部,用戶可以隨時用它來對其它功能/任務(wù)進(jìn)行快捷操作,如進(jìn)入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。
非模態(tài)浮窗:如左下圖所示,非模態(tài)浮窗與內(nèi)容保持在同一層級,用戶可同時對內(nèi)容和浮窗進(jìn)行操作。
模態(tài)浮窗:如右下圖所示,模態(tài)浮窗層級高于內(nèi)容,背景深色顯示遮罩,用戶僅能對浮窗進(jìn)行操作。
顯示
浮窗顯示時從底部向上滑入,非模態(tài)浮窗顯示時不會打斷用戶操作,模態(tài)浮窗顯示時會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。
模態(tài)浮窗在以下情況下會消失:
非模態(tài)浮窗在以下情況下會消失:用戶選中浮窗上的對應(yīng)按鈕(自定義)。
當(dāng)浮窗底部仍有未顯示的內(nèi)容時,可設(shè)置通過滑動或拖動浮窗來使其變?yōu)槿琳故荆⒃陧敳匡@示 Toolbar 來展示關(guān)閉/收起操作。
模態(tài)浮窗中可以展示其它應(yīng)用的深層鏈接內(nèi)容或操作,譬如調(diào)用 Google 翻譯。
抖音的評論功能使用的是模態(tài) Bottom sheet;百度地圖的路線切換功能使用的是非模態(tài) Bottom sheet。
專屬于 Android 的 Sheets 控件。
用于補充內(nèi)容相關(guān)的更多信息(非模態(tài))或提供可交互的列表信息(模態(tài))。
菜單樣式:可嵌套 Menus,展示多個選項內(nèi)容。
宮格樣式:可使用宮格布局,展示多個選項內(nèi)容。
如左下圖所示,非模態(tài)浮窗與內(nèi)容保持在同一層級,用戶可同時對內(nèi)容和浮窗進(jìn)行操作(在移動端較少使用,通常用于 PC 端)。
如右下圖所示,模態(tài)浮窗層級高于內(nèi)容,背景深色顯示遮罩,用戶僅能對浮窗進(jìn)行操作。
顯示
浮窗顯示時從左/右邊緣滑入,非模態(tài)浮窗顯示時不會打斷用戶操作,模態(tài)浮窗顯示時會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向左/右邊緣滑出。
模態(tài)浮窗在以下情況下會消失:
非模態(tài)浮窗在以下情況下會消失:用戶選中浮窗上的對應(yīng)按鈕(自定義)。
支持上下滑動,不支持左右滑動。
淘寶的篩選功能使用的是 Side sheet。
專屬于 iOS 的 Sheets 控件。
用于呈現(xiàn)一組與當(dāng)前操作相關(guān)的選項,如啟動某個任務(wù),或者確認(rèn)是否開始執(zhí)行某個可能具有破壞性的操作。
在 Android 中不建議使用 Action sheet,建議使用原生的 Bottom sheet 或 Simple dialog。
如下所示,支持單個或多個操作的展示,以及說明文案的展示:
顯示
浮窗顯示時從底部向上滑入,會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。會在以下情況消失:
豎屏?xí)r顯示在頁面底部,橫屏是居中顯示在頁面底部。
微信的選擇朋友圈發(fā)布類型及清除聊天記錄的二次確認(rèn),都是使用的 Action sheet。
專屬于 iOS 的 Sheets 控件。
用于呈現(xiàn)一組與當(dāng)前操作相關(guān)的選項表,如復(fù)制、收藏或分享。
在 Android 中不建議使用 Activity views,建議使用原生的 Bottom sheet。
列表樣式
宮格樣式
混合樣式
顯示
浮窗顯示時從底部向上滑入,會顯示深色遮罩以打斷用戶操作。
消失
浮窗消失時會向底部滑出。會在以下情況消失:
豎屏?xí)r顯示在頁面底部,橫屏是居中顯示在頁面底部。
當(dāng)面板底部仍有未顯示的內(nèi)容時,可設(shè)置通過滑動或拖動面板來使其高度進(jìn)行延伸,從而展示更多信息。
愛奇藝的分享功能和泡泡圈選擇發(fā)布內(nèi)容類型,都使用的是 Activity view。
建議針對非系統(tǒng)級或業(yè)務(wù)級的重要提示,使用 Sheets 控件進(jìn)行提示;Dialogs 控件僅用于最重要的信息提示才算是「好鋼用在了刀刃上」。
另外在調(diào)用原生 Sheets 組件時,記得分端的差異性。
文章來源:優(yōu)設(shè)網(wǎng)
8月27日,中國大陸第一家Costco在上海開業(yè),因為人滿為患,上午開業(yè),下午就被迫暫停營業(yè)了……
Costco開業(yè)的第二天,為了保證購物體驗,Costco開始實行了限流政策,將賣場人數(shù)控制在2000人以內(nèi)……
上海市民們依舊熱情未減,有人早上4點半就去Costco門口排隊了,大多數(shù)人6點半就到了,因為限流,來晚就進(jìn)不去了……
27日晚上,我發(fā)了一條朋友圈,附了一張在Costco照的,抱著一大包狗糧的照片:
大家都問我是怎么擠進(jìn)去的。
其實這不是在上海的Costco,而是在美國的Costco。
今年1月,我?guī)ш犎ッ绹螌W(xué),專門去參訪了Costco公司的總部。
Costco的高管Jay B.Smith負(fù)責(zé)接待了我們,他給我們分享了很多Costco的經(jīng)營細(xì)節(jié),都是不為外界所知的。
同時,他告訴我們Costco很快就會在中國上海開業(yè)了,我們也代表中國消費者采訪了他許多問題,特別有收獲。
所以,今天,我想把這些“關(guān)于Costco,你可能不知道的事情”整理出來,獨家分享給你。
Costco最早開始推行會員制的時候,其實遭遇了巨大的失敗。
人們當(dāng)時是不接受,也不理解會員制度的,沒有多少人來辦會員,Costco差點就死掉了。
那Costco是如何起死回生的呢?
它做了一個關(guān)鍵的改變:給高級會員2%的消費返點,每年的返點額度最高可以達(dá)到500美元。
高級會員每年的年費是120美元,一個家庭每個月只要在Costco消費500美元,一年下來,這120美元的會員費就可以返點回來了。
而如果你每個月消費500美元以上,你甚至還可以賺到額外的錢。
對于一個中產(chǎn)大家庭來說,平時需要購買食品、日用品、衣服等生活用品,偶爾還需要購買電子產(chǎn)品或者其它大件,每個月500美元的消費也不算太高。
加上Costco的商品物美價廉,本身就比別的渠道有價格優(yōu)勢,只要每個月消費500美元以上,省了會員費不說,還可以獲得額外的返點,何樂而不為呢?
就這樣,Costco迅速獲得了第一批會員。
這些會員辦了卡之后,既買到了物美價廉的商品,又拿到了額外的返點,同時還享受到了Costco把顧客寵上天的服務(wù)。
因此第二年的續(xù)費率高達(dá)96%,Costco也越做越成功。
Costco每年在全球范圍內(nèi)只擴張25家門店,相對來說,擴張速度算是比較慢的。
因為Costco最不愿意做的事情就是擴張。
為什么啊?
Jay B.Smith告訴我們:擴張,是最好的讓客戶失望的方法。
擴張?zhí)?,非常容易帶來用戶體驗的下降,這是我們最不愿意看到的事情。
因此,對于擴張這件事,Costco一直是非常謹(jǐn)慎的。
Costco的商品中,有25%是自有品牌的商品(比如它著名的自有健康品牌科克蘭Kirkland Signature),剩下的75%是其他品牌的商品。
為什么這么分配呢?
因為它要用25%的自營品牌,來倒逼其他75%的品牌降價。
Costco有經(jīng)營自己品牌的能力,因此它就有底氣跟大品牌說:“你要是不降價,那我就用自己的品牌做了。”
這就導(dǎo)致了大品牌愿意降價來給Costco供貨,Costco也因此能給用戶提供比別的渠道便宜得多的商品。
一開始,很多大品牌是不愿意和Costco合作的,因為它們其他的零售店要保留高利潤。
但是當(dāng)Costco越做越大,越來越多的大品牌愿意來costco了,比如勞力士,比如愛馬仕。
很多人覺得Costco就像是沃爾瑪旗下的山姆會員店;但其實,Costco一開始更像麥德龍。
Costco最初本來是打算做中小企業(yè)生意的,大包裝倉儲商品直接賣給企業(yè),而不是賣給個人消費者。
但是因為覆蓋面太小,Costco差點死掉。
之后Costco才轉(zhuǎn)型,決定面向個人消費者。
Costco為什么非常重視肉類商品?
因為肉類商品是非常有粘性的。
Jay B.Smith告訴我們:消費者非常喜歡Costco的肉類,肉類商品會吸引消費者一而再、再而三地來Costco購買。
不像可口可樂、薯片這種標(biāo)準(zhǔn)化商品,肉是非常差異化的商品,你在不同地方買到的肉,質(zhì)量肯定是不一樣的。
你只要把肉類這種差異化的商品做到極好,就會積累消費者的信任,增加消費者的粘性。
所以,Costco非常重視肉類商品的質(zhì)量。
很多人都覺得,Costco可以把東西賣這么便宜,是因為它靠會員費賺錢。
但是靠會員費賺錢,只能說Costco有把東西賣便宜的動力。
那它把東西賣便宜的能力從何而來呢?
第一點,是因為它的包裝很大。包裝越大,就能賣得越便宜。
第二點,是因為它的品類很少。
沃爾瑪有13萬SKU(品種),而Costco只有4000個。
因為品類少,單個品類的銷量就可以做到極高,Costco就擁有了很強的與供應(yīng)商議價的能力。
第三點,是因為它很多商品是自營,可以自己控價。
比如,Costco有自己的養(yǎng)雞廠,它砍掉了所有中間環(huán)節(jié),最終一只能夠喂飽全家的烤雞,只賣4.99美元。
一只烤雞4.99美元,35人民幣,這在美國是極其便宜的。很多用戶因為買到這么便宜又量大,味道還不錯的烤雞,簡直幸福感爆棚。
還有一點你可能不知道,Costco目前是全美最大的紅酒廠商。
因為Costco賣出的紅酒量實在太大。
但是它并不賣很多種類,它只賣幾款最暢銷的紅酒。
在美國,對很多人來說,Costco的會員卡同時也是銀行卡。
Costco和Citibank(花旗銀行)合作,發(fā)行了一種聯(lián)名卡。
既可以作為Costco的會員卡,也可以當(dāng)做信用卡使用,在Costco消費可以享受2%的返現(xiàn)。
這也就意味著,Costco其實同時也在做金融生意,幫助信用卡的發(fā)行方來發(fā)行信用卡,同時來分享信用卡的刷卡收益,這可能也是Costco一個非常重要的收入來源。
在中國,平安銀行也和Costco發(fā)行了一種聯(lián)名信用卡,會員費可以減100元,同時在Costco消費可以獲得最高1%的返現(xiàn),白金卡每年最高返現(xiàn)1440元。
像Costco這種零售企業(yè),想要賺錢的一個特別重要的方法,就是提高周轉(zhuǎn)率。
Costco的周轉(zhuǎn)率非常高,是11.8,接近12。
什么意思?
Costco用一筆錢進(jìn)貨之后,一個月之內(nèi)就能把貨物賣出去。
這也就意味著,同一筆錢,Costco一年可以周轉(zhuǎn)12次。
我們來算一筆簡單的賬。
假如一個貨物放在一個普通超市,三個月才賣出去,那么用來進(jìn)貨的這筆錢,一年只能周轉(zhuǎn)4次。
很多人都知道,Costco的利潤率最高不超過14%。我們假設(shè)它的利潤率是10%。
那么1塊錢的進(jìn)貨款,在普通超市,一年周轉(zhuǎn)4次,就只能賺4毛錢。
而Costco一年周轉(zhuǎn)12次,就能賺1塊2。
所以,周轉(zhuǎn)速度越快,零售企業(yè)的利潤就越大。
在Costco有一句名言,叫做,降低成本最好的辦法,就是提高銷售。
什么意思呢?
如果想要降低成本,就要提高每天的出貨量,這樣周轉(zhuǎn)率就會非常高;周轉(zhuǎn)率變得非常高,資金成本就會變得非常便宜。
所以,真正的成本,是資金成本。如果你理解了這件事兒,你就會理解到底什么是Costco。
Jay B.Smith告訴我們Costco馬上就要在中國開店了。
我們當(dāng)時問他:Costco會打算在中國做電商嗎?
Jay B.Smith很謙虛地回答說:電商其實是我們一直不擅長的事,美國有一些企業(yè)做得特別好,比如亞馬遜,我們要向它學(xué)習(xí)。
但是,我們還是希望專注于做自己擅長的事。Costco所擅長的,是在線下做供應(yīng)鏈管理。
所以,Costco知道自己所長,也知道自己所短。
目前來看,就算Costco在中國要做電商,它也會把主要的精力放在線下,把線下的服務(wù)做到。
最后,附上Jay B.Smith給我們分享的一組數(shù)據(jù)(截至2019年1月):
Costco是全球第二大零售商,第一是沃爾瑪。
它是把零售效率做到的典型案例,是每一個零售企業(yè)學(xué)習(xí)的標(biāo)桿。
參訪完Costco,我自己是非常震撼的。它能夠獲得今天的成功,很大程度上,要歸功于它死磕自己、為用戶謀利的精神,以及它強大的供應(yīng)鏈管理能力。
在中國,也有很多向Costco學(xué)習(xí)的企業(yè),比如小米,比如拼多多。
最后,依然祝福Costco,希望它能夠在中國,越走越遠(yuǎn)。
文章來源:人人都是產(chǎn)品經(jīng)理
原型的不同階段,含義和作用也各不相同,更加認(rèn)清了原型在工作中的用途,希望對各位也有所幫助~
不知你有沒有這樣的經(jīng)歷:為了不讓原型看起來丑,會糾結(jié)各種細(xì)節(jié)處理(間距、大?。?,結(jié)果造成工作周期延長,精力損失;為了讓原型接近于真實效果,會思考各種精致布局,結(jié)果leader來一句‘你現(xiàn)在做這么好看干嘛,這個功能都沒確定好’....在各種階段畫出了不合適的原型。
所以今天想聊聊‘交互原型’這一話題,也算是對自己成長的一個總結(jié)和沉淀。
文章目錄:
·原型的不同階段
·原型與用戶體驗的5個層面
·原型產(chǎn)出的原則
Part1:原型的不同階段
其實我覺得畫原型和做設(shè)計的理念是一樣的:沒有好壞,只有是否合適~
當(dāng)產(chǎn)品經(jīng)理/交互設(shè)計師沒認(rèn)清當(dāng)前的需求階段時,無論你畫的好不好看,都會出現(xiàn)一些糟糕的現(xiàn)象:一開始就注重細(xì)節(jié)處理、在原型需要重點輸出時,又忽略功能與邏輯上的思考、在功能未確定時追求精致頁面效果...
下面是我對‘原型’的理解,所繪制用于表示不同階段下的需求特征。
01.想法階段:
在產(chǎn)品需求的初始階段,功能概念都比較模糊,大部分想法都停留在腦海和口述上(工作中典型的場景,如團(tuán)隊風(fēng)暴、需求討論、會議評審)。需要我們不停地理清概念想法,驗證需求的合理性、目標(biāo)是否正確。
所以這個階段的強調(diào)是:產(chǎn)品雛形 - 將我們的想法、概念需求可視化出來,并加以討論驗證。因此,最合適的方式就是用‘草圖’表達(dá),快速產(chǎn)出快速修改,能即時看見產(chǎn)品的雛形。
常用‘草圖’勾勒產(chǎn)品雛形,除了可以表達(dá)想法、探索方向外,好處還在于:
a. 能提升你快速思考、驗證假設(shè)、優(yōu)化設(shè)計流程的能力。
b. 能展示你思考問題的過程(設(shè)計思維),體現(xiàn)專業(yè)能力。
02.修改階段:
這階段的產(chǎn)品目標(biāo)和方向較為清晰,接下來需要優(yōu)化原有的概念想法,為產(chǎn)品創(chuàng)建一個信息架構(gòu)、梳理功能邏輯等工作,方便在需求評審會、團(tuán)隊討論中推動產(chǎn)品功能的進(jìn)展。
該階段強調(diào):理清目標(biāo) - 根據(jù)用戶訴求、業(yè)務(wù)目標(biāo)、運營需要等不同目標(biāo)點,逐步梳理出原型上需要展示哪些功能內(nèi)容(界面布局、信息取舍)。
所以對產(chǎn)品經(jīng)理/交互設(shè)計師來說,只需產(chǎn)出一個大體上看得明白、能理清產(chǎn)品功能的‘中保真原型’即可。方便即時修改,向產(chǎn)品定型/高保真原型過渡。
03.確定階段:
到了這個階段,產(chǎn)品需求的功能布局、信息設(shè)計已全部確定,這時一份全面、嚴(yán)謹(jǐn)?shù)?strong>‘高保真原型’就尤為重要。
一方面可以為視覺同事的UI輸出、開發(fā)的落地實現(xiàn)等提供依據(jù)。另一方面在各種工作場景中,高保真原型都能發(fā)揮很大的作用,如交互評審、領(lǐng)導(dǎo)過稿、A/Btest、demo演示等等。
這一階段強調(diào):細(xì)節(jié)核對 - 因為關(guān)系著UI輸出、界面實現(xiàn)等工作,所以需要注意各種交互細(xì)節(jié),以防出現(xiàn)設(shè)計、流程上的漏洞。
有2個核對緯度上的檢查:
a. 規(guī)范對齊
若團(tuán)隊內(nèi)部有設(shè)計規(guī)范時,一定要對齊字體大小、顏色、布局、間距等視覺元素。且能復(fù)用已有樣式就盡量復(fù)用,避免出現(xiàn)“一個功能,兩種樣式”的情況,如圖:
b. 交互走查
高保真原型輸出后,需要根據(jù)交互自查表,一一梳理原型說明是否存在漏洞,以防出現(xiàn)異常流程和內(nèi)容狀態(tài)。
另外,當(dāng)你想要獲得用戶反饋、測試你的想法是否為業(yè)務(wù)/用戶創(chuàng)造價值時,盡量使用高保真原型。原因在于:能夠產(chǎn)生真實的操作效果、給用戶帶來‘身臨其境’的瀏覽體驗。
最后總結(jié)一下,不同階段的原型用途:
·草圖:快速表達(dá)想法、驗證需求、展示思考過程。
·中保真原型:梳理大體產(chǎn)品框架,繼續(xù)優(yōu)化功能。
·高保真原型:為UI輸出與開發(fā)實現(xiàn)提供依據(jù)、測試用戶反饋、制作交互demo、向領(lǐng)導(dǎo)過稿等等。
Part2:原型和用戶體驗5個層面
另外我還發(fā)現(xiàn),結(jié)合‘用戶體驗5個層面’來看不同階段的原型,兩者是多么地吻合、有理有據(jù)。
01.戰(zhàn)略層和范圍層 - 草圖
產(chǎn)品想要做什么?如何去滿足戰(zhàn)略目標(biāo)?在構(gòu)思把目標(biāo)和需求轉(zhuǎn)變成功能和內(nèi)容時,用草圖的方式是極為合適的:快速表達(dá)、即時驗證,能讓概念想法馬上‘可視化’出來。
02.結(jié)構(gòu)層 - 中保真原型
想法表達(dá)后,需要為產(chǎn)品構(gòu)思一個具體的框架結(jié)構(gòu),根據(jù)業(yè)務(wù)目標(biāo)和用戶訴求,不斷地修改產(chǎn)品功能、信息設(shè)計,慢慢完成產(chǎn)品的定型。所以這時候只需產(chǎn)出一個大體上看得懂、方便修改的中保真原型即可。
03.框架層 - 高保真原型
這是原型設(shè)計的最后階段,產(chǎn)品關(guān)系已理清、功能內(nèi)容已確定。這階段注重原型的界面細(xì)節(jié)處理,如梳理異常流程、信息的不同狀態(tài)、是否對齊規(guī)范等等,以便后期的界面實現(xiàn),所以一份高保真原型就尤為重要了。
04.表現(xiàn)層 - UI效果圖
原型確定后,接下就是UI優(yōu)化階段了,這時候產(chǎn)品的最終效果也就出來了。產(chǎn)品的下次功能迭代,也是根據(jù)此UI效果圖的基礎(chǔ)上進(jìn)行原型優(yōu)化、修改。
Part3:交互原型的原則
最后簡單說下,原型產(chǎn)出的幾個原則:‘使用灰色圖’和‘復(fù)用已有樣式’,避免在今后工作上踩坑:
01.使用灰色圖
原型就要有原型的樣子,大面積的彩色布局,很容易讓人覺得這是UI效果圖(視覺同事可不背這個鍋),尤其是在交互評審會上,這種細(xì)節(jié)更應(yīng)該注意。
02. 復(fù)用已有樣式
這個上面已經(jīng)說了,能復(fù)用樣式就復(fù)用,避免出現(xiàn)“一個功能 兩種樣式”的情況,否則和視覺、開發(fā)同事對接原型時,會造成一定的理解干擾。
總結(jié):
以上對交互原型的一些見解,若有描述得不當(dāng)請多指教,下面是總結(jié)文件(轉(zhuǎn)發(fā)截圖給我可領(lǐng)?。?。
文章來源:UI中國
對于「高大上」即高級感這個抽象的概念,其實每個人的理解都不盡相同。身為設(shè)計師,在很多時候都需要去理解需求方所提出的「高大上」的含義,然后在自己的理解與需求之間找尋最合理的解決方案。
個人理解的「高大上」不僅是作品表現(xiàn)形式的高級感,也關(guān)乎時間的維度。有著持續(xù)生命力的經(jīng)典設(shè)計如包豪斯或無印良品式的設(shè)計是「高大上」的,而區(qū)別于當(dāng)下泛濫、普遍、常見設(shè)計的有獨特風(fēng)格化視覺語言的,也是另一種形式的高級感。本文將從這兩個不同的角度來為大家拆解提升作品高級感的技巧。
傳統(tǒng)意義上的「高大上」即所謂的高級感可以用現(xiàn)代主義建筑大師密斯·凡· 德羅那句著名的「Less is more」(少即是多)來形容。這句概括現(xiàn)代設(shè)計精神的金句,影響了幾代設(shè)計師,不僅改變了世界建筑的面貌也改變了整個世界設(shè)計史。德國著名的工業(yè)設(shè)計大師迪特爾·拉姆斯也曾在他的「設(shè)計十戒」里有提到「好的設(shè)計是盡可能的無設(shè)計」。
那些被大眾所接受的傳統(tǒng)意義上的「高級感」,拆解開來其實可以理解為克制感與性。高級感的營造往往是深遠(yuǎn)的意境、極簡的表達(dá)以及的細(xì)節(jié)追求。那如何來實現(xiàn)設(shè)計作品的高級感呢?
1、顏色傳遞情緒少顯高檔
每種色彩都會給人不同的心理感受,相較色彩濃烈情緒飽滿的用色,傳遞情緒少的顏色更能給觀者治愈的能量。所以除了減少使用顏色的數(shù)量,降低色彩的飽和度或者多使用不明確色相的顏色都能削減色彩對人情緒的影響,起到提升作品高級感的效果。此外使用黑白灰或者單色,也容易降低色彩本身對人情緒的影響,營造高級感。
比如很多人喜歡的「莫蘭迪色」,還有經(jīng)典的黑白灰。
2、字體選擇不宜多,簡單即是美
字體選擇一般不宜超過三種,多利用文字大小對比營造信息層級關(guān)系而非文字種類。對于追求高級感更是如此,字體種類選擇宜少不宜多,簡單的字體好于自身過于個性復(fù)雜的字體。
還有一種在做設(shè)計時讓文字顯高級的方式就是將文字圖形化與符號化處理。圖形從視覺表現(xiàn)力和神秘感上會比我們一眼就能讀懂的文字更勝一籌。這大概就是為什么很多人會認(rèn)為英文比中文看起來更有「高大上」的感覺,而在中文排版中加入英文能從視覺感知提升高級感。其實當(dāng)在設(shè)計里使用如拉丁語、丹麥語等我們自身更加不熟悉的語言文字時,這種高冷的疏離感會讓感官上的高級感更強烈。所以想要讓文字元素顯得高端,一個小技巧就是讓文字顯示在第一時間不易被解讀出來。
3、善用留白,營造高級感
善用「留白」也是對做所謂「高大上」的設(shè)計非常有效的一種表現(xiàn)手法。恰當(dāng)?shù)牧舭卓梢愿油怀鲋黝}內(nèi)容,讓重要的信息更準(zhǔn)確的傳達(dá)?!噶舭住棺陨硪部梢誀I造出一種很好的空間感,讓畫面得到延伸,給觀者留出更多的想象空間,呈現(xiàn)一種意境美。
很多時候信息和元素越多、越大就越難把握。多做減法去蕪存菁,避免無意義的視覺元素堆砌和雜亂無章,縮小或減少次要元素的存在感,利用合適的留白反而能讓你的設(shè)計更有高級的氣質(zhì)。
4、高質(zhì)量的圖片素材
在做平面設(shè)計的時候,高質(zhì)量的圖片是設(shè)計質(zhì)感有保障的重要前提。無論是在圖片庫尋找圖片素材,還是自己進(jìn)行照片的拍攝,高質(zhì)量的圖片一般都需符合以下兩條原則:
高質(zhì)量的免費圖庫Unspalsh、 Pixabay、500px、Getty Images 等,都可以提供不錯的基礎(chǔ)素材。
5、除了設(shè)計本身,還有工藝和材質(zhì)加持
營造設(shè)計的高級感,除了視覺設(shè)計效果本身的高階氣質(zhì),善用工藝與材質(zhì)同樣能讓你的作品高級感滿滿。對于平面設(shè)計的書籍、包裝、海報等宣傳物料設(shè)計,合適的工藝與材質(zhì)選擇會讓作品的質(zhì)感得到提升,甚至可以彌補設(shè)計上的不足。
雷射雕刻、燙金、凸版印刷、無墨壓印、絲網(wǎng)印刷、專色印刷等特殊印刷工藝的使用,手工裝幀或人工制作的加入,都能為打造「高大上」的設(shè)計增色不少。
對于線上的視覺設(shè)計而言,給作品的細(xì)節(jié)增添有質(zhì)感的材質(zhì)也是豐富設(shè)計層次、打造高級感的方式之一。
就像在開頭所說,你永遠(yuǎn)不會知道需求方說的「高大上」到底是哪一種「高大上」,對方想要表達(dá)的感覺到底是哪種。通??梢栽谶M(jìn)行更加深入溝通之后,明確后面的設(shè)計方向。當(dāng)普世經(jīng)典的「高級感」并不在對方想要的感覺范圍內(nèi)的時候,我們需要在「高大上」的光譜上搜尋更加契合需求的設(shè)計方案。
這個時候,需要有針對性地營造不同的視覺風(fēng)格,創(chuàng)造出區(qū)別于流俗、更加「脫俗」的設(shè)計。在溝通的時候,客戶所描述的「高大上」通常會帶有一些明顯的情緒、感知上的特征,抓住這些特征來進(jìn)行針對性的設(shè)計也就成了關(guān)鍵。
1、幾何元素和色相對比所營造的時尚感
每年對于時尚與潮流感的界定一直在變,這一點非常值得注意。就像在前文所提到的「高大上」不僅要考慮作品的表現(xiàn)形式,也要顧及對時間維度的考量。比如站在當(dāng)下這個時間點上,高飽和度紅藍(lán)雙色和大范圍漸變的視覺表現(xiàn),就是 2019 年高度普及并被認(rèn)可的視覺潮流形象。營造時尚感使用更簡約的幾何字體、幾何元素,搭配對比明顯的幾何色塊,小巧凝練的文字排版,這些都更容易塑造出符合當(dāng)下的時尚感。
同時,低飽和度、高素質(zhì)的圖片打底是常見的設(shè)計技巧,這樣也更容易創(chuàng)造出色相對比,從而將時尚高級的感覺給提煉出來。
2、巧選字體和配圖凸顯文藝范
配圖的選取,色調(diào)的后期調(diào)整與文字排版的選擇,很大程度上決定了文藝氣息能否營造出來。午后的陽光,慵懶的萌寵,粼粼的波光,延伸的道路……這些能夠沾上詩意的配圖,搭配上經(jīng)典的襯線字體如宋體(明朝體),再運用相對清晰簡單的上下或左右式布局,就能很快將作品打造出文藝范兒的氣質(zhì)。
3、把握好冷峻的氣息,創(chuàng)造出科技感
未來一點,科技一點,諸如此類的描述也常常緊隨「高大上」三個字出現(xiàn)在甲方爸爸的需求里。雖然使用藍(lán)紫之類偏冷的色調(diào)或是簡潔的黑白灰是立刻能想到的選擇,但打造「科技感」的精髓還是在于設(shè)計作品的情緒傳達(dá)要少和冷。冷峻的線條,抽象幾何元素,無襯線簡潔又幾何感強的字體,加入與設(shè)計主題相切合的科技衍生物或是帶有明顯近未來屬性的物品為輔助元素,都是塑造作品「科技感」強有力的方式。
4、強化視覺主體,營造沖擊力
視覺張力的營造有多種方法,但核心還是在于營造凝聚力與速度感。整個畫面和布局要有一個非常明確的視覺中心點,元素和布局都應(yīng)清晰地圍繞這個視覺中心點來展開設(shè)計。這個點可以是一個物品,一個標(biāo)題,甚至可以是無形的存在,但一定要讓人能明確感知。輔以加粗、凝練的字體,大特寫、發(fā)散式的視覺裝飾和引導(dǎo),沖擊力就出現(xiàn)了。
當(dāng)然,在色彩上為了兼顧到整體視覺的情緒,色彩的飽和度可能會偏高。雖然這樣偏離了傳統(tǒng)意義上「高大上」的設(shè)定,但是如果要兼顧需求,有舍才能有得。
5、深入挖掘文化特征,進(jìn)行風(fēng)格化設(shè)計
「風(fēng)格化」設(shè)計的需求其實并不少見,問題的關(guān)鍵在于設(shè)計時要往哪個風(fēng)格去偏移。是「和風(fēng)」還是「韓流」,是「德味」還是「美式復(fù)古」,或者選擇時下最in的「國潮風(fēng)」?無論是哪種風(fēng)格化,都意味著需要深入挖掘相應(yīng)的文化,才能有針對性地進(jìn)行風(fēng)格化的設(shè)計。我們后續(xù)會單獨撰文來寫風(fēng)格化設(shè)計的事情,今天這里就不贅述了。
高大上并不是一個的答案,它是一個涵蓋一定范圍的光譜。而我們要做的,就是在光譜上,找到一個大家都能接受的位置。
作為一個產(chǎn)品團(tuán)隊,我們最需要的永遠(yuǎn)都是懂用戶懂需求,并保持不斷的創(chuàng)新力。有贊希望每個產(chǎn)品人在這里都能足夠發(fā)揮自己的能量,為客戶創(chuàng)造價值,并獲取價值。
于是,我們需要一個大家共同理解、遵循、迭代的《產(chǎn)品設(shè)計原則》,從而保障我們可以在不偏離的情況下肆意揮灑、充分創(chuàng)新。
有贊的《產(chǎn)品設(shè)計原則》,根據(jù)客戶需求、有贊的使命和愿景、當(dāng)前生態(tài)環(huán)境,以及我們所處的發(fā)展階段擬定,它是每個有贊產(chǎn)品在設(shè)計過程中都要遵守的基本原則。我們還會定期對其進(jìn)行優(yōu)化和迭代。
它是一個產(chǎn)品視角的原則,并非完整的市場、運營或者技術(shù)視角。在產(chǎn)品視角上,我們把產(chǎn)品設(shè)計過程分成了 4 個部分:產(chǎn)品定義、產(chǎn)品設(shè)計、產(chǎn)品研發(fā)、產(chǎn)品運營。
產(chǎn)品定義:首先是定義客戶和場景,面對什么樣的客戶,服務(wù)什么樣的場景,它的使用場景是什么;然后是價值,客戶價值和商業(yè)價值;再是全局,要做全局的整體的思考。
產(chǎn)品設(shè)計:基于場景拆分用戶的使用任務(wù),任務(wù)再會拆分為功能和交互、內(nèi)容和信息架構(gòu),最終把它呈現(xiàn)到界面上。
產(chǎn)品研發(fā):主要指界面設(shè)計、技術(shù)研發(fā),還應(yīng)該有用戶體驗及可用性測試的部分。
產(chǎn)品運營:產(chǎn)品上線前后的基于產(chǎn)品的運營計劃,產(chǎn)品的增長管理、市場營銷、跟用戶之間不斷的互動過程。
這 4 個部分不斷循環(huán)迭代,就是整個產(chǎn)品設(shè)計方法的過程。在這個過程中有贊的產(chǎn)品設(shè)計原則如下。
1. 用戶和場景是一切的基礎(chǔ)
清晰的用戶畫像和使用場景,是整個產(chǎn)品的基礎(chǔ)條件。
2. 找到用戶價值和商業(yè)價值的結(jié)合點
定義一個新的產(chǎn)品時必須找到用戶價值和商業(yè)價值的結(jié)合點,同時能夠滿足用戶價值和商業(yè)價值的需求通常是最優(yōu)質(zhì)的需求。
3. 設(shè)計可持續(xù)正向增長的產(chǎn)品模式
產(chǎn)品模式應(yīng)該是可持續(xù)的、長期的、正向增長的,隨著用戶的使用,產(chǎn)品價值會越來越高,業(yè)務(wù)增長會越來越好,成本增長不斷下降。并且,給老產(chǎn)品帶來正向增長的新產(chǎn)品,要比只利用老產(chǎn)品來補給的新產(chǎn)品要好。
1. 首先要是能夠最小可用的全場景閉環(huán)
商家端的產(chǎn)品要做成全場景、完整業(yè)務(wù)鏈路的閉環(huán),因為任何一個環(huán)節(jié)的缺失和不完善都會導(dǎo)致商家的生意無法正常運轉(zhuǎn)。
2. 每個商家都應(yīng)該是獨立的個性化的
本質(zhì)上我們的服務(wù)是「在云上為每個客戶提供了一個獨立的產(chǎn)品」,商家都是獨立的,每一個商家都有個性化配置一切的權(quán)利。我們要盡全力去實現(xiàn)每一個商家的獨立和每一個商家的個性化,而不是規(guī)定他們一定要怎么樣。
3. 產(chǎn)品結(jié)構(gòu)及呈現(xiàn)方式需要可延續(xù)可拓展
一個被信任的商業(yè)服務(wù)產(chǎn)品首先應(yīng)該是持續(xù)穩(wěn)定的,產(chǎn)品的結(jié)構(gòu)和呈現(xiàn)方式一旦確定下來,就不能輕易改版。這要求我們的設(shè)計需要面對業(yè)務(wù)變化的時候可延續(xù),面對功能和服務(wù)增加的時候可拓展。
1. 穩(wěn)定壓倒一切
沒有任何東西比 SaaS 的穩(wěn)定重要,宕機了再好的產(chǎn)品都沒用。會影響到系統(tǒng)穩(wěn)定的事情不能做。
2. 說人話
說對方能聽懂的話,做用戶能用明白的產(chǎn)品。不耍專業(yè),不設(shè)置門檻。
3. 永遠(yuǎn)保持一致的表達(dá)方式
每一處給用戶表達(dá)的內(nèi)容,都需要是一致的,不做多樣化。從開始到結(jié)束,從 A 產(chǎn)品到 B 產(chǎn)品,從界面視覺到文字內(nèi)容,以及標(biāo)點符號。
1. 不可減少,每個用戶都重要
新產(chǎn)品不能比老產(chǎn)品的功能少,不應(yīng)該輕易下線產(chǎn)品功能,不降低服務(wù)。不讓少數(shù)服從多數(shù),每個用戶的需求和習(xí)慣都是重要的。
2. 先有,再,然后易用,最后好看
有是最基礎(chǔ)的體驗,有總比沒有要好。然后使用效率要很高,再然后才是要好用易用,最后才是要好看。當(dāng)然,丑也是不行的。
3. 持續(xù)關(guān)注自己的「孩子」,哪怕她已經(jīng)嫁人
作為一個產(chǎn)品人,應(yīng)該持續(xù)關(guān)注自己做過的產(chǎn)品,哪怕這個產(chǎn)品已經(jīng)不歸自己管了,也應(yīng)該經(jīng)常關(guān)注并思考他的發(fā)展和進(jìn)化。
4. 不騷擾用戶,不群發(fā)
我們的責(zé)任是幫助商家成功,不是為了讓我們自己的生意更成功,我們沒有權(quán)利去為了自己的商業(yè)目的不斷騷擾用戶。用戶通常不看系統(tǒng)消息,群發(fā)信息起不到溝通作用。
以下是白鴉在有贊內(nèi)部關(guān)于《產(chǎn)品設(shè)計原則》的分享速記。
在有贊產(chǎn)品設(shè)計原則這件事上,我們想了很久。有贊最早期的時候,產(chǎn)品的設(shè)計原則主要靠我和麥麥(有贊首席產(chǎn)品設(shè)計師)等幾個人的默契,以及慢慢形成的習(xí)慣。我們在一起天天聊,然后就有了一些共同的產(chǎn)品觀,以及產(chǎn)品設(shè)計的習(xí)慣和理念。
但是,隨著我們的小伙伴越來越多,我們注意到有很多東西,都要再重新給每一個人講一遍。坦白說,所謂的產(chǎn)品設(shè)計原則或者產(chǎn)品觀,并不是全世界通用的。每一個公司、每一個團(tuán)隊,因為業(yè)務(wù)性質(zhì)和業(yè)務(wù)特點的不同,都可能會出現(xiàn)他的產(chǎn)品設(shè)計原則跟別人的不一樣。
所以我首先要說,產(chǎn)品設(shè)計原則這件事,沒有誰是最好的。只有你的產(chǎn)品設(shè)計原則是否最適合你的業(yè)務(wù),最適合你的產(chǎn)品。因此,我們發(fā)現(xiàn)很多新的同學(xué)帶著原來在其他公司、其他崗位上的設(shè)計原則、設(shè)計思想,加入到有贊這家公司之后工作中有一些不適應(yīng),你不知道我們在產(chǎn)品設(shè)計時為什么會那么想。甚至我發(fā)現(xiàn)新來的同學(xué)經(jīng)常會犯一些我們認(rèn)為在這個業(yè)務(wù)性質(zhì)上,在我們的原則上,我們的價值觀上不應(yīng)該犯的錯誤。
所以我們花了很久的時間去討論有贊的產(chǎn)品設(shè)計原則,去推敲,最后把它確定下來。專門做這次的分享,而這次分享只是我們開始落實有贊產(chǎn)品設(shè)計原則的一個 kick-off ,之后我們還會把這次分享的內(nèi)容再細(xì)化做出案例,然后對公司新入職的每個產(chǎn)品經(jīng)理進(jìn)行考試,如果考試不過關(guān)是沒有資格轉(zhuǎn)正的。因為有贊產(chǎn)品設(shè)計原則是這家公司與用戶的基本原則,這些東西我們要保持一致。
我舉個有意思的例子。我們經(jīng)常發(fā)現(xiàn)新來的同學(xué)在優(yōu)化產(chǎn)品的時候,他會發(fā)現(xiàn)某個功能可能有一點臃腫(麻煩且沒什么人用),然后就把這個功能下線了。如果是 to.C 的產(chǎn)品,把某個功能下線是很正常的事情,比如微信去年上了一個可以去看最近三個月誰沒有聯(lián)系,最近半年誰沒有聯(lián)系的功能,上線了一個版本后,下一個版本直接就刪了。 to.C 這樣刪是沒問題的,但是 to.B 的產(chǎn)品你不能刪。我問新來的同學(xué)你為什么把它刪了?他說我看了一下數(shù)據(jù),沒多少商家用,于是就把它下線了。我要強調(diào)在 to.B 的產(chǎn)品上不能這么刪,原因很簡單,哪怕只有一個商家用,你都不能下線。如果這個產(chǎn)品有危害你不得不下線,你要么做一個高級功能把它替換下去,要么就得先跟商家溝通說:我們打算把它下線,對你有影響嗎?這是一個基本的 to.B 的產(chǎn)品設(shè)計原則,非?;A(chǔ)的原則。
不僅僅是因為你要堅持這樣的原則,甚至從法律上說你都應(yīng)該有這樣的責(zé)任。因為商家在購買你的系統(tǒng)和你簽協(xié)議的時候他買了那個功能,而你把那個功能拿走了,你就是沒有很好的履約,你負(fù)有法律責(zé)任,說嚴(yán)重點就是這樣的。
另外,我們的產(chǎn)品設(shè)計師如果依據(jù)「大部分商家」和「一般情況下」去規(guī)定產(chǎn)品設(shè)計,也是一個壞習(xí)慣。
比如,「一般情況下商家的簽到活動都是持續(xù)的」,于是產(chǎn)品設(shè)計師就把「獎品被搶完」寫成了「獎品被搶完,下次早點來」。這是個典型的壞習(xí)慣案例,「下次早點來」不只是多余的,還是錯誤的。如果某個商家的活動就這一次呢,你強行加了一個「下次早點來」對這個商家來說不就是個 bug 嗎?還是那句話:不能因為多少商家都這么用,我們就要求所有商家這么用。
但是今天在中國幾乎沒有成熟的 to.B 產(chǎn)品經(jīng)理,所以大部分的同學(xué)沒有這樣的習(xí)慣,來了就把功能下線了。然后每次問,每個人都要重新說一遍,不厭其煩。所以我們今天就專門把所有產(chǎn)品經(jīng)理叫到一起說一遍。說完了我們還會把內(nèi)容做成手冊,大家可以理解,這就是有贊產(chǎn)品設(shè)計的法律,我們會把它上升到非常高的高度來看待這個問題。
有贊這家公司的所有做事方式、所有思考,以及所有出發(fā)點,都是基于我們業(yè)務(wù)。而我們的業(yè)務(wù)是基于什么?我們的戰(zhàn)略又是基于什么?都是基于我們長期的使命和愿景,所以我必須要給大家回顧一下有贊的使命和愿景。
我們的使命是幫助每一位重視產(chǎn)品和服務(wù)的商家成功?!该恳晃弧购汀干碳页晒Α故俏覀冏钪匾年P(guān)鍵詞,我們要服務(wù)的是每一位商家,然后幫助每一位商家成功,但是為了整個生態(tài)的健康,那些不重視產(chǎn)品和服務(wù)的商家,我們是(可以)不服務(wù)的。所以我們在產(chǎn)品設(shè)計原則上,在產(chǎn)品的一些功能的選擇上,如果這個功能做完了會導(dǎo)致商家不重視產(chǎn)品和服務(wù),我們是不會/能做的。
舉個例子:消費者購買之后(可以)有一個評價,我們的購物評價是要么開啟要么不開啟這個功能。我們不接受商家去刪購物評價,因為商家一旦可以刪了消費者的差評,他就很可能不會那么重視產(chǎn)品和服務(wù)了。所以有贊永遠(yuǎn)不會提供刪除商品評價的功能,商家要么就不開啟??梢圆挥?,如果要用就要接受有人說你不好,商家可以去跟消費者溝通,溝通完了消費者自己改,但是我們不提供讓商家刪壞評價的功能。所以,這就是最基本的有贊產(chǎn)品設(shè)計原則,我們只服務(wù)重視產(chǎn)品和服務(wù)的商家,我們所有的產(chǎn)品設(shè)計原則都是需要這樣。
使命是一個很長遠(yuǎn)的事情,是這個公司活著的理由。而愿景是什么?愿景是我們認(rèn)為在可見的時間內(nèi),我們可以達(dá)成的目標(biāo)。我們在愿景里寫了兩條:
第一條,成為商家服務(wù)領(lǐng)域里最被信任的引領(lǐng)者。因為要成為「引領(lǐng)者」,所以我們對于每一個人的專業(yè)性要求很高;因為要成為引領(lǐng)者,所以我們愿意把我們的產(chǎn)品設(shè)計規(guī)范、產(chǎn)品設(shè)計原則、產(chǎn)品界面的東西拋到網(wǎng)上去。大家看到我們在有贊云上直接共享了,直接開源了我們很多很多產(chǎn)品設(shè)計的東西,是因為我們希望更多的同行一起探討一起分享,大家可以隨時訪問 design.youzan.com。我們愿意接受別人來學(xué),今天大家會看到甚至連一些跟在我們后面的所謂的競爭對手們都在抄我們,大家看到一些「SaaS」的操作后臺跟有贊長得一模一樣。沒事,大家在這件事情上胸懷應(yīng)該開闊一點,因為有贊要做引領(lǐng)者,所以我們就應(yīng)該有這樣寬闊的胸懷,就應(yīng)該把它共享出去。這也是為什么今天這一場分享會,我們是用「愛逛直播」面向全網(wǎng)直播。我們歡迎所有的同行一起學(xué)習(xí)一起交流,甚至我們接受所謂的競爭對手來抄我們,因為我們要做引領(lǐng)者。這就是我們自己基于這樣的愿景要去做的事情。
第二條,我們給這個組織還定了一個愿景,就是持續(xù)做一個 Enjoy 的組織。因為要持續(xù) Enjoy ,所以我們在做產(chǎn)品設(shè)計的過程中要好玩。
我們的產(chǎn)品里要想到一些好玩的東西,然后這家公司的氛圍也會好玩,我們給商家的活動也會好玩,這是因為我們的使命和我們的愿景。好多新同學(xué)不知道為什么有贊這家公司除了清明節(jié)什么節(jié)都過,因為我們要 Enjoy,所以是個節(jié)我們都會把它弄得好玩一點。這就是為什么我們要用購物直播的愛逛來做這次直播,因為它好玩,這是我們做這些事情的原則。
那么后面我講到的每一條有贊的產(chǎn)品設(shè)計原則都是基于我們的使命和愿景去做的,沒有任何一條跟它沒有關(guān)系,我們所有的思考點都是基于這個出發(fā)的,越在有贊這家公司呆的時間長的人,越能理解我們的每一條原則為什么那么做?為什么那么去設(shè)計?
說完這些大的原則,我們再去看看面對的情況。剛剛我們說所有的原則都是基于我們的目標(biāo)和我們面對的業(yè)務(wù)性質(zhì)、業(yè)務(wù)情況、市場情況,那么我們面對的市場情況是什么樣呢?我們是什么樣的業(yè)務(wù)類型呢?
我們?nèi)タ匆幌陆裉烊澜绻乐底罡叩?、最值錢的 SaaS 公司 Salesforce,這是 Salesforce 從上市之后到現(xiàn)在的股價,這家公司市值快 2000 億美元了。
Salesforce 做了十年才上市,上市的前五年股價幾乎沒動,因為 SaaS 需要慢慢積累,然后 Salesforce 上線了 force.com,相當(dāng)于有贊的有贊云,然后股價開始漲,一路在漲,中間還有個漲是因為 Salesforce 要做 AI。而且一路漲的這些年里很有意思的是,Salesforce 每一年的收入增長標(biāo)準(zhǔn)是 34%,這是全世界最牛的 SaaS 公司的成長。
我們再看和有贊微商城業(yè)務(wù)很像的 Shopify。
Shopify 做了五年上市,上市后的前三年股價幾乎沒什么動彈,從 2017 年開始漲,市值也快 200 億美元了。
一個 2000 億美元和一個 200 億美元的 SaaS 公司,早期都是這樣。所以我們一直說 SaaS 的業(yè)務(wù)是什么?SaaS 的業(yè)務(wù)是:首先要花 5 年以上時間做產(chǎn)品,然后再不斷地迭代和優(yōu)化產(chǎn)品。(因為有贊的使命是「幫助每一位」,所以未來可以有多大的規(guī)模對有贊來說非常重要)所以有贊的產(chǎn)品要先服務(wù)通用的客戶,再服務(wù)垂直行業(yè),再服務(wù)商家的個性化。在第二個 5 年時間,要同時開始培養(yǎng)銷售能力,獲取更多的客戶賺取更多的錢。然后,在第三個 5 年時間,我們發(fā)現(xiàn)所有的 SaaS 公司都在收購公司,最近 Salesforce 花了 190 億美元收購了一家做數(shù)據(jù)可視化的 SaaS 公司。為什么要收購其他公司呢?因為你手里有客戶了,你就可以給客戶賣更多的軟件,那些軟件不用自己做,可以買,買完以后賣給更多的客戶。基本上,每一個 SaaS 公司走完了這十五年,可以躺著再走十五年,這就是 SaaS 的業(yè)務(wù)類型。
而我們今天在中國市場所面對的不僅僅是像 Salesforce 和 Shopify 這樣,需要長時間去做產(chǎn)品,需要很長時間去做服務(wù),做企業(yè)服務(wù)之外,我們還面對三座大山。
第一座大山,是今天中國電商平臺的極端壟斷。Shopify 的商家有 50% 的流量來源于谷歌,其中 30% 到了 Shopify 的店里,還有 20% 去了 Amazon 的店里。而在中國,在百度上搜購物相關(guān)的詞全被淘寶投了廣告,所以中國的電商幾乎還沒有多少來自搜索引擎的流量,因為電商平臺太壟斷了。所以商家需要「一個有交易功能的獨立官網(wǎng)」的能力。在過去的很多年成長得非常慢,只有過去的兩到三年才看到,中國的商家開始希望有一個自己的帶交易功能的官網(wǎng)。這就是最近兩三年大家看到的,商家在電梯和公交站牌投廣告的時候,除了品牌商有一個搜索框到天貓旗艦店之外,還會有一個小程序的二維碼,或者是微信公眾號的二維碼,然后掃完二維碼打開的基本全是有贊的店。我可以很負(fù)責(zé)任地說,今天在整個微信生態(tài)內(nèi),真正重視產(chǎn)品和服務(wù)的品牌商家的小程序和公眾號的 H5 官網(wǎng),90% 以上都是用的有贊,尤其是有成交的。為什么?因為,我們有很好的風(fēng)控體系,我們有售后維權(quán)體系,今天中國只有這一家公司有超過 100 人的消費者維權(quán)團(tuán)隊,只有這一家公司有完整的擔(dān)保交易體系,只有這樣我們才能保障整個生態(tài)的健康,才能保障我們的商家是重視產(chǎn)品和服務(wù)的。但是這座大山我們跨了很久,還在越。
第二座大山,是商家在購買有贊的時候會認(rèn)為有贊能給他帶來增量的生意(以為用了生意一定會馬上就好起來,忽略了有贊是個工具,還需要自己用好這個工具),這是商家購買時候的動機。但是并非所有的商家都能把私域流量運營好,他購買了但他把有贊用好的能力不一定夠,活躍度不夠,這是我們今天在克服的問題,所以我們做了那么多的商家培訓(xùn),做了那么多的運營指導(dǎo)。
我們是從中小企業(yè)開始服務(wù)的,最近一年多我們開始做大客戶以后,每一年的大客戶比例都在不斷的增加,我們現(xiàn)在大客團(tuán)隊已經(jīng)有幾十人了,明年我們應(yīng)該有上百人的大客團(tuán)隊,我們會簽更多的大客。尤其是有贊云上線之后,我們可以幫每個客戶個性化,我們的大客戶會變得越來越多。但是我們的大盤畢竟是中小企業(yè)數(shù)量最多,這樣我們又要越的第三座大山是什么呢?是中小企業(yè)的閉店率、死亡率比較高。你好不容易獲得一個客戶,他卻因為自己其他的原因把生意做失敗了,你做的再好沒太大用,這是我們要越的三座大山。
所以,我用四個字總結(jié),就是:路遠(yuǎn)天黑。因為路遠(yuǎn)天黑,因為 SaaS 這個行業(yè)是這樣,所以我們必須把每件事做的非常認(rèn)真,我們要把我們的設(shè)計原則完全的貫徹下去,很多東西我們要整齊劃一的一直能走到那一天,要用非常穩(wěn)定的產(chǎn)品質(zhì)量的輸出,非常穩(wěn)定的用戶體驗質(zhì)量的輸出,這是為什么我們應(yīng)該比所有的公司都更重視這件事情的原因。所以,這是我經(jīng)常說的,這家公司產(chǎn)品理念就應(yīng)該是「聰明人在下笨功夫」。我們知道在什么地方可以耍聰明,但是我們要用的是長期能增長的笨功夫。這是我們的使命、我們的愿景、我們面對的這個行業(yè)特點決定的。大家會看到在官網(wǎng)上,我們公布了這些使命、愿景,和價值觀。
一家優(yōu)秀的公司、一家偉大的公司是敢于把對自己的要求和它的使命、愿景、價值觀公布在官網(wǎng)上的,因為我們公布了就是讓所有的客戶來監(jiān)督我們。我們在官網(wǎng)上沒有直接寫「幫助每一位重視產(chǎn)品和服務(wù)的商家成功」,我們寫了這個階段更具象、更能讓客戶理解的話。
首先我們告訴全社會,有贊是一個商家服務(wù)公司,我們幫助每一位注重產(chǎn)品和服務(wù)的商家私有化顧客資產(chǎn)、通過互聯(lián)網(wǎng)拓展更多客戶,并全面提高經(jīng)營效率、全面助力商家成功。為了讓客戶理解我們把它這樣解釋了,這是為什么官網(wǎng)上跟我們內(nèi)部講的不一樣的原因。
然后我們寫了我們要致力于成為商家服務(wù)領(lǐng)域里最被信任的引領(lǐng)者,并持續(xù)做一個 Enjoy 的組織。我們寫我們是一個商家服務(wù)公司,寫我們是從工具開始慢慢做生態(tài),寫我們的經(jīng)營理念是為客戶創(chuàng)造價值并獲取價值。為什么要獲取價值?因為我們要走很遠(yuǎn),如果我們不賺錢我們活不到那一天。我們要走很遠(yuǎn),所以我們做每一個產(chǎn)品都要考慮客戶價值和我們自己的商業(yè)價值,我們要追求更長期的經(jīng)營和追求持續(xù)的增長。所有的這些原因,都是因為我們自己的使命和愿景,以及我們面對的環(huán)境。
我今天專門再重新講一遍,是希望每一位有贊做產(chǎn)品的人能理解這每一句話背后的思考和原因。我們再說自己的戰(zhàn)略,這家公司會從一個 SaaS 公司變成一個大數(shù)據(jù)公司,變成一個人工智能公司。
我們有電商 SaaS ,除了電商 SaaS 我們還做了門店 SaaS ,然后我們在做有贊云,我們在嘗試分銷、嘗試有贊支付、嘗試有贊金融、嘗試有贊廣告業(yè)務(wù),我們未來有更多的增值業(yè)務(wù),這是我們一直在走的業(yè)務(wù)。我們今天在門店 SaaS 的業(yè)務(wù)剛剛開始,所以我們還有很遠(yuǎn)很遠(yuǎn)的路要走。
基于前面這些大背景,你會看到這家公司的所有的思考方式和思維理念,就是我們要給我們的客戶提供解決方案,來幫助我們的客戶在生意上成功。我們的客戶成功了,我們可以通過客戶的介紹獲得更多數(shù)量的客戶。因為我們服務(wù)了更多數(shù)量的客戶,我們才能更理解客戶的需求。因為我們更理解客戶的需求,我們才能把解決方案做得更好;把解決方案做得更好,客戶會更成功。我們一直在圍繞這樣的一個正向循環(huán),在做我們所有的布局、所有的思考、所有的產(chǎn)品、所有的投入。
所以你會看到,這家公司只會通過解決方案幫助客戶成功來獲取更多的客戶,不會在市場上拼命打廣告,不會在市場上拼命做補貼來獲取客戶。為了幫助客戶成功獲取更多客戶的目的,是為了我們更理解客戶的需求,所以我們更要重視今天已經(jīng)付費客戶的需求。我們不是不重視還沒有付費客戶的需求,我們更重視付費商家的需求是因為要理解現(xiàn)在商家的需求,把它做好,然后再去豐富解決方案,然后再來服務(wù)更多的客戶,這是我們整個的經(jīng)營理念。原則上,從有贊云正式上線之后,我們不接受客戶說「我的需求你們有贊滿足不了」。滿足不了只是時間問題。
這就是我們想要做的事情,這就是這家公司整體的思考方式和整體的設(shè)計理念。這個東西不只是產(chǎn)品在考慮的問題,也是公司的整個服務(wù)體系、銷售體系、產(chǎn)品運營體系、技術(shù)體系以及包括 HR 體系、財務(wù)體系都在用這樣的思維方式考慮所有的問題,這是我們整體的東西。
接下來我們再來說我們的設(shè)計原則,來得早的同學(xué)都見過這個設(shè)計原則,這是我們最早定的一版很粗的設(shè)計原則。設(shè)計原則是:說人話、產(chǎn)品應(yīng)該是低門檻的、產(chǎn)品盡量讓商家可以配置、產(chǎn)品要做到最小可用、所有的產(chǎn)品表達(dá)是一致性的,每一個商家盡量獨立。
這就是我們第一版的設(shè)計原則,接下來我要開始說未來幾年有贊的產(chǎn)品設(shè)計原則。
我想強調(diào)一下,剛才前面的內(nèi)容是全公司視角的。
公司每一個人的視角和思考方式。所以,接下來所有內(nèi)容都是「產(chǎn)品視角」。它不包含我們的商業(yè)體系和服務(wù)體系的視角。接下來我會提到產(chǎn)品研發(fā),產(chǎn)品研發(fā)不是指技術(shù)一定要這么干,是產(chǎn)品研發(fā)那個階段要做的東西。也會講到產(chǎn)品運營,也不是說運營部門一定要這么干,是產(chǎn)品人在產(chǎn)品視角上應(yīng)該怎么考慮運營問題,應(yīng)該是什么樣的原則。
在說產(chǎn)品設(shè)計原則之前,我先說基本的產(chǎn)品設(shè)計方法論。有三個部分。
第一部分,是產(chǎn)品設(shè)計的邏輯,發(fā)現(xiàn)問題、發(fā)現(xiàn)客戶的需求,然后去解決問題,然后再去驗證這樣的問題有沒有被解決,驗證完問題之后去發(fā)現(xiàn)新的問題,再去解決問題。所以每一個產(chǎn)品人在做的事情,其實就是發(fā)現(xiàn)問題、解決問題、驗證問題的整個過程。
第二部分,是產(chǎn)品人應(yīng)該知道自己的核心能力是什么?產(chǎn)品人的核心能力有三個:
第 1 個是一件事情能把它想清楚。任何一件事發(fā)生了,你能不能想到它底層的原因是什么?它的根本是什么?
第 2 個叫說得明白。因為產(chǎn)品是整條線的那個牽頭人,如果一個產(chǎn)品人不能把你的想法這件事情的東西說明白,就是能力很差,不存在表達(dá)能力很差的產(chǎn)品經(jīng)理。有人說張小龍的表達(dá)能力就不好,那是你們沒見過他講產(chǎn)品邏輯和思考的時候表達(dá)能力有多好。「不善」演講不代表表達(dá)能力不好,要的是把自己的思考清晰表達(dá)出來的能力,而非煽動能力。
第 3 個是要有能力快速地去試。這個試包括但不限于把產(chǎn)品搞上線讓用戶來用,也包括了可能做一個粗的原型,也包括了可能去做訪談,去做客戶的溝通。
然后再說產(chǎn)品人的設(shè)計方法,有贊的《產(chǎn)品設(shè)計原則》,根據(jù)客戶需求、有贊的使命和愿景、當(dāng)前生態(tài)環(huán)境,以及我們所處的發(fā)展階段擬定,它是每個有贊產(chǎn)品在設(shè)計過程中都要遵守的基本原則。我們還會定期對其進(jìn)行優(yōu)化和迭代。我們把設(shè)計方法分成了 4 個部分:產(chǎn)品定義、產(chǎn)品設(shè)計、產(chǎn)品研發(fā)、產(chǎn)品運營。
產(chǎn)品定義:首先是定義客戶和場景,面對什么樣的客戶,服務(wù)什么樣的場景,它的使用場景是什么;然后是價值,客戶價值和商業(yè)價值;再是全局,要做全局的整體的思考。
產(chǎn)品設(shè)計:基于場景拆分用戶的使用任務(wù),任務(wù)再會拆分為功能和交互、內(nèi)容和信息架構(gòu),最終把它呈現(xiàn)到界面上。
產(chǎn)品研發(fā):主要指界面設(shè)計、技術(shù)研發(fā),還應(yīng)該有用戶體驗及可用性測試的部分。
產(chǎn)品運營:產(chǎn)品上線前后的基于產(chǎn)品的運營計劃,產(chǎn)品的增長管理、市場營銷,跟用戶之間不斷的互動過程。
這 4 個部分不斷循環(huán)迭代,就是整個產(chǎn)品設(shè)計方法的過程。在這個過程中有贊的產(chǎn)品設(shè)計原則如下。
第一個,產(chǎn)品定義的產(chǎn)品原則。
第一點,用戶和場景是一切的基礎(chǔ)。
清晰的用戶畫像和使用場景,是整個產(chǎn)品的基礎(chǔ)條件。
在有贊做產(chǎn)品,如果你不能說清楚這個項目你思考的核心使用場景,它的用戶畫像,你什么都不可能做好。所以用戶畫像和使用場景是最基礎(chǔ)的東西。
第二點,找到用戶價值和商業(yè)價值的結(jié)合點。
定義一個新的產(chǎn)品時必須找到用戶價值和商業(yè)價值的結(jié)合點,同時能夠滿足用戶價值和商業(yè)價值的需求通常是最優(yōu)質(zhì)的需求。
你在定義一個新的產(chǎn)品時必須找到用戶價值和商業(yè)價值的結(jié)合點,不是所有的用戶需求都要今天滿足,因為如果那個用戶需求跟商業(yè)價值之間不能契合上,它的優(yōu)先級可能就會被降低。
我們?nèi)プ鲆患虑?,這件事情有兩個軸,一個軸就是用戶價值,一個軸是商業(yè)價值,我們要找到這兩個軸里最契合的那個點,然后那個事情的優(yōu)先級才是最高的,這就是最基本的原則。
舉個例子:假如微信公眾號的應(yīng)用很淺,要點公眾號菜單打開一個 H5 , H5 的交互也不那么好。如果把它搞一堆組件,把它做成原生的小程序,那體驗是不是更好呢?做了小程序之后,用戶的記錄還能夠被留存下來,還能找到用過的小程序,小程序的內(nèi)容還可以被很多人搜索,那是不是更好呢?這是基于用戶體驗來說的。但是基于用戶的體驗和用戶的價值之后,是不是一定要做它,還要考慮對于微信的商業(yè)價值是什么,讓用戶的體驗更有粘性?讓場景能擴張?商業(yè)上可以讓內(nèi)容更封閉在微信的生態(tài)內(nèi)?商業(yè)上打造一個新的閉環(huán)游戲生態(tài)?我們不知道這些是不是騰訊真實在考慮的決策原因,但我可以肯定每一個決策的背后都是基于用戶價值和商業(yè)價值這兩個點。
有贊做所有的事情,決策的背后也是基于這兩個點,有很多客戶提各種需求,我們應(yīng)該先看客戶是誰?畫像是什么樣子?這些需求的場景是什么?滿足這些需求的價值有多大?然后再看如何在這件事情上獲取商業(yè)價值,商業(yè)價值不代表一定是錢,它可能還有更多商業(yè)可期的東西。所以,任何決策的背后都應(yīng)該是這樣,如果做一件事只能給用戶創(chuàng)造價值,商業(yè)價值是損失的,這件事優(yōu)先級一定不高;如果一件事你只能夠獲取到商業(yè)價值,對用戶是沒有價值的,這件事情可以不做,這是有贊這家公司的基本原則。
第三點,設(shè)計可持續(xù)正向增長的產(chǎn)品模式。
產(chǎn)品模式應(yīng)該是可持續(xù)的、長期的、正向增長的,隨著用戶的使用產(chǎn)品價值會越來越高,業(yè)務(wù)增長會越來越好,成本增長不斷下降。并且,給老產(chǎn)品帶來正向增長的新產(chǎn)品,要比只利用老產(chǎn)品來補給的新產(chǎn)品要好。
你不能設(shè)計出來一個產(chǎn)品,那個產(chǎn)品是負(fù)向增長的,要設(shè)計一個產(chǎn)品讓用戶用完之后會有更多人來用,會帶動更多的正向的收獲,會獲得更多正向的需求,會帶動更多正向的收入,會帶動更多正向的客戶成功。而如果你做一個產(chǎn)品,只能解決短期的問題,不能長期正向循環(huán)正向增長,那這就不是一個好的產(chǎn)品。我們做任何一個產(chǎn)品任何一個功能任何一個業(yè)務(wù),它都應(yīng)該是可持續(xù)的、長期的、正向增長才是最好的。
在產(chǎn)品設(shè)計階段,有三個產(chǎn)品設(shè)計原則。
第一點,首先要是能夠最小可用的全場景閉環(huán)。
商家端的產(chǎn)品要做成全場景、完整業(yè)務(wù)鏈路的閉環(huán),因為任何一個環(huán)節(jié)的缺失和不完善都會導(dǎo)致商家的生意無法正常運轉(zhuǎn)。
這里的關(guān)鍵詞是「最小可用的全場景閉環(huán)」,最關(guān)鍵的詞是我們和 to.C 場景完全不一樣的,就是「全場景閉環(huán)」。to.C 的場景不是全場景閉環(huán),你會發(fā)現(xiàn)做 to.C 的業(yè)務(wù)經(jīng)常會出現(xiàn):要做一個業(yè)務(wù),大家開始一起頭腦風(fēng)暴,認(rèn)為要搞 100 件事,然后這個業(yè)務(wù)搞了 10 件事就敢上線了,上線就開始運營了,然后過了幾年公司都賺了錢了,業(yè)務(wù)都跑很順了,有很多用戶了,當(dāng)年的 100 件事才只做了 30 件,其中有 20 件是在那 100 件事里面的,還有 10 件可能不是那 100 件事里面的,是別的地方的。這就是 to.C 產(chǎn)品,可以快速迭代,小步快跑。而 to.B 的產(chǎn)品最小的那個快速迭代也得是全場景閉環(huán)的,想做一個 to.B 的業(yè)務(wù),然后列了 100 件事,對不起請先做夠 90 件,不做 90 件不是閉環(huán)不能上線。
舉個例子:我經(jīng)常講的,就是我們最早做收銀的時候,第一版沒有掛單功能。想一想一個收銀的產(chǎn)品如果有 100 個功能,掛單能排到前三十嗎?能排到前二十嗎?不能。于是我們犯了一個錯誤,就是沒做掛單功能就上線了。然后被客戶吐槽,說你們做的什么產(chǎn)品?連掛單都沒有。然后我們問客戶掛單重要嗎?客戶說重要啊。這就是做 to.B,必須要做到的。
然后我們做了一個掛單只能掛 1 單,客戶又反饋,「什么產(chǎn)品只能掛 1 單」。我們問:經(jīng)常掛很多單嗎?客戶說「偶爾要掛很多單」。
掛單的場景就是你在超市排著隊買東西,結(jié)賬的時候需要再買個東西,收銀員把你的東西放一邊,后面的人先結(jié)賬買單,把你的單選擇掛單,等你把東西拿回來之后,她再把那個單取出來,掃個碼再把之前的東西放進(jìn)去一起買單,這叫掛單。這場景豐富嗎?排的優(yōu)先級高嗎?不高,但是你沒有,這個產(chǎn)品就不能上線。
這就是 to.B 要做全場景、完整場景的閉環(huán),如果你做不到完整場景閉環(huán)你都不好意思上線。所以在這家公司,大家千萬不要帶著 to.C 的思維來做產(chǎn)品的初期那個最小可用,那個初期的最小可用上線了,商家罵一頓走了,銷售白忙活了,等再去賣的時候商家說哎呀有贊我知道,很爛的,收銀連掛單都沒有。所以一定要把閉環(huán)做完,做 to.B 就必須要這么干,我希望大家能理解。
第二點,每個商家都應(yīng)該是獨立的個性化的。
本質(zhì)上我們的服務(wù)是「在云上為每個客戶提供了一個獨立的產(chǎn)品」,商家都是獨立的,每一個商家都有個性化配置一切的權(quán)利。我們要盡全力去實現(xiàn)每一個商家的獨立和每一個商家的個性化,而不是規(guī)定他們一定要怎么樣。
軟件最早都是單機版,即使今天我們做了 SaaS ,其實也只是在云上給每一個客戶提供獨立的軟件,所以每一個客戶的商城都是獨立的,每一個客戶都有個性化他的商城的權(quán)利。如果成本可控的情況下,每一個功能都應(yīng)該是可配置的,有的人想把購買叫「立即購買」,有的人想把購買叫「擁有它」,你就應(yīng)該讓他可以去定義購買按鈕的文案。to.C 沒有人這么想過(因為一個產(chǎn)品都應(yīng)該是一個統(tǒng)一意志的),但是 to.B 就應(yīng)該是這樣,每一個商家都是獨立的,每一個商家都有個性化的權(quán)利,你要盡全力去實現(xiàn)每一個商家的獨立和每一個商家的個性化。
我見過很多 to.B 的產(chǎn)品上來就不被接受,就是因為他們不懂這樣的基本理念。比如,商家說我有這個需求,然后產(chǎn)品經(jīng)理說你應(yīng)該那么用,請問誰規(guī)定商家必須要那么用?
我給大家舉個例子:我給企業(yè)微信的產(chǎn)品經(jīng)理說了好多次。我說企業(yè)微信能不能有標(biāo)記未讀?原因很簡單,麥麥給我發(fā)的一條信息我看了,我判斷需要找一個稍微空一點的時間花幾分鐘回復(fù)他,我標(biāo)記一個未讀,隨后再找回來回復(fù)他。企業(yè)微信的產(chǎn)品經(jīng)理回復(fù)我說:企業(yè)微信里有個功能叫待辦事項,你應(yīng)該把它加入到待辦事項。我很無語。
這就是不會做 to.B 產(chǎn)品的人的思維方式,他希望和規(guī)定用戶的行為,但是 to.B 不應(yīng)該這么干。微信可以這么干,但是企業(yè)微信就不該這么干,這是基本的 to.B 的思維。
第三點,產(chǎn)品結(jié)構(gòu)及呈現(xiàn)方式需要可延續(xù)可拓展。
一個被信任的商業(yè)服務(wù)產(chǎn)品首先應(yīng)該是持續(xù)穩(wěn)定的,產(chǎn)品的結(jié)構(gòu)和呈現(xiàn)方式一旦確定下來,就不能輕易改版。這要求我們的設(shè)計需要面對形勢變換的時候可延續(xù),面對功能和服務(wù)增加的時候可拓展。
一個好的 to.B 產(chǎn)品,有贊微商城的產(chǎn)品后臺界面結(jié)構(gòu)、產(chǎn)品架構(gòu),從 2015 年開始就沒有改過了。2015 年我們上線的時候就說我們要上線一個版本,這個版本的產(chǎn)品架構(gòu)在未來永遠(yuǎn)不改。一個 to.B 的產(chǎn)品不要沒事折騰改版,改版了客戶就不會用了, to.C 產(chǎn)品要搞點花樣,有點爭議沒關(guān)系,to.B 產(chǎn)品沒事兒不要動它。所以很多人知道,這家公司如果你要改商家管理后臺的導(dǎo)航必須我通過,是因為我不希望你改。
因為它需要一直可延續(xù),那么它就要求你在設(shè)計的時候是縱向的,豎著的導(dǎo)航,因為它有拓展空間(豎著有滾動條,橫著沒有)。
還有我們的很多產(chǎn)品經(jīng)理不理解,為什么要堅持有贊微商城的后臺概況、店鋪、商品、訂單都長這樣,商家會那么找嗎?我告訴你:只有中高端商家會跑到里邊二級導(dǎo)航找,大部分商家都會從首頁點擊,商家基本上不太會理解你的架構(gòu),所以我們那個產(chǎn)品架構(gòu)是給誰用的呢?是給在座的有贊產(chǎn)品經(jīng)理們用的。為什么?因為讓你不要亂放,告訴你商品就放在商品這里,訂單就放在訂單這里,店鋪就放在店鋪這里。確保這個產(chǎn)品有一萬個功能的時候產(chǎn)品結(jié)構(gòu)還是穩(wěn)定的,常用的東西在首頁可以找到,不常用的在二級導(dǎo)航里面可以找到,或者直接搜索到。
所有的導(dǎo)航和所有的內(nèi)容,都應(yīng)該是商家的生意,你不要去搶他的,而我們跟商家之間的生意,放在設(shè)置里面,設(shè)置里面有一個專門的版塊是我們跟商家之間的關(guān)系,剩下都是商家自己管理自己的生意,我們在給商家做的是一個工作臺,整個有贊打開概況頁只有內(nèi)容區(qū)左上角你買的什么版本,是有贊跟他之間的生意。設(shè)置里面二級導(dǎo)航最下面的有贊服務(wù),是有贊跟商家之間的關(guān)系,剩下都是商家自己的,你不要攙和進(jìn)去。
舉個例子:最早我們把商家交的保證金,商家在有贊這里還有多少有贊幣,都放在資產(chǎn)里面了,這是不對的。資產(chǎn)是他的生意,不是你給他的東西,這是我們要做的規(guī)范。這些規(guī)則,商家懂嗎?他不懂,他在乎嗎?不在乎,在座的各位必須在乎,因為今天你有這么多功能,未來有一天這個產(chǎn)品有一萬個功能的時候,你現(xiàn)在開始不在乎,未來就崩了。
我有一個做證券軟件的朋友,去年我在南京做產(chǎn)品培訓(xùn)的時候他來找我,說白鴉我準(zhǔn)備給我的軟件改了,我的后臺得改了,沒法干,我們有一萬個功能,太難用了,我準(zhǔn)備改它,改得倍兒簡潔。我說:別,不需要那么簡潔,需要穩(wěn)定,因為你有那么多功能甩不掉,是因為你要服務(wù)那么多的客戶,就需要那么多的東西,所以你需要一個穩(wěn)定的產(chǎn)品架構(gòu)。
還有為什么你們會發(fā)現(xiàn),我們的后臺看不出來是我們的后臺,因為我們沒有在我們的后臺放有贊 logo。很多軟件公司,把左上角的 logo 放成自己公司的 logo。一個商家在他的后臺天天看有贊的 logo,他為什么要看見你的 logo?他不需要看見你的 logo。我們的 logo 在哪?我們的 logo 在內(nèi)容區(qū)最底下灰色放在那,那是一個版權(quán)聲明而已。
這是我們做事情的原則,因為你要考慮你的用戶要什么。還有比如阿里媽媽,然后你會發(fā)現(xiàn)阿里媽媽的后臺花里胡哨的,阿里媽媽的每一個商家后臺產(chǎn)品長的都不一樣。一個商家的廣告投放后臺搞那么多花樣干嘛?
所以我們前天又梳理到凌晨兩點多,然后規(guī)定接下來我們給商家用的 SaaS 產(chǎn)品,所有的布局方式都必須一致,左右布局,然后一級導(dǎo)航、二級導(dǎo)航、三級導(dǎo)航內(nèi)容區(qū)規(guī)則必須一模一樣,因為任何一個商家用有贊的所有產(chǎn)品,習(xí)慣應(yīng)該保持一樣,你不要讓他用 A 產(chǎn)品用 B 產(chǎn)品用 C 產(chǎn)品都要重新學(xué)習(xí)一遍,這是不行的。
不過,我們的廣告投放后臺、商家資產(chǎn)的后臺,它是一個平臺型產(chǎn)品(這不是商家管理自己店鋪和消費者互動的后臺,而是商家跟有贊之間互動的后臺),雖然也要保持左右布局保持體驗一致,但是我們要做品牌露出,因為要聲明你在用有贊支付,這是你在有贊支付的后臺,你在管理你在有贊支付的資產(chǎn)。
有贊以后給商家所有的后臺產(chǎn)品都必須左右導(dǎo)航,不接受上下導(dǎo)航,只有這樣商家用我們所有的產(chǎn)品的習(xí)慣是一致的,學(xué)習(xí)成本是的。這就是我想說的:產(chǎn)品結(jié)構(gòu)和呈現(xiàn)方式需要可延續(xù)可擴展。
然后我們再說產(chǎn)品研發(fā),今天主要說界面。
第一點,穩(wěn)定壓倒一切。
沒有任何東西比 SaaS 的穩(wěn)定重要,宕機了再好的產(chǎn)品都沒用。會影響到系統(tǒng)穩(wěn)定的事情不能做。
如果你要做一個功能,這個功能可能會影響到系統(tǒng)的穩(wěn)定性,不要做。因為沒有任何東西比 SaaS 的穩(wěn)定重要,如果你宕機了,你做得再好都沒用。
這也是為什么這家公司應(yīng)該是全世界唯一一家把恥辱時刻會出現(xiàn)的東西做成吉祥物的原因,為什么霸王龍是有贊的吉祥物?為什么辦公區(qū)里都是霸王龍?是我們想提醒每一個人:穩(wěn)定是 SaaS 的第一要務(wù)。宕機了你什么都不是,你不能宕機,所以穩(wěn)定壓倒一切。
如果你做一個產(chǎn)品,產(chǎn)品呈現(xiàn)上也要穩(wěn)定,而且這個穩(wěn)定應(yīng)該在方方面面持續(xù)保持。商家為什么覺得你靠譜?你怎么樣成為最被信任的引領(lǐng)者?你怎么做到最被信任?我們今天說一個商家靠譜,那家店在那里開 10 年了口味沒變過,然后你覺得他靠譜,對不對?
正是因為這樣的原因,所以我不希望我們今天變明天變。所以這也是為什么我們每年兩場發(fā)布會是固定的, MENLO 在五月初,年底有感恩答謝會。 MENLO 發(fā)布會所有的設(shè)計主題都一定圍繞著電燈,可以每年換個電燈的創(chuàng)意,但是必須是圍繞著電燈,這故事要持續(xù)講下去,才會穩(wěn)定被信任。MENLO 發(fā)布會的門口一定會看到愛迪生的那張圖片,這就是我們要做的,一定會在整個 MENLO 發(fā)布會的地方能看到那個燈塔的圖片,這就是持續(xù)做一個被信任的品牌要堅持的穩(wěn)定,不止是系統(tǒng)穩(wěn)定,有很多地方要保持「穩(wěn)定」。
第二點,說人話。
說對方能聽懂的話,做用戶能用明白的產(chǎn)品。不耍專業(yè),不設(shè)置門檻。
說人話是這家公司的基本價值觀,大家都懂,我想說另外一個,拒絕設(shè)置專業(yè)門檻。今天有很多的產(chǎn)品經(jīng)理有一個惡習(xí),就是沒事喜歡取名字,沒事習(xí)慣造詞。我最害怕和做廣告的人打交道,廣告行業(yè)有無數(shù)的詞,就好像今天中國傳統(tǒng)文化圈子一樣,非得搞一些詞,搞一定的門檻,這是不對的。所有的產(chǎn)品名字、所有的詞、所有的用語都應(yīng)該是人話,都不應(yīng)該設(shè)置門檻,這也是為什么我們的產(chǎn)品取名好像特別沒文化,你看我們產(chǎn)品名字「有贊零售」、「有贊美業(yè)」、「有贊教育」顯得特別特別沒文化,人家都叫「智慧XX」、「XX生意寶」,但是我們就叫這樣的名字,因為我叫了這樣的名字可以十年二十年不改名字,客戶一看就懂它是什么。但凡要占短期的 PR 和市場營銷宣傳的便宜,設(shè)置那么高的門檻,商家還要去理解:哦?你那個什么生意寶是什么?哦,原來是這樣的啊。
還有我不知道你們現(xiàn)在有沒有在堅持,我想強調(diào)一下,我們的二級域名不要用英文,有贊零售就是 lingshou.youzan.com,然后每一個產(chǎn)品的二級域名都應(yīng)該是拼音且每一個產(chǎn)品的二級域名都要考慮拼錯的時候也可以打開(必須 linshou\lingshou\linsou\lingsou 都應(yīng)該可以跳轉(zhuǎn)到有贊零售的二級頁面),這是取二級域名的原則。沒事搞個英文,你覺得商家知道那個英文是什么意思嗎?這就是要知道怎么是說人話,說人話在每一個細(xì)節(jié)里。
第三點,永遠(yuǎn)保持一致的表達(dá)方式。
每一處給用戶表達(dá)的內(nèi)容,都需要是一致的,不做多樣化。從開始到結(jié)束,從 A 產(chǎn)品到 B 產(chǎn)品,從界面視覺到文字內(nèi)容,以及標(biāo)點符號。
賬戶就叫賬戶,登錄就叫登錄,在 A 產(chǎn)品是這樣,在 B 產(chǎn)品也是這樣。前天檢查到凌晨兩三點鐘,還發(fā)現(xiàn)有的產(chǎn)品叫通用設(shè)置,有的產(chǎn)品叫高級設(shè)置,有的產(chǎn)品叫我的設(shè)置,這是不對的,要叫通用設(shè)置所有的產(chǎn)品都要叫通用設(shè)置,名字就需要被固定化。如果你覺得這個設(shè)置要改個名字,我們商量商量全線一起改,這是你要保持的一致的表達(dá)。還有,to.C 的產(chǎn)品可以花樣很多,to.B 的產(chǎn)品不需要那么做,所以一定要有一致的表達(dá)。
然后我們再去說產(chǎn)品運營的部分。
第一點,不可減少,每個用戶都重要。
新產(chǎn)品不能比老產(chǎn)品的功能少,不應(yīng)該輕易下線產(chǎn)品功能,不降低服務(wù),不讓少數(shù)服從多數(shù),每個用戶的需求和習(xí)慣都是重要的。
就是我前面講到的,to.B 的產(chǎn)品不接受你把一個功能下線,永遠(yuǎn)不要去減少你的東西。
第二點,先有,再,然后易用,最后好看。
有是最基礎(chǔ)的體驗,有總比沒有要好。然后使用效率要很高,再然后才是要好用易用,最后才是要好看。當(dāng)然,丑也是不行的。
有是最基礎(chǔ)的體驗,這個功能有沒有?先要有,然后要。因為你做的是一個商家工作臺,他使用效率要很高,然后才是要好用,要易用,上來就能用,上來就會用,然后才是要好看。
to.B 的產(chǎn)品不應(yīng)該是上來搞好看,沒用的。我們不需要那么好看的商家后臺界面,簡潔是最重要的,所以我們左右導(dǎo)航且顏色都是灰的,不要搞那么飽和度很高的顏色,商家后臺不需要那么跳,黑白灰配一些色,讓它舒服一點就好了。當(dāng)然「有贊美業(yè)」可以特殊,美業(yè)本來就很時尚,但是美業(yè)也不要用大紅那么跳的顏色,這是基本的。好看沒有好用重要,好用沒有重要,因為它是商家后臺,天天都在用,他學(xué)習(xí)一下未來效率高很重要。沒有有重要,先要有。
問:和易用有什么區(qū)別?
答:,指的是長期使用效率;易用通常指的是用戶是否容易學(xué)習(xí)容易上手。舉個例子:我們做水電煤繳費,每個月用一次,每次用都忘了上次學(xué)習(xí)的操作技能,那么應(yīng)該注意「容易學(xué)習(xí)容易上手」,符合「別讓我思考」的邏輯,寧愿多點一次也別讓他多想。我們做商家后臺「發(fā)貨」和「收銀」功能,每天都用,用很多次,應(yīng)該注重「使用效率高」,即使要學(xué)習(xí)一下,也得保證可以操作,不要每次都要點 N 多回才能完成一個操作。
第三點,持續(xù)關(guān)注自己的「孩子」,哪怕她已經(jīng)嫁人。
作為一個產(chǎn)品人,應(yīng)該持續(xù)關(guān)注自己做過的產(chǎn)品,哪怕這個產(chǎn)品已經(jīng)不歸自己管了,也應(yīng)該經(jīng)常關(guān)注并思考她的發(fā)展和進(jìn)化。
我覺得這是任何一個產(chǎn)品人都應(yīng)該有的基本精神,你既然做了一個產(chǎn)品,這個產(chǎn)品就是你的孩子,你就應(yīng)該持續(xù)關(guān)注她,哪怕這個產(chǎn)品你做完了,你不再負(fù)責(zé)了,轉(zhuǎn)到別的部門了,別的人在負(fù)責(zé),你都應(yīng)該時不時的去看看她。因為你做出來的產(chǎn)品就是你的孩子,如果你的女兒嫁人了,你是不是就不聯(lián)系她了?不會吧。
我很負(fù)責(zé)任地說,我做過的支付寶產(chǎn)品、百度的產(chǎn)品,到現(xiàn)在我偶爾還想回去看看她,看看她被改成什么樣子了。我覺得我骨子里至少還有那種精神,這是一個產(chǎn)品人最基本的精神。
第四點,不騷擾用戶,不群發(fā)。
我們的責(zé)任是幫助商家成功,不是為了讓我們自己的生意更成功,我們沒有權(quán)利去為了自己的商業(yè)目的不斷騷擾用戶。用戶通常不看系統(tǒng)消息,群發(fā)信息起不到溝通作用。
在這家公司里,任何給用戶群發(fā)信息都必須我批準(zhǔn),而我不會有時間審批,發(fā)郵件我看都不會看,你發(fā)微信我也不會理你的。如果你非得說不發(fā)會死,會出現(xiàn)大問題,那么自己想辦法找我,找的第一次我理都不理你,因為你不要給商家發(fā)信息,人家用你的后臺做生意,你沒事給他群發(fā)什么信息呢?為什么要去騷擾他?你的責(zé)任是幫助他的生意更成功,你的責(zé)任不是為了讓你的生意更成功。
還有些基本的常識,沒有在我們的原則里。但是我會發(fā)現(xiàn)有一些新的產(chǎn)品經(jīng)理,或者在別的沒有底線的公司做過產(chǎn)品的人帶來了一些惡習(xí),這些基本的常識我把它重復(fù)強調(diào)一下,我不認(rèn)為這是我們的特殊原則。上面十三條很多是我們的特殊原則,不是全行業(yè)通用的,剩下內(nèi)容是一些做產(chǎn)品要有的基本常識。
第一點,沒有人會看公告。
你要清楚,沒有用戶會看公告,你不要搞一個產(chǎn)品改完了公告上完了就結(jié)束了,然后商家說這怎么改了?你理直氣壯地說我發(fā)過公告呀。商家不會看公告的,沒有用戶會看公告,不要依賴公告告訴用戶你的產(chǎn)品變了,發(fā)生了什么變化,你要用你的產(chǎn)品設(shè)計能力讓他感受到你發(fā)生了什么變化。當(dāng)然,也別傻乎乎的在產(chǎn)品上專門搞個圖層提醒他「我變了,看到?jīng)]」,你要知道在你的新用戶眼里不存在「變了」,你就是他的第一眼。
第二點,沒有人會看系統(tǒng)消息和群發(fā)短信。
不要覺得你上線了一個改變了的東西,或者你改變了一個政策,群發(fā)一條系統(tǒng)公告問題就解決了,解決不了,基于用戶體驗他就不知道去看你發(fā)的信息。當(dāng)然有的時候法律上需要,你可能還是得發(fā),但是基于用戶體驗設(shè)計,你不要以為你發(fā)了他就會看,他不會看公告的,他不會看系統(tǒng)消息的,他也不會看你群發(fā)消息的,你的產(chǎn)品讓用戶感知到改變不要靠這些,沒有用,他不看。
第三點,幾乎沒有人會改默認(rèn)設(shè)置。
這也是最基本的素養(yǎng),我經(jīng)常聽大家討論產(chǎn)品,討論著說,哎呀,到底通常他們更多人會用 A 呢?還是用 B 呢?默認(rèn)該用 A 呢還是該用 B 呢?突然有一個人冒出來說:沒關(guān)系,加個高級設(shè)置,讓他可以從 A 設(shè)置到 B。這么做并不能解決問題。
幾乎沒有人會改默認(rèn)設(shè)置的,只有高級用戶會改,所以當(dāng)你的一個產(chǎn)品模式有 N 種設(shè)置的時候,你一定要花最多精力去想默認(rèn)設(shè)置該是哪一個?因為你默認(rèn)是什么樣他就會那么用。舉個例子:我們最早為了強調(diào)有贊擔(dān)保很重要、很特殊,有贊擔(dān)保上線的第一版,我們用了一個綠色的底。然后就有人說我們做一個白色的底,不那么丑的,商家可以去改設(shè)置。常識告訴我們商家是不會改默認(rèn)設(shè)置的,所以我們把默認(rèn)設(shè)置改成白色,如果有商家覺得提醒別人有贊擔(dān)保特別重要,他要改成帶顏色的底,他可以去改設(shè)置,高級商家可以去改,默認(rèn)新店都是白色的底。
但是我們并沒有把老店鋪改過來,因為商家是獨立的,你默認(rèn)綠色的底他用了,你就沒有權(quán)利幫他改成白色,即便幾萬個商家里面只有 10 個商家喜歡綠色,你憑什么給他改成白色?所以我們要想辦法告訴幾萬個商家「這個有點難看,你可以把它改成更好看的顏色」,而不是強行把它改了,你沒有權(quán)利不能私自去改他的東西也是基本原則。所以默認(rèn)設(shè)置非常非常重要,你一定要花最多的精力去想,這個東西有三個設(shè)置默認(rèn)設(shè)置成哪一個?非常非常重要,但是這件事不是所有產(chǎn)品人都具備這樣的素養(yǎng)。
第四點,習(xí)慣路徑的設(shè)計,比少一次點擊重要。
絕大部分做產(chǎn)品的人都看過那本書,中文名叫《點石成金》,英文名叫《Don’t make me think》,書中說可以多點一次,每次都不需要思考,這是基本原則。所以少點一次多點一次沒那么重要,重要的是讓他形成習(xí)慣路徑。
舉個例子:微信不需要把「朋友圈」拉到一級導(dǎo)航。雖然你進(jìn)朋友圈的頻率那么高,你每次進(jìn)朋友圈點擊「發(fā)現(xiàn)」再點進(jìn)朋友圈,但是微信就是不會拿到一級導(dǎo)航。因為這樣會給發(fā)現(xiàn)里面的其他頻道帶來很大的流量和商業(yè)價值,反正養(yǎng)成了用戶習(xí)慣,用戶體驗有沒有損失?有一點點,只一點點損失,可以接受。
我們有很多很多產(chǎn)品是一樣的,比如說切換店鋪,很多人習(xí)慣把重要的東西都擺到首頁,跟擺地攤似的,如果有一萬個功能呢?怎么擺。所以,你要設(shè)計他的使用習(xí)慣。
我們已經(jīng)設(shè)計了有贊商家的兩大流量入口,一個流量入口是概況頁,很多重要的、常用的東西放在那,那是個工作臺。還有一個入口我們已經(jīng)慢慢把它養(yǎng)成了,就是應(yīng)用市場。我們有這兩個流量入口就可以讓很多商家去發(fā)現(xiàn)一些東西,他可能不會點到訂單再點到里邊去,他會在首頁直接點待發(fā)貨訂單然后進(jìn)去發(fā)貨。
你要設(shè)計好他的路徑,這個路徑的設(shè)計還包含如果你在首頁上放的是廣告位,那個廣告位一定要更新,如果你不更新,他就把那個廣告位當(dāng)成一個導(dǎo)航用了,商家不會覺得只有左邊那個我們叫導(dǎo)航的東西是導(dǎo)航,他不會那么認(rèn)為的,如果廣告位總不更新,運營的位置總不更新,以后就不要更新了,因為他會把那個位置當(dāng)成他的導(dǎo)航。
再舉個特別有意思的例子,早年我在百度的時候,阿里巴巴的很多用戶,是在百度上隨便搜索一個詞,點百度右邊的廣告「找什么什么去阿里巴巴」,然后進(jìn)阿里巴巴,他永遠(yuǎn)都那么進(jìn),其實那就是他的習(xí)慣路徑,這個路徑依賴性非常非常強。
所以如果你能讓他養(yǎng)成習(xí)慣路徑,就可以讓他多點一下,沒關(guān)系,這是最基本的常識。
最后,以上每一條原則我們希望每個人都要熟悉起來。接下來的新人,需要通過這些產(chǎn)品設(shè)計原則的考試才能轉(zhuǎn)正。
中國有太少的企業(yè)服務(wù)公司了,所以我們這個行業(yè)能夠徹底站在商家或者企業(yè)角度思考的人也不多。希望有贊的《產(chǎn)品設(shè)計原則》是一個開始,能夠幫助到更多這個行業(yè)的產(chǎn)品人,因為我堅信:未來五年,中國最好的企業(yè)服務(wù)產(chǎn)品經(jīng)理絕大部分都坐在這里。當(dāng)然,我們還是非常缺產(chǎn)品經(jīng)理和體驗設(shè)計師,電商、零售、教育、美業(yè)、營銷、交易、會員、數(shù)據(jù)、支付、金融、云、中臺、風(fēng)控、廣告等方向都缺,如果遇到優(yōu)秀的產(chǎn)品經(jīng)理和體驗設(shè)計師可推薦,請大家把簡歷直接給到麥麥。(郵箱:joinus@youzan.com)
我也堅定地認(rèn)為未來三到五年,整個中國的商家都需要升級他們的經(jīng)營系統(tǒng),尤其是深度擁抱互聯(lián)網(wǎng)。那么,這個行業(yè)最缺的就是需要人給他們提供足夠好的產(chǎn)品,需要能夠真正站在商家角度思考,真正有企業(yè)服務(wù)視野的產(chǎn)品人。所以,在座的各位一定會成為未來這個行業(yè)最值錢的人。
文章來源:優(yōu)設(shè)
當(dāng)界面設(shè)計定稿之后,設(shè)計師需要對圖標(biāo)進(jìn)行切片,提供給開發(fā)工程師。切圖與標(biāo)注是為了能夠滿足開發(fā)人員對于效果圖的高度還原需求,直接影響到工程師對設(shè)計效果的還原度,并且也是設(shè)計師重要的輸出物之一。合適、精準(zhǔn)的切圖可以最大限度地還原設(shè)計圖,起到事半功倍的效果。
通常我們只需要對 icon 與圖片進(jìn)行切圖即可,文字、線條和一些標(biāo)準(zhǔn)的幾何形狀是不需要切圖的,例如搜索框只需要在標(biāo)注中描述它的尺寸、圓角大小、背景色值、不透明度即可,開發(fā)工程師可以用代碼實現(xiàn)這種效果。
桌面圖標(biāo)切圖輸出
App 的桌面圖標(biāo)會被運用在很多不同的地方,比如手機桌面、APP store、手機的設(shè)置列表,所以 app 桌面圖標(biāo)需要很多個不同尺寸的切圖輸出。兩個平臺對應(yīng)的桌面圖標(biāo)設(shè)計輸出尺寸也不盡相同,在輸出的時候要把雙平臺的尺寸全部輸出切圖。桌面圖標(biāo)切圖只需要提供直角的圖標(biāo)切圖即可,手機系統(tǒng)會自動生成圓角效果。
系統(tǒng)圖標(biāo)切圖輸出
一套圖適配雙平臺:iOS平臺(iPhone 6plus版本除外)和安卓平臺公用 44*44px 切圖素材,即可實現(xiàn)一套切圖適配兩個平臺的開發(fā)。
適配大屏幕:為了適配 iPhone 6plus、iPhone 7plus,單獨切一套比原有 44*44px 切圖大 1.5 倍的切圖,即 66*66px 大小的切圖。
APP內(nèi)功能圖標(biāo)
圖標(biāo)是可以有留白區(qū)域的,建議圖標(biāo)尺寸盡量不要過多。
圖片類切圖主要是指啟動頁、新手引導(dǎo)頁、默認(rèn)提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的尺寸大小,以便于工程師開發(fā)使用。另外一般這些切圖的文件較大,在切圖過程中需要控制切圖文件的大小。
全屏類切圖
局部類切圖
動效元素切圖一般是指在 app 中加載動效所需要的切圖元素。
gif 動圖切圖一般分為三種:
一是只需要給到 gif 圖動效的部分即可。
△ 城易logo
二是,導(dǎo)出序列圖片壓縮打包給開發(fā)人員。
三是導(dǎo)出 json 。
Airbnb 開發(fā)了一款動效神器:Lottie,這是一個將 After Effects 動畫提供給任意一個 iOS,macOS,Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件,以 JSON 文件的形式進(jìn)行輸出。Lottie 通過 JSON 格式下載動畫數(shù)據(jù)并實時提供給開發(fā)者。
相關(guān)鏈接
如何導(dǎo)出json動畫文件
打開 AE,首選項 – 常規(guī),將允許腳本寫入文件和訪問網(wǎng)絡(luò)選項勾選上。
窗口 – 擴展 – Bodymovin,選擇好合成和保存路徑后,點擊 Render 導(dǎo)出 data.jason 文件,再把該文件交給 iOS 開發(fā) (其他同理),具體如下圖:
這里設(shè)置選擇 Demo ,可以導(dǎo)出 html 文件,在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉(zhuǎn)換成圖形形狀。
導(dǎo)出文件:
在線測試結(jié)果:可以直接上傳 json 文件,可以提前知道動畫是否有問題,然后再交付給開發(fā)。
網(wǎng)址:https://nicolasjengler.github.io/bodymovins-json-tester/dist/
1. 通用切圖命名:組件_類別_功能_狀態(tài)@2x.png
舉例:tabbar_icon_home_default@2x.png(對應(yīng)中文:標(biāo)簽欄_圖標(biāo)_主頁_默認(rèn)@2x.png)
2. 模塊特有切圖命名:模塊_類別_功能_狀態(tài)@2x.png
舉例:bill_icon_search_pressed@2x.png(對應(yīng)的中文為:賬單_圖標(biāo)_搜索_ 默認(rèn)@2x.png)
3. 常用英文單詞表
現(xiàn)如今市場已有很多設(shè)計交互的平臺,如:國內(nèi)的墨刀、藍(lán)湖、摹客等,國外的 Figma、invision 等,各自都有優(yōu)秀的特點,既滿足交互需求,又能有標(biāo)注切圖功能,選擇適合自己團(tuán)隊的工具與開發(fā)一起協(xié)作即可。
1. Figma
支持 sketch 導(dǎo)入,F(xiàn)igma 也像 Zeplin 一樣,標(biāo)注頁面間距與尺寸,并且支持各種圖片格式、尺寸、形態(tài)輸出,開發(fā)人員也有相應(yīng)的代碼可用參考,分享鏈接即可。
2. 墨刀
支持 sketch 上傳頁面至客戶端,分享鏈接即可。支持多種切圖格式下載,開發(fā)人員也有相應(yīng)的代碼可用參考,操作簡單清晰。
3. 藍(lán)湖
支持軟件 PS、sketch 上傳在線標(biāo)注,在設(shè)計源文件上切好圖片,開發(fā)人員可在線上下載,且有相應(yīng)的代碼可用參考,分享鏈接即可。
文章來源:優(yōu)設(shè)
藍(lán)藍(lán)設(shè)計的小編 http://www.yvirxh.cn