<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          敏捷用研的最佳實踐—如何讓好的設計快速落地

          資深UI設計者

          2019年7月20日,UXRen北京舉辦了《如何通過體驗設計賦能產品增長》的沙龍分享,本文基于嘉賓 何曉頔(搜狗高級用戶研究工程師)的現場分享總結而成。

          何曉頔2015年開始從事用研工作,2018年加入搜狗,目前在搜狗搜索擔任用戶研究工程師;期間支持搜狗搜索相關產品的用戶研究工作,完成搜狗閱讀app、搜狗搜索app、搜狗圖片搜索改版研究,搜狗醫療搜索系列研究,搜狗翻譯app調研等項目;擅長全局思考問題,綜合考慮各方訴求,通過研究方法的熟練運用,需求的深度解讀,結果的產出,不斷提升用研的影響力及價值。

           

          沙龍筆記:

          1. 為什么要敏捷用研

          由于用研資源的緊張,傳統研究模式周期長,使得用研游離在項目邊緣,融入難,導致時效性跟不上整個項目的推進,出現信息不對等的情況,從而造成研究方向的偏差,而且研究結果也會和設計、產品的需求脫節,造成落地難的問題。

          敏捷用研可以很好的解決這個問題,它可以很好地融入在項目的各個階段中,能夠在3-5天內地完成調研需求,真正融入到整個項目的流程中,在每個階段都以結果導向的解決問題,形成每個階段的連接器。所以說他以用戶思維為核心,通過用研的驅動性,增加用戶在整個項目中的參與度和體驗感,不僅能夠實現成本的減少,還能提高響應的效率,實現信息層面的對等,還原用戶的真情實感,性價比高的同時還提升了用研的價值。

          敏捷用研可以在敏捷項目的各環節中發揮作用,而且在不同階段可以有針對性的解決問題。

          1. 概念驗證:
            在規劃階段可以進行概念的驗證,挖掘用戶需求,以矯正概念方向;
          2. 方案驗證:
            開發階段可以對方案進行驗證,對方案進行優化,提升效用;
          3. 體驗評估:
            測試階段可以進行體驗評估,以減少產品的使用問題,及時進行優化調整;
          4. 改版調研:
            迭代階段可以進行改版測的調研,以獲取用戶對改版效果的評價,收集需求,為迭代提供需求輸入。

           

          2. 敏捷用研案例:閱讀書城改版研究

          2.1 改版前

          需求分析

          • 明確改版目標:如何提高首頁CTR
          • 溝通當前產品出現的問題:書城頁改版時間已久,現有的產品功能及形態已不能滿足用戶需求

          用戶點擊行為研究

          • 了解用戶對舊版書城頁的瀏覽及訪問行為
          • 了解首頁各模塊流量分布(點擊熱力圖)

          書城結構布局研究

          • 分析書城頁的結構布局,產品功能點,產品交互、視覺、運營亮點
          • 找到舊版書城頁問題
          • 競品分析:QQ閱讀、掌閱、書旗

          2.2 改版中

          用戶需求挖掘

          • 挖掘用戶閱讀小說的習慣、用戶閱讀的心理模型、用戶找書的場景及途徑
          • 用戶在app中找書的痛點,探索可能的機會點
          • 方法:用戶體驗地圖

          搜索行為探索

          • 用戶搜索時找書難、模糊搜索找不到書
          • 了解用戶日搜索query分類、 query與書單的匹配度,搜索請求量等相關用戶搜索需求

          2.3 改版后:改版效果評估

          • 整體CTR改版效果
          • 各改版模塊CTR

          2.4 項目合作模式

           

          3.   敏捷用研經驗

          3.1 招募策略——健全流程

          招募問卷設計

          • 招募問卷模板化
          • 設置預先摸底的問題

          招募渠道

          • 充分利用用戶群
          • 完善內部招募渠道
          • 周圍朋友

          招募用戶特征及數量

          • 根據實時調研結論,不斷調整
          • 5個用戶為基礎,隨著研究需要逐漸增加

          獎勵機制

          • 在能力范圍內,提供有一定吸引力的獎品

          3.2 研究策略——模板化、透明化

          模板化:搭建問題包,分門別類、系統整理,隨時調用、整合

          • 訪談提綱設計模板化
          • 問卷設計模板化
          • 數據分析模板化

          過程透明:邊訪談邊總結,根據需求,隨時調整、直到數據樣本趨于穩定

           

          3.3 溝通策略——循序漸進

          結合迭代研究模式,從小范圍調研起步,與客戶及時共享研究進度和成果,循序漸進:

          • 隨時響應
          • 盡早匯報
          • 持續溝通
          • 忽略形式

          3.4  參與策略

          • 全民調研,整合設計和產品資源,配合進行研究,提升效率

          3.5 小結

          敏捷調研不是為了快而快,而是快速解決產品需求和設計問題打造好的體驗!

          【Q&A】 寶珠、殷朝、何曉頔答現場觀眾問

          問題1:內部用戶招募。國企,公司logo優化調研, 因為時間和成本的關系,邀約的是公司的內部員工(年齡集中在40-50歲區間段),調研的結果內部員工更偏好原logo的微小變化的版本,與設計方期望差別非常大,想知道是否是不應該找內部員工測試。

          回答:就上述問題,不建議找內部員工測試。

          內部招募是一種短平快的用戶招聘渠道,但是,

          1. 內部招募需要考慮公司的特點和情況,內部招募更多適用于內部用戶與實際用戶層貼合度高的情況,且如果調研方有資源,對時間成本要求不是非常高的情況下,還是建議找真實的潛在的用戶。
          2. 內部招募需要考慮測試內容和人口學的關系,比如上述調研的問題在于logo類調研不適宜找內部員工做調研,因為對品牌認知評價來講,公司員工的屬性本身就是一種較大的影響變量,會影響品牌認知評價判斷。

           

          問題2:概念測試。概念型產品可以用電話訪談的形式進行測試么

          回答:概念型產品,由于屬于市場上未出現產品,很難在電話中通過語言描述的方式讓用戶理解和想象出來,因此,概念類測試不建議用問卷和電話訪談的方式,建議通過面對面訪談+高保真原型展示的方式進行測試,如果實在滿足不了高保真,哪怕線框的示意圖都比單薄的語言描述更強。

           

          問題3:用研考核機制。用研的輸出建議,有些被采納,有些不被采納,采納的建議到產品成型很多已不是建議的“原型”了,如何衡量用研結果的直接作用。

          回答:

          1. 擺正心態,用研不是萬能的,是用戶和公司之間能保持連接的紐帶,用戶側的信息輸出,建議采納過程中需求方需要考慮的問題很多,產品KPI、產品的方向、設計的合理性、開發資源等等。
          2. 用研和需求方之間不是對立的,衡量用研結果的價值不應該是去“搶功勞”,跟合作方在價值上“分清楚”來證明自己的價值,而是與你的合作方“和諧相處”,通過“共創式研究”,以共贏的方式分享結果。
          3. 用研KPI設定:
            1)資源角度,KPI定為服務滿意度,即把自己當做“甲方”里的“乙方”,需求方給用研的滿意度評價(如郵件、正式的夸張、滿意度調研,不限形式);

          1. 2)OKR的角度,用研的核心價值為“洞察”,回溯哪些洞察結果可以服務到公司的大目標上。這里依然需要注意的是,用研的定位更多為服務型的“資源”,“資源”必須嫁接在業務上,不要隔離業務衡量用研的價值,用研的價值更多體現上幫助其他部門做“洞察”上,無法決策后期需求方的產出方向,但只要是“有意義的洞察”都是有價值的。                文章來源:uxren

          全球都在用的Booking,是如何做設計改版升級的?

          資深UI設計者

          每一次學習改版案例,不僅僅只是去看在視覺層面的變化,更多的應該是要學習到作者改版背后的思考。為什么要這么改,原因是什么,目的又是什么,怎么做,有哪些限制等等,有很多東西要去思考。所以,帶著問題并結合自己實際中所做的項目來看案例,應該會是一個很有收獲的過程。

          項目背景

          Booking.com繽客 是一家荷蘭初創公司,并已經發展成為全球最大的旅游電子商務公司之一。
          在Booking上,旅客可以選擇世界上任何一處的住宿地點,包括公寓,度假酒店,民宿,五星級豪華度假村,樹屋甚至冰屋等等。每天,通過平臺預訂的房間數超過155萬。無論是商務旅行還是休閑旅行,人們都可以快速輕松地預訂到理想的住處。

          競品分析

          自從Booking發布以來,許多競爭對手都采用類似的商業模式瘋狂跟進,搶占市場,并且在某些方面比Booking本身做的還好。

          在調研的前期階段,我去搜集了一些競爭對手和類似的平臺,分析UI,用戶體驗,用戶地圖,信息架構和關鍵功能。但是我并不會花太多時間過于深入的去分析這些產品,因為我希望將重點放在Booking這個產品本身的訴求上。

          使用場景

          在之前的調研過程中,我發現了許多不同的使用場景,經過匯總歸集,我集中關注以下3個場景:

          • 場景1:用戶知道其行程的日期和目的地(默認場景)
          • 場景2:用戶明確了日期但對其旅行的目的地不清楚
          • 場景3:用戶知道目的地但不確定其旅行日期

          典型用戶

          在進一步的研究中,我明確了4位具有不同需求和不同目標的典型用戶,這些數據對于改善不同用戶的體驗非常有用。

          這個分析的目的是通過梳理最佳的用戶流程并提升產品體驗,來為不同需求的用戶提供最好的用戶體驗。

          △ 數據來源:在線研究和用戶訪談(30個用戶樣本)

          用戶反饋

          收集用戶評論,從中我收到了很多有價值的反饋,這些評論中沒有特別明確指出是可用性或功能性的問題。我將這些反饋分為4類(譯者注:對反饋的問題進行提煉整理):

          • 預訂被取消
          • App的Bug
          • 投訴的處理效率
          • 反饋的進度

          毫無疑問,最相關的是預訂被取消的問題。太多用戶會注意到不合理的費用或與房間的主人取得聯系時遇到困難。

          用戶訪談

          基于30個用戶樣本,我試圖獲得進一步的用戶反饋,從中注意到以下的幾點事實:

          • 與其他平臺相比,booking的平均價格通常更高
          • 產品過于突出好評,用戶很難發現一些真實的差評
          • 當房屋主人接收到用戶的回復時聯系用戶也很困難

          我想引用一段話,來總結這里面遇到的問題,這段話也蠻有意思的,它說的是:

          「與其他應用比較來看,套路顯得有點多,會讓你覺得一切看起來都蠻劃算,總是想多賣一些東西給你。」

          用戶痛點

          總結之前的分析,我提出了以下幾點觀點:

          • 沒有一個完美的解決方案能夠滿足所有用戶,用戶需要盡可能多的掌握有用信息。
          • 沒有的功能沒有太多考慮到個性化需求。
          • 可以改進UI并使用戶更加集中于他的目標,而不是完全「以推銷為中心」
          • 優化用戶與房東之間的聯系問題

          解決方案

          從用戶痛點出發,嘗試找到合適的解決方案,來提升產品體驗。

          1. 主頁

          總的來說,我對首頁進行了大手術。主頁的搜索功能已經完全重新設計,減少過多的干擾信息。

          導航:我設計了一個新的導航欄,剝離出「已保存」功能,這樣用戶就可以快速找到自己所收藏的商品。此外,我也優化了「交易」的模塊,后面我會詳細的說說這塊的改動思路。

          其它功能 :至于之前的版本,我保留了搜索和相關推薦的功能,重新設計界面以改善UI的可用性。

          2. 社交功能

          如今,社交網絡在用戶的生活中扮演重要的角色,那沒理由在booking中做的這么差。我搞了一個新功能,允許用戶關聯自己的好友并查看他們的選擇,包括他們的評價(喜歡/不喜歡)。我已將此功能放置到主頁的下方,因為我希望在將其推廣到其他模塊之前收集更多有關它的數據。

          3. 搜索功能

          把這個功能分解為多個步驟。在輸入第一個詞后,即使沒有指定日期或其他信息,也能顯示相匹配的酒店。此外,我也加入了語音搜索,使搜索更容易?;谥拔覍Σ煌脩艚巧亩x,搜索的結果將根據最后的信息進行推薦:

          • 1名成人 ——背包客 ——酒店
          • 2名成人——度假夫婦——酒店,賓館或B&B(某種酒店形式)
          • 2名成人+兒童——家庭——民宿公寓或酒店
          • 1名成人+商務選擇——商人——酒店

          4. 列表頁面

          列表頁針對易用性方面做了整體的優化:

          • 我將篩選功能從3個按鈕更改為2個按鈕以減少用戶的操作步驟——將它放在頁面底部,方便使用
          • 我添加了標簽功能來更好的區分屬性類型
          • 在第一時間向用戶展示物業的主要設施特點。注意:根據不同的用戶,可以智能突出顯示不同人正在尋找的不同信息。
          • 我將報價的方式轉換為「單晚」而不是「總價」,以便在不同商品之間進行比較

          5. 詳情頁

          我列出許多可以在詳情頁面中加入的修改。將總價格突出顯示,以免有些隱形消費用戶可能會被忽略。

          增強了一個與評論相關的次要功能,允許用戶通過不同標簽篩選它們。

          6. 交易功能

          在優化開始時,我確定了操作場景2—— 「用戶還不知道自己的目的地」作為優化方向。為了提供更好的用戶體驗,我增加了一個新的功能,用戶可以在其中找到不同目的地的區間。利用篩選功能,用戶可以選擇最適合其需求的區間(區間 – 大陸 – 國家等…)

          動效原型

          最后,我還設計了一個整個項目的動效原型,把之前所有重設計的頁面串聯起來。

          結語

          由于時間限制,分析和結果是基于我的個人經驗和少量數據,需要進行深入分析和其他測試,以便完善和驗證解決方案。

          文章來源:優設網

          圖解WWDC 設計分會:映射與可供性

          資深UI設計者

          映射-Mapping

          在去餐廳用餐之前,我們還有些時間再了解一項基礎設計原理。讓我們回頭看看在「鄰近性」原理當中提到的燈光明暗控制開關。你能僅通過最左側這個開關的樣式看出它所控制的燈光明暗度嗎?

          如下圖這樣又如何?

          我們之所以能從后者當中進行判斷,所依據的就是映射關系。所謂「映射」,即是指,將被控對象的行為規律體現到控件自身的操作方式中,譬如開關把手的上升和下降,對應著燈光亮度的升高和降低。

          映射同樣體現在多個控件的布局當中,它們的次序應該能夠反映出多個被控對象之間的相對位置關系。

          我們假設這三個開關用于控制臥室天花板上的三盞燈。依據映射關系而設計的開關位置應該能夠幫助人們快速判斷出它們各自控制著哪一盞燈。映射原理有助于設計師對控件的類型、位置和次序進行決策。

          當映射關系不明確時,我們通常需要依靠文本標簽才能理解開關與燈之間的對應關系。這并非完美的解決方案,因為閱讀和理解文字需要花費時間和精力,同時人們也難以依靠記憶進行快速操作。

          在界面設計當中,映射關系也體現在控件類型的選擇上。例如通過滑塊(slider)控制文本的橫向字間距就是很符合直覺的交互方式。而相比于滑塊或是步進控件(stepper),旋鈕則更適于旋轉操作。

          當然,最直接的映射才是最好的映射。為人們提供直接操作目標對象的能力是最為簡單、精準、符合直覺的解決方案。macOS 上的鼠標指針操作,或 iOS 當中的手勢操作,都可以為人們帶來直接操作的體驗。

          可供性-Affordance

          不知各位如何,我是很餓了,這就準備下樓去吃飯。我們在大堂見,然后一起去餐廳。

          坐在餐桌前,你會看到面前擺放著一個空盤子。我們能用這個盤子做什么?顯然,放些食物在里面。除此之外呢?

          盤子很光滑,可以旋轉或是滑來滑去。

          盤子有一圈寬邊,可以抓著拎起來。

          我們對于如何與這個盤子進行互動的觀點便是可供性的體現。換句話說,盤子的外形特征為我們提供了如何與之進行互動的視覺及觸覺線索,使我們意識到哪些交互行為可行,哪些不可行。我們會意識到要將食物放進去,或是將它滑到其他地方。但我們通常不會想要倒水進去,然后端起來喝。

          可供性并非物體自身所具備的屬性,它更多是在代表行為主體與目標對象之間的互動關系??晒┬詴蛐袨橹黧w的差異而有所不同。舉個極端些的例子,對我而言,飛盤可以用來抓住或扔出去,而對我的狗來說,飛盤就是單單用來叼的。不過另一方面,碟子對我和我的狗來說都是用來盛放食物的。

          由于可供性所具有的主觀特性,一個人能感知到的交互特性在另一個人看來則未必如此。當可供性所傳達的交互特性與人們的常規行為有著高度關聯時,人們會更加容易感知到。

          例如,我其實可以把碟子當作茶托,這會是個不錯的茶托。但我猜我們大家日常很少真的這樣去做,因此我會更樂于將碟子視為盛放食物的容器,而非將水杯放在里面。

          我們能從我們所互動過的任何環境及事物當中感知到可達性。當我們走進餐廳時,門的大小及形狀可以傳達出供人穿過的特性,連續的地面使我們意識到可以在上面安穩地行走。

          椅子的造型暗示我們可以坐下,桌子的構造令我們明白可以將物品擺放在上面。

          人造物品當中都包含有傳達可供性的視覺線索,使人們明白哪些行為可行。清晰的、顯而易見的視覺線索可以幫助人們迅速了解如何與之進行互動。

          對于 app 界面設計而言也是同樣的道理?;瑝K控件由把手和滑軌構成,暗示著拖拽的特性。

          旋鈕的樣式意味著可以旋轉。

          按鈕則一目了然地傳達著可點擊的特征。

          在以上每一個例子當中,可供性的傳達效率都是極高的。事實上,隨著時間的推移,我們會越發適應于抽象度不斷提升的可供性傳達形式。我們所熟悉的界面當中的按鈕,無非是現實世界里真實按鈕的高度抽象化版本;那四個圓角足以將虛擬與現實兩個版本的同一種物體關聯起來。

          同理,滑塊把手周圍那細微的投影效果也足以讓我們意識到其獨立于滑軌之上的操作特性。

          而且,僅有的這一點點視覺線索可能都不是必需的,對于很多人來說,一條直線上的一個實心圓足矣傳達滑動操作的可供性了。

          有時候,可供性也可以通過動效進行傳達。在天氣 app 中點擊主體內容,界面整體便會稍稍上升,暗示著可以通過滾屏來查看更多內容。

          無論你使用何種方法,都必須確保 app 界面能夠清晰準確地傳達其自身的交互特性,否則,人們將困惑于如何與之互動。他們很可能會以錯誤的方式進行操作,然后發現無果,進而將控件理解成不可交互的元素,app 的可用性也會因此而受損。

          佐藤可士和的設計思路大揭秘

          資深UI設計者

          在佐藤看來,這些整理工作常常被他人視為是在浪費時間,而實際上整理是一種培養思路的好習慣,長此以往,不僅能讓自己的思路變得更加清晰,同時,思維也會跟著變得更加敏銳起來。

          在與客戶的溝通過程中,我們可以清楚的了解到,具體需求是什么。隨后再將這個需求中的關鍵點進行提煉與整理,最終完成這個設計。而不應該全是憑借設計師自己的靈感和專業水準去完成創作。

          兩度落榜高校

          △ 多摩美術大學以「自由與意力」作為教育理念?,F為日本規模最大的美術大學。

          佐藤的父親是位建筑師,祖父是俄羅斯語學者、前東京外國語大學榮譽教授。在這樣的家庭環境的熏陶之下,讓佐藤從小就喜歡上了畫畫。并且在報考志愿的時候,也選擇了藝術類的大學。但這一切似乎并沒有那么容易,沒錯,他落榜了。

          但這并沒有讓他放棄這個想法,經過了兩次落榜之后,終于在他20歲的時候,進入了多摩美術大學就讀。

          六年磨一劍

          1989年,剛剛從多摩美術大學畢業的佐藤,憑借著優異的成績,入職了一家日本知名的廣告公司「博報堂」。在這期間,受到了Takuya Onuki先生的指導,成長迅速。經過長達六年的工作積累,佐藤終于小有成就。他的作品「本田型格(Honda Integra)」獲得藝術指導協會的(ADC)年度大獎。在「博報堂」工作的這些年,佐藤除了收獲了大量的經驗和知識外,還遇上了在人生中給予他巨大幫助的人,也就是他的妻子佐藤悅子。

          成立武士事務所

          時間一轉又過了五年,這時的佐藤已經習得了一身本領,終于有一天,他決定離開這家公司,去成立屬于自己的工作室 「 株式會社サムライ」 ,至此開啟了他魔術般的設計生涯。

          △ 事務所內部一角

          在次偶然的情況下,有位外國攝影師問他「可士和」在英文里是什么意思,當他解釋到第二個字」士」的時候就卡住了,因為在日文的發音羅馬里「 SAMURI 」是武士的意思。也這是事件啟發了他的想法,并且給自己的事務所命名為「 SAMURI 」。根據佐藤的妻子回憶,當時她聽到這名字的第一反應是:「什么?武士事務所?也太土了吧!」

          在佐藤可士和的作品中,除了人盡皆知的優衣庫設計。他所經手的工作還包括有:偶像團體「SMAP」的整體視覺設計、NTT移動電話設計、紐約全球旗艦店的創意指導、迅銷公司的企業識別設計、藤幼稚園的更新計劃、國立新美術館的標志設計等。

          獲得獎項

          • 東京ADC Grand Prize(得獎作品:本田 Integra)
          • 每日設計獎(毎日デザイン賞)
          • 朝日廣告獎
          • 龜倉雄策獎
          • 東京TDC金獎
          • 香港 「亞洲最具影響力大獎」

          除了獲得眾多獎項外,在2007年,佐藤成為了明治學院的客座教授,同時也是東京ADC(藝術指導俱樂部)、東京TDC(字形指導俱樂部)、JAGDA(日本平面設計師協會)的常駐會員。

          對靈感的看法

          在佐藤可士和看來,只依靠靈感的設計是遠遠不夠的,除此之外,設計師還需要去考慮產品背后的邏輯。靈感如果太跳躍性,太過超前的話,是沒辦法解決現有問題的。但是在設計的過程中,靈感也是必不可少的關鍵因素,許多時候我們都需要通過「靈感」來擴充想法。而靈感的并不一定非要在自己的腦海中產生,通常創意的答案就在客戶哪里,而我們做的工作只是總結對方的思緒并加以重新創造。

          △ 佐藤可士和的超整理術

          在《佐藤的整理術》這本書中也曾表明過,他自己的工作室里面沒有多余的東西,沒有電話和電視,偌大的會議室里也只有一條長長的會議桌和雪白的墻。

          △ 佐藤可士和的事務所(內部)

          把環境中的干擾元素清理到限度,這有助于人對的情緒的整理。還有每當他完成一個項目都會聚集所有員工來整理所有的資料。目的也在于在整理的過程中讓人時刻的保持清醒的精神狀態,以做出更迅速、更準確的判斷。

          設計師就是視覺醫生

          佐藤所從事的職位是「藝術指導」,可能一般人認為的藝術指導工作,就是負責「擬定和執行平面計劃的統籌者?!?

          但在他看來藝術指導是「擬定全盤的溝通戰略,并運用設計的力量將其化為有形之物」的工作,通過跟客戶進行多次全方位的溝通,整理出客戶的需求以及內心的期待,從而做出符合客戶與市場需求的解決方案。佐藤將自己的職位定位為醫生,客戶就是患者,通過「望聞問切」找出癥狀的病因和治療方向。

          在整理的過程中需要統理對方的思緒,很多時候客戶雖然對自己的產品非常了解,但對于產品的市場價值卻并沒有明確的認知,或者頭緒很亂,不能總結出產品特點和價值。也有些客戶對于自己的需求說不清楚,有時候是他們想要的太多,但他們并沒有明確自己的目標是什么。這時就需要跟客戶深度溝通一一推敲客戶堆積如山的問題,加以整理、逐步將產品最關鍵最本質的焦點提取出來,將其打磨精致成為聯結產品和消費者的橋梁。

          作品解析

          1. SMAP(2000)

          2000年,佐藤可士和擔任了由木村拓哉等超人氣偶像組成的組合SMAP的整體形象策劃。這次設計中他采用全新的傳播策略。否定傳統的廣告宣傳方式,為日本流行音樂領軍團體之一SMAP的十周年紀念引入了一種很酷的宣傳方式。

          佐藤可士和以「流行樂隊就是品牌」的新視角,重新定位了SMAP,并制定一種新的傳播策略,在CD夾克和各種音樂會商品上都使用了獨特的視覺標識。佐藤可士和將涉谷停放的汽車披上印著樂隊形象的車罩,在路燈上懸掛橫幅、為公共汽車車身設計特殊的視覺樣式,還有報紙廣告和海報宣傳等其他傳播媒介。

          受樂隊CD包,盒子,碟底的啟發,他重新修改了位置和顏色比例,設計出一個容易讓人記住的三色符號。并通過各種街頭活動營造出轟動,熱鬧切且有吸引力的熱點。

          他將整個城市定位為一個大型傳播媒介的想法得到了高度認可,并在2000年贏得了許多著名獎項??墒亢瓦€為樂隊設計了一種以他們發行的CD命名的飲料,「Drink Smap!」并進行了更多的實驗廣告。他設計了飲料運輸車、工人工作服和安裝在音樂商店的自動售貨機。利用這獨特的產品作為廣告媒介,成功的吸引了大量的關注。

          2. OZOC (2002)

          佐藤可士和曾擔任OZOC(年輕女性時尚品牌)的創意總監,并負責其旗艦店的傳播策略,該旗艦店于2002年在原宿開業。佐藤可士和在建筑師荒木伸男(Nobuo Araki)的幫助下開始了這個項目,創作出一個紅色立方體建筑,但一個月后,這座建筑的顏色一夜之間變成了樸素的白色木材。

          佐藤可士和將建筑概念定義「變化」?!缸兓故菚r尚的本質,隨著時間的變化而變化。他將建筑與OZOC品牌的靈活性進行了結合,展示OZOC品牌對潮流的敏感度。OZOC在日本有100多家商店,它希望為品牌傳播創造一種獨特的方法。

          佐藤可士和拋棄了以往時裝廣告策略,即使用外國模特的照片。將OZOC的新旗艦店作為媒介,并稱之為「原宿廣告架構項目」(haap)。為了強調這一理念,佐藤可士和利用建筑工藝,為店面外部建造了一系列廣告板。為了強調設計概念,還將建筑過程和設計的稿圖,模型等應用于廣告主題。佐藤還制作了一本特殊的概念書里面記錄著建筑的施工過程,并在開幕式上分發給記者和其他相關從事者。

          他證明了除了文字,照片等傳統廣告媒介外,建筑設計和室內設計也能在品牌傳播中發揮著積極和重要的作用。

          3. 藤幼兒園(2004)

          佐藤先生為藤幼兒園提出了一個全新的觀點,指出「幼兒園本身就是一個巨大的游樂場」的宏偉概念。他將建筑作為培養每個孩子創造力的媒介賦予了新的視角。佐藤先生利用場地上現有的日本大榆樹,提出了一個木制屋頂和甜甜圈型的建筑,孩子們可以在上面每天跑步和玩耍。中間的區域被設計一個中央庭院,來促進平時公共活動時的團結性。佐藤先生也為幼兒園設計了操場設備,將它融入了幼兒園本身。他的想法是使幼兒園成為「學習的接口」,成為新的幼兒教育模式。

          佐藤與手塚夫婦建筑團隊合作,手塚夫婦的設計以融合自然的多功能空間而聞名。他們的建筑理念是:「無人獨處的空間」。幼兒園的空間設計也秉持著這一理念。屋頂作為孩子們的游樂場,為孩子們提供了豐富而有趣的內置設備。

          讓孩子可以屋頂上自由地奔跑和玩耍,然后通過滑梯或繩梯回到地面。甚至連排水系統都是為孩子們設計的,從屋頂收集的雨水形成瀑布。佐藤先生還為幼兒園標志、網站和兒童t恤設計了類似剪紙的字體和字符。

          該項目以「幼兒園本身就是一個巨大的游樂場,培養每個孩子的創造力」為理念,代表幼兒教育的未來,在國際上獲得了高度贊譽,獲得了2011國際機構(CELE)頒發的「最優秀設施獎」,以及眾多其他全球建筑和教育獎項。

          4. 優衣庫(2006)

          2006年優衣庫在紐約SOHO的旗艦店開業開始,佐藤可士和負責了時尚品牌優衣庫的所有全球品牌傳播活動。為了實現優衣庫獨特的創意和設計基礎,他提出了以「具有美學意識的超合理性」為概念,總結了優衣庫對世界的價值和主張。

          可士和通過修改日本片假名和原始字體設計出新的視覺標志,并組織了由建筑師、室內設計師和平面藝術家組成的專家團隊,為倫敦、巴黎、上海、東京和柏林的每一家旗艦店設計,每個地區的旗艦店都延續著相同的基調和感覺。這種與優衣庫整體業務管理直接相關的全面傳播策略,提升了優衣庫品牌的全球影響力。

          優衣庫在紐約Soho的第一家全球旗艦店的logo,用回了原logo鮮艷的紅色,片假名和英文表達了優衣庫如何將歐美的休閑裝轉變成日本風格。

          整個平面設計從標志到原始字體都是傳播策略的核心。佐藤將標志和字體組合成一種視覺圖案,并將其運用在建筑外墻面板,出租車車廂,屋頂,和各種媒體,通過各種傳播形式來吸引人們對優衣庫的興趣,促使人們去了解優衣庫。

          此外,以負責設計各個旗艦店的片山正通先生、擔任網站設計的中村勇吾先生為中心,組建了在全球展開的創意團隊將優衣庫的品牌形象,在巴黎、倫敦、柏林、莫斯科、上海等各城市進行品牌本地化。

          佐藤還為優衣庫的襯衫品牌「UT」進行設計,2007年東京原宿旗艦店開業并發布襯衫專業品牌「ut」,并以「襯衫的未來的便利店」為概念開展了設計。將t恤衫放入瓶包裝瓶,陳列在設計成飲料機型的展架上呈現出一種未來式的購物感。

          「UT」一發布就在日本國內引起熱烈反響,商店數天擠滿了客戶甚至連店內的商品也出現了銷售一空的場景,這種現象讓人不禁發出欣喜的贊嘆。佐藤以一種全新的品牌設計戰略來重塑優衣庫。將公司經營與品牌設計相結合創造出一種全新的品牌戰略。

          5. 今治毛巾品牌形象(2006)

          「Imabari毛巾品牌項目」于2006年作為日本經濟、貿易和工業部推廣日本品牌項目的一部分。由于無法招募到下一代工人,Imabari面臨著與廉價外國產品的競爭,前途未卜。佐藤可士和得知情況后為該公司制定了新的品牌標識和品牌策略,將Imabari的高價值轉化為「最安全、最可靠、質量最高的品牌」。佐藤可士和創造的標志象征著Imabari(今治)地區豐富的自然和工業的復興。將Imabari的品牌定位為品質保證的標志,選擇了純白的毛巾作為主打產品,體現了品牌的精髓。

          將「最安全」和「最可靠」作為核心品牌理念。當時,由于發生了幾起食品安全事件,日本消費者的危機感增強了。人們對食品信息的安全性非常重視。佐藤可士和利用這種焦慮,直接定位Imabari產品的可追溯性和高質量。紅、藍、白分別代表太陽、海洋和水,是Imabari毛巾高品質的基礎。這個標志的首字母是「I」,增加了歐洲的味道,為「全球品牌」定下了基調。

          白毛巾以前并沒有被用來代表高質量,但佐藤認為,作為Imabari的主要產品,它最清楚地代表了Imabari的價值。這清晰明確的信息極大地提高了Imabari的品牌知名度和銷量,并將其定位為日本的全球品牌之一。

          2012年,在東京青山南美開設了第一家概念店。2017年在產地今治設立了旗艦店和毛巾實驗室。為了展示日本Imabari毛巾的區域生產商。還新成立了「毛巾實驗室」,讓游客可以在這里體驗毛巾的安全高質量的品質。所有這些活動都有助于加深消費者對該品牌的吸引力和熱情。這個項目的創新方向,包括制定和執行的溝通策略,大膽的標志和清晰的品牌信息獲得該地區100多家公司的共同關注。

          6. 國立新美術館(2007)

          2007年1月開幕的國立新美術館,是日本第五個國立美術館,也是最大的國家美術館,也是三十年來第一家開放的博物館。它沒有永久的收藏,作為一個展覽場所更多的活動來源于藝術教育和展覽活動。

          佐藤可士和以」全新「做為出發點,將」沒有收藏品「的缺點轉化為優點,并結合美術館做為「日本最大的展示空間」的優點來規劃策略。

          識別標志以「新」這個字作為主要元素,想要用視覺表現出美術館的與過去其他美術館的不同,「就不能局限于舊框架,通過迄今沒有任何人做過的嘗試。佐藤可士和提取」開放「做為關鍵詞,因為該美術館致力發揮藝術中心的功能,除了搜集信息之外,更是期望美術館能成為信息交流地。

          佐藤將「新」設計成美術館的視覺標志并通過標志強調這種「開放場所」的特征,去除「新」這個文字里所有線條和彎角的封閉部分,制作獨特的開放式字體。此外,所有線條都是一邊直角,另一邊圓角,這個靈感源自黑川紀章先生建筑的啟發,美術館建筑的正面呈現海浪般的曲線,另一側的展示空間則是直線,通過字體的特征讓人聯想到建筑的外形。

          他還為博物館衍生品和標牌開發了原創的模板式英文和數字字體,以表達博物館的開放性和多元化,并將其核心價值觀和獨特建筑統一為一體,作為其綜合視覺傳播策略的一部分。通過統一建筑概念和視覺傳播概念,提升了美術館的設計完整度和統一性,確立美術館整體的全新形象。

          7. 千里復健醫院(2007)

          「康復度假村」是佐藤可士和2007年為這家醫院開發的宏偉概念。醫院的作用是提供康復治療的施設,為正在康復的病人恢復活力和信心讓他們回歸正常生活。

          通過理事長橋本康子醫生的敘述的詳情,整理和思索后提出「復健休閑中心」概念。醫院是修養的場所,但是通過提供舒適的空間和真誠的服務,能發揮心靈康復的功能。

          由可士和擔任家具設計的監制,建筑內部采用休閑飯店風格,有熱帶魚悠游其間的水槽,客廳有暖爐,芳香療法,和圖書館。家具全部是摩登的北歐制品,采用柔和的間接照明,充滿溫馨感的木質地板讓患者放松心情。員工制服全服翻新,委托滝沢直己先生設計,新的制服給人整齊潔凈的印象,又兼具「整齊」和「高雅」的高級感可以使患者感到安心。

          醫院的結構都是木質材料目的是為了營造出溫暖的氛圍,讓患者感受到大自然的治愈能力。佐藤先生還制定了康復醫院新腦卒中病房的更新計劃,該病房是為紀念康復醫院成立10周年而建造的。他擴大了「康復度假村」的概念,為患者提供放松的環境,并將重點放在康復上,作為醫院新計劃的一部分。

          此外醫院還設置了一間音樂室和一間鋪著木板的美術室。佐藤先生還將自己親自創作的繪畫和瓷器放置在大廳內外展出,為患者提供一種新的治療藝術能量。

          8. 7-11便利店(2010)

          7-11便利店是世界上最大的便利店連鎖集團。它不僅具備便利店個性化和便捷化的特色,更有著其經營和發展的獨到之處。其龐大的店鋪網絡,規范化的商品管理,與時俱進的經營理念。

          在即將到來40周年之際,佐藤可士和為7-11便利店重新制定了一套經營戰略,重新定位該品牌的重點,便利店的優點并不在于價格而在他的產品質量和形象,為了提高品質和形象,可士和為便利店重新設計了1700多項商品包裝。這一舉措打破了每季度最高銷售記錄。佐藤可士和強調賣的不只是商品,而是對生活的重視,設計源于生活,應該通過設計來培養生活美感。

          佐藤先生還參與了「Seven Cafe」(七咖啡)咖啡機的命名、包裝和設計并創造出超高的人氣,可以被認為是一種社會現象。并在1年里占據國內咖啡銷量No.1的位置。

          佐藤先生專注于最細節的設計,以最大限度地發揮這些優勢。簡單的包裝設計,非常適合個人家庭餐桌,受到尋求高品質產品的消費者的歡迎。佐藤還針對食品進行分類,并按類別放置品牌標簽,以便客人能夠根據自己的需求輕松地選擇產品。品牌重塑的第二年開始,以日常用品為主的「生活方式」品類開始逐步打造自有品牌。

          在第三年,他推出了「Seven Café」,給7-11便利店帶來了巨大的成功。佐藤先生將重塑品牌的傳播方法結合到產品中,并從設計的角度出發結合。這是其他便利店產品都沒有的一個因素。因此,他不僅帶來了巨大的經濟成功,也帶來了巨大的影響,創新日本的生活方式。

          9. 開被樂記念館(2011)

          「開杯樂紀念館」以創造思考為概念,通過有關方便面的各種展覽和體驗項目,讓參觀者在愉快的氣氛中了解發明、發現的重要性,學習創業精神,是一個體驗型飲食教育設施。該公司的創業者安藤百福先生生前一直有一個念頭:「希望告訴孩子們發明、發現的重要性」 紀念館的logo創作靈感來源于開杯樂靠近杯口的外沿設計,設計3個驚嘆號「?。?!」來表現「發明和發現」的喜悅。內部基調以紅色和白色為主,簡潔明了。并將這一理念體現在博物館的平面,空間和展示內容。

          10. YANMAR公司(2013)

          為了紀念Yanmar誕生 100周年,佐藤可士和為yanmar公司重新定制了一個品牌戰略,該公司涉及工程、農業、建筑、海洋工程和全球能源等多個領域。

          為了實現yanmar公司全球化的目的,佐藤制定了名為「高端品牌項目」戰略,以展示洋馬公司計劃的未來發展方向。

          佐藤為公司設計新的標志,還與創作者合作,創造了拖拉機原型和新農業服裝,作為體現洋馬全球化的意愿。YANMAR的品牌形象在國內外有所不同,在日本它以其拖拉機和公司卡通男孩角色Yanboh和Marboh而聞名。在海外,洋馬是游艇和海洋工業的熱門品牌?;谶@一事實,佐藤將洋馬的許多活動轉移到「食品生產」和「能源轉型」這兩個主要視角,專注于一個企業使命,即追求一個可持續的,循環型社會。

          佐藤設計了源自Oni-Yanma的Flying Y標志,該標志啟發了公司名稱,在日語中意為「蜻蜓」。此外,在新聞發布會和經銷商活動上以新拖拉機和新農業、海洋服裝的設計為特色,有力地表達了Yanmar的未來愿景。

          佐藤還負責監制和指導位于大阪的新辦公樓的建設,在辦公樓在2014年建成。建筑本身的定位旨在通過采用進的環境技術實現零排放的概念模型。佐藤可士和將YANMAR FLYING-Y BUILDING大樓定位為傳播媒體,不斷傳遞洋馬「可持續未來」的使命。

          11. MoltBene企業新形象(2015)

          MoltBene是日本著名護發公司,在即將到來的40周年紀念,邀請了佐藤可士和為公司制定新品牌戰略的策劃和執行,包括改變公司名稱, 并為「MoltBene」開發新的企業形象。他為公司提出一個新的命題「人生中,體驗新的美」。他還將集團子公司整合在這一新口號和新公司名稱「美的體驗」概念里。

          佐藤設計的新標志靈感來自于「美」的日文漢字形式。整個標志是由 「美」簡化和抽象而形成的,并使用紫色作為公司的新企業顏色。這區分了公司的獨特性,因為紫色不是公司徽標中常用到顏色。同時負責新公司總部的入口和美容工作室的室內設計,并負責安裝藝術品。

          佐藤先生設計了公司新總部內部新美容工作室。用于員工培訓,與新聞會議等,旨在該空間與整體品牌戰略同步。

          從工作室天花板上的織物和佐藤先生在墻上的表達了這個工作室作為新「美」的體驗發源地的定位。通過在新公司名稱、新標識、新美容工作室的內部設計以及其他新的傳播媒介中象征性地融入新的使命宣言,將這些元素融合在一起,向社會提出了一種新的品牌戰略方案。

          12. Miwa Yamamoto(2016)

          Miwa Yamamoto是一家Tenobe Somen(日本手工細麥面)公司。為了紀念誕生300周年,佐藤可士和被委托設計新的公司名稱和新標識,還有公司的旗艦產品「白龍」新包裝設計。在整個項目中,佐藤致力于將當代日常生活和傳統工藝與日本食品傳統之間相融合創造出和諧共生的形態,同時也為品牌創造了未來的形象。

          考慮到公司日后擴張其他產品生產線,從而應對日益多樣化的消費者飲食習慣,佐藤可士和先生提出將公司名字「Miaw SomenYamamoto」簡化成為「Miwa Yamamoto」。

          他表示公司歷史悠久,與奈良古城歷史相互交織有著深刻的歷史淵源?;谶@份歷史情感佐藤以印章的形式設計出公司的新標志。公司產品」白龍」的包裝以白色為基調,配合極簡又細致的圖案。簡單而現代的,與其他競爭產品區別開來。包裝上的圖案細膩又精致與產品產生呼應,同時標志象征著Miwa Yamamoto細麥面背后獨特而精致的技術水平。

          13. DIFFERENCE(2016)

          2016年佐藤為DIFFERENCE更新品牌形象系統,還為此定制了一套全新的西裝訂購系統??腿送ㄟ^店內的裁縫進行初步測量,將測量好的尺寸保存進一個獨特的APP應用中,從開始的測量尺寸到選材,布料,到支付都可通過該應用完成。

          這建立了一套全新的服務模式,將線下實體店和線上店鋪連接起來創造出一套新的訂購系統。佐藤先生還提供了根據每個顧客的數據進行促銷信息分析,將合適的促銷信息傳播到合適的客戶身上。極大限度地發揮了定制西服的優勢。

          2016年10月在青山開業,佐藤先生設計了一個精致的室內空間。該應用程序允許商店提前詢問顧客的個人喜好和預算,向他們展示不同的西裝選擇和面料樣品,這樣顧客一旦來到商店,就可以觸摸和感覺他們「想要」的西裝。顧客在真實商店和虛擬商店之間有一種無縫的體驗。很多客戶都很歡迎這項服務,因為每個人都可以在整個過程中享受到高質量的服務和個性化。

          14. 武田制藥(2018)

          佐藤可士和為武田制藥有限公司在東京·日本橋本町建設了的新全球總部提供了室內設計指導。佐藤設計了一個精致又具有代表性的室內空間,向世界展示武田公司的品牌核心。

          他根據武田自成立以來的使命「生命的力量」為概念來進行設計并體現在公司的內部結構中, 從入口到接待處到工作區域的運動過程講述了人類生活的故事。

          并以生命中不可缺少的八個元素,生命,水,光,地球,樹,人,聯系和未來的漢字來作為空間裝飾里的主要形式。將這些漢字提煉成現代符號,傳達出了一種日本企業特有的「和」的感覺,并作為藝術品應用于墻壁、地毯和燈光。

          該項目作為空間品牌的視角得到了廣泛關注,不僅是為了傳達武田支持「生命的力量」,還為所有與武田合作的人提供了分享同樣美好未來的空間。

          15. 日清食品公司設計工廠(2019)

          2019年負責日清食品關西工廠的參觀設施的創意指導、室內裝飾設計。佐藤結合了趣味性和品牌歷史,設計出與普通工廠不同的形式。

          在入口處是巨大的杯,面外觀采用日清的代表色:紅與白為主,從入口處走進內部參觀后,映入眼簾的便是一條長長的紅色走廊,全長200米的鮮紅的參觀通道內部同樣延續了入口處的紅白設計,與工廠內部的干凈用色形成強烈對比,給人留下一種沖擊又和諧的對比,在紅色走廊里有40個大顯示器展示生產過程,每分鐘生產400個杯面,同時還能聽到生產線中發生的聲音取樣。

          日清工廠總面積約10萬平方米,1年內最多可生產10億頓產品。擁有尖端設備和IoT技術,是國內最大的食品工廠之一。

          16. SAMURAI INCUBATE(2019)

          2019年7月SAMURAI INCUBATE在日本總部的公司更換了全新的辦公地點,同時也重新修訂了企業形象系統。佐藤可士和為該公司重新整理了行動的方針,對齊經營理念提出修正,把焦點聚焦在「志勇禮誠」這句話上。

          LOGO標志把「志勇禮誠」這四個字,無限的抽象化與簡化,使logo的視覺表現上與日本極簡的審美觀念融合統一。

          四個正方形水平排列,即統一又平衡穩固,象征了今后公司新事業的基礎。新辦公司在東京都港區的六本木一丁目街道中,佐藤認為新的公司地點是新開始的舞臺,寓意著在這里能創造出更多新的商業機遇。新公司在六本木區選擇了一棟三層樓并以「無」作為概念,去除了樓中附屬的東西讓大樓接近剛建好的狀態。

          公司二樓的靈感來自于「道場」這里能根據不同的用途靈活運用其空間,也可以做為一些特殊活動的場所。正面有一面純白的墻,傳達著一種從無到有的理念,同時也是這個空間中重要的標志。其他的空間是無隔斷的一體化空間設計,可以滿足快速的繁忙事務的處理。在空間設計中材質選擇了木頭、不銹鋼、布、玻璃,希望這里散發出輕松和質樸的氛圍。

          交互控件科普系列! Sheet 的常見樣式和設計注意事項總結

          資深UI設計者

          還在頻繁地使用彈窗對用戶展示重要提示嗎?明知這樣有損體驗卻沒有更好的選擇嗎?那么不妨來試試干擾度更低,卻依然可以用于重要提示的 Sheet 控件吧。

          什么是Sheets

          Sheets 控件并非彈窗,通常會被熟稱為「浮層」或「浮窗」。

          該控件在 iOS 和 Android 系統規范中都有相關定義,屬于多才多藝的控件,可以用于給予信息提示,也可用于展示更多的拓展信息。

          從用于提示的角度來看,Sheets 控件和 Dialogs 控件的相同點和不同點在哪里呢?

          1. 共同點

          模態化

          二者都可以設置模態,當模態控件顯示時,頁面背景會顯示深色遮罩,并立即打斷用戶當前操作。

          承載操作和信息

          二者都可以承載豐富的操作和信息,支持嵌入列表、選擇器等控件及圖片、文本信息。

          2. 不同點

          觸發方式不同

          Dialog 可以不通過用戶操作而自動觸發,Sheet 必須通過用戶操作才可以觸發顯示,因此用戶對 Sheet 的顯示會更有預期。

          關閉方式不同

          Dialog 的關閉方式較少,通常會要求用戶進行選項操作后才可關閉;Sheet 的關閉方式較多,對于用戶而言有更豐富的選擇權。

          因此綜上所述,我們可以發現,Sheet 對比 Dialog 的優勢在于,它的顯示會更符合用戶的預期,它的干擾層度也會低于Dialog(因為更易關閉)。

          • Sheets 在 Google Material design 規范中被分為了 Bottom sheest 和 Side sheets 兩類;
          • 在 iOS Human Interface Guidelines 中被分為了 Action sheets 和 Activity views 兩類。

          下面就由我來依次詳解其特性和玩法吧。

          Bottom sheets 底部浮窗

          專屬于 Android 的 Sheets 控件。

          1. 使用場景

          用于補充內容相關的更多信息(非模態)、提供可交互的菜單或對話(模態)或其它關鍵功能/任務的拓展。

          2. 注意事項
          • Bottom sheet 通常用于 Android 豎屏場景,在 Android 橫屏場景建議使用 Side sheet。
          • 在 iOS 中不建議使用 Bottom sheet,建議使用原生的 Action sheets 或 Activity views。
          3. 樣式類型

          菜單樣式

          可嵌套 Menus,展示多個選項內容。

          宮格樣式

          可使用宮格布局,展示多個選項內容。

          迷你樣式(非模態)

          一個非模態底部浮窗可被設置固定展示在頁面底部,用戶可以隨時用它來對其它功能/任務進行快捷操作,如進入購物車、查看所選圖片、查看聊天和查看剛才的視頻等。

          4. 模態/非模態

          非模態浮窗:如左下圖所示,非模態浮窗與內容保持在同一層級,用戶可同時對內容和浮窗進行操作。

          模態浮窗:如右下圖所示,模態浮窗層級高于內容,背景深色顯示遮罩,用戶僅能對浮窗進行操作。

          5. 顯示與消失

          顯示

          浮窗顯示時從底部向上滑入,非模態浮窗顯示時不會打斷用戶操作,模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。

          消失

          浮窗消失時會向底部滑出。

          模態浮窗在以下情況下會消失:

          • 用戶觸發浮窗上的對應操作(自定義);
          • 用戶點擊浮窗外的區域;
          • 用戶下拉浮窗達到收起閾值后(自定義);
          • 用戶點擊 Android 系統返回鍵。

          非模態浮窗在以下情況下會消失:用戶選中浮窗上的對應按鈕(自定義)。

          6. 支持高度延伸

          當浮窗底部仍有未顯示的內容時,可設置通過滑動或拖動浮窗來使其變為全屏展示,并在頂部顯示 Toolbar 來展示關閉/收起操作。

          7. 支持深層鏈接

          模態浮窗中可以展示其它應用的深層鏈接內容或操作,譬如調用 Google 翻譯。

          8. 范例

          抖音的評論功能使用的是模態 Bottom sheet;百度地圖的路線切換功能使用的是非模態 Bottom sheet。

          Side sheets 側邊浮窗

          專屬于 Android 的 Sheets 控件。

          1. 使用場景

          用于補充內容相關的更多信息(非模態)或提供可交互的列表信息(模態)。

          2. 注意事項
          • Bottom sheet 通常用于 Android 豎屏場景,在 Android 橫屏場景建議使用 Side sheet。
          • 在 iOS 中不建議使用 Bottom sheet,建議使用原生的 Action sheet 或 Activity views。
          3. 樣式類型

          菜單樣式:可嵌套 Menus,展示多個選項內容。

          宮格樣式:可使用宮格布局,展示多個選項內容。

          4. 模態/非模態

          如左下圖所示,非模態浮窗與內容保持在同一層級,用戶可同時對內容和浮窗進行操作(在移動端較少使用,通常用于 PC 端)。

          如右下圖所示,模態浮窗層級高于內容,背景深色顯示遮罩,用戶僅能對浮窗進行操作。

          5. 顯示與消失

          顯示

          浮窗顯示時從左/右邊緣滑入,非模態浮窗顯示時不會打斷用戶操作,模態浮窗顯示時會顯示深色遮罩以打斷用戶操作。

          消失

          浮窗消失時會向左/右邊緣滑出。

          模態浮窗在以下情況下會消失:

          • 用戶觸發浮窗上的對應操作(自定義);
          • 用戶點擊浮窗外的區域;
          • 用戶側拉浮窗達到收起閾值后(自定義);
          • 用戶點擊 Android 系統返回鍵。

          非模態浮窗在以下情況下會消失:用戶選中浮窗上的對應按鈕(自定義)。

          6. 滑動說明

          支持上下滑動,不支持左右滑動。

          7. 范例

          淘寶的篩選功能使用的是 Side sheet。

          Action sheets 操作浮窗

          專屬于 iOS 的 Sheets 控件。

          1. 使用場景

          用于呈現一組與當前操作相關的選項,如啟動某個任務,或者確認是否開始執行某個可能具有破壞性的操作。

          2. 注意事項

          在 Android 中不建議使用 Action sheet,建議使用原生的 Bottom sheet 或 Simple dialog。

          3. 樣式類型

          如下所示,支持單個或多個操作的展示,以及說明文案的展示:

          4. 顯示與消失

          顯示

          浮窗顯示時從底部向上滑入,會顯示深色遮罩以打斷用戶操作。

          消失

          浮窗消失時會向底部滑出。會在以下情況消失:

          • 用戶觸發浮窗上的對應操作(自定義);
          • 用戶點擊浮窗外的區域;
          • 用戶點擊浮窗「取消」按鈕。
          5. 顯示位置

          豎屏時顯示在頁面底部,橫屏是居中顯示在頁面底部。

          6. 范例

          微信的選擇朋友圈發布類型及清除聊天記錄的二次確認,都是使用的 Action sheet。

          Activity views 活動浮窗

          專屬于 iOS 的 Sheets 控件。

          1. 使用場景

          用于呈現一組與當前操作相關的選項表,如復制、收藏或分享。

          2. 注意事項

          在 Android 中不建議使用 Activity views,建議使用原生的 Bottom sheet。

          3. 樣式類型

          列表樣式

          宮格樣式

          混合樣式

          4. 顯示與消失

          顯示

          浮窗顯示時從底部向上滑入,會顯示深色遮罩以打斷用戶操作。

          消失

          浮窗消失時會向底部滑出。會在以下情況消失:

          • 用戶觸發浮窗上的對應操作(自定義);
          • 用戶點擊浮窗外的區域;
          • 用戶下拉浮窗達到收起閾值后(自定義)。
          5. 顯示位置

          豎屏時顯示在頁面底部,橫屏是居中顯示在頁面底部。

          6. 支持高度延伸

          當面板底部仍有未顯示的內容時,可設置通過滑動或拖動面板來使其高度進行延伸,從而展示更多信息。

          7. 范例

          愛奇藝的分享功能和泡泡圈選擇發布內容類型,都使用的是 Activity view。

          用法總結

          建議針對非系統級或業務級的重要提示,使用 Sheets 控件進行提示;Dialogs 控件僅用于最重要的信息提示才算是「好鋼用在了刀刃上」。

          另外在調用原生 Sheets 組件時,記得分端的差異性。

          文章來源:優設網

          關于Costco,你可能不知道的10件事兒

          資深UI設計者

          8月27日,中國大陸第一家Costco在上海開業,因為人滿為患,上午開業,下午就被迫暫停營業了……

          Costco開業的第二天,為了保證購物體驗,Costco開始實行了限流政策,將賣場人數控制在2000人以內……

          上海市民們依舊熱情未減,有人早上4點半就去Costco門口排隊了,大多數人6點半就到了,因為限流,來晚就進不去了……

          27日晚上,我發了一條朋友圈,附了一張在Costco照的,抱著一大包狗糧的照片:

          大家都問我是怎么擠進去的。

          其實這不是在上海的Costco,而是在美國的Costco。

          今年1月,我帶隊去美國游學,專門去參訪了Costco公司的總部。

          Costco的高管Jay B.Smith負責接待了我們,他給我們分享了很多Costco的經營細節,都是不為外界所知的。

          同時,他告訴我們Costco很快就會在中國上海開業了,我們也代表中國消費者采訪了他許多問題,特別有收獲。

          所以,今天,我想把這些“關于Costco,你可能不知道的事情”整理出來,獨家分享給你。

          01 會員制,并不是Costco成功的關鍵原因

          Costco最早開始推行會員制的時候,其實遭遇了巨大的失敗。

          人們當時是不接受,也不理解會員制度的,沒有多少人來辦會員,Costco差點就死掉了。

          那Costco是如何起死回生的呢?

          它做了一個關鍵的改變:給高級會員2%的消費返點,每年的返點額度最高可以達到500美元。

          高級會員每年的年費是120美元,一個家庭每個月只要在Costco消費500美元,一年下來,這120美元的會員費就可以返點回來了。

          而如果你每個月消費500美元以上,你甚至還可以賺到額外的錢。

          對于一個中產大家庭來說,平時需要購買食品、日用品、衣服等生活用品,偶爾還需要購買電子產品或者其它大件,每個月500美元的消費也不算太高。

          加上Costco的商品物美價廉,本身就比別的渠道有價格優勢,只要每個月消費500美元以上,省了會員費不說,還可以獲得額外的返點,何樂而不為呢?

          就這樣,Costco迅速獲得了第一批會員。

          這些會員辦了卡之后,既買到了物美價廉的商品,又拿到了額外的返點,同時還享受到了Costco把顧客寵上天的服務。

          因此第二年的續費率高達96%,Costco也越做越成功。

          02 Costco最不愿意做的事情就是擴張

          Costco每年在全球范圍內只擴張25家門店,相對來說,擴張速度算是比較慢的。

          因為Costco最不愿意做的事情就是擴張。

          為什么?。?

          Jay B.Smith告訴我們:擴張,是最好的讓客戶失望的方法。

          擴張太快,非常容易帶來用戶體驗的下降,這是我們最不愿意看到的事情。

          因此,對于擴張這件事,Costco一直是非常謹慎的。

          03 25%自營商品+75%品牌商品

          Costco的商品中,有25%是自有品牌的商品(比如它著名的自有健康品牌科克蘭Kirkland Signature),剩下的75%是其他品牌的商品。

          為什么這么分配呢?

          因為它要用25%的自營品牌,來倒逼其他75%的品牌降價。

          Costco有經營自己品牌的能力,因此它就有底氣跟大品牌說:“你要是不降價,那我就用自己的品牌做了?!?

          這就導致了大品牌愿意降價來給Costco供貨,Costco也因此能給用戶提供比別的渠道便宜得多的商品。

          一開始,很多大品牌是不愿意和Costco合作的,因為它們其他的零售店要保留高利潤。

          但是當Costco越做越大,越來越多的大品牌愿意來costco了,比如勞力士,比如愛馬仕。

          04 Costco一開始其實是面向中小企業的

          很多人覺得Costco就像是沃爾瑪旗下的山姆會員店;但其實,Costco一開始更像麥德龍。

          Costco最初本來是打算做中小企業生意的,大包裝倉儲商品直接賣給企業,而不是賣給個人消費者。

          但是因為覆蓋面太小,Costco差點死掉。

          之后Costco才轉型,決定面向個人消費者。

          05 Costco為什么非常重視肉類商品?

          Costco為什么非常重視肉類商品?

          因為肉類商品是非常有粘性的。

          Jay B.Smith告訴我們:消費者非常喜歡Costco的肉類,肉類商品會吸引消費者一而再、再而三地來Costco購買。

          不像可口可樂、薯片這種標準化商品,肉是非常差異化的商品,你在不同地方買到的肉,質量肯定是不一樣的。

          你只要把肉類這種差異化的商品做到極好,就會積累消費者的信任,增加消費者的粘性。

          所以,Costco非常重視肉類商品的質量。

          06 Costco為什么可以把東西賣這么便宜?

          很多人都覺得,Costco可以把東西賣這么便宜,是因為它靠會員費賺錢。

          但是靠會員費賺錢,只能說Costco有把東西賣便宜的動力。

          那它把東西賣便宜的能力從何而來呢?

          第一點,是因為它的包裝很大。包裝越大,就能賣得越便宜。

          第二點,是因為它的品類很少。

          沃爾瑪有13萬SKU(品種),而Costco只有4000個。

          因為品類少,單個品類的銷量就可以做到極高,Costco就擁有了很強的與供應商議價的能力。

          第三點,是因為它很多商品是自營,可以自己控價。

          比如,Costco有自己的養雞廠,它砍掉了所有中間環節,最終一只能夠喂飽全家的烤雞,只賣4.99美元。

          一只烤雞4.99美元,35人民幣,這在美國是極其便宜的。很多用戶因為買到這么便宜又量大,味道還不錯的烤雞,簡直幸福感爆棚。

          07 Costco目前是全美最大的紅酒廠商

          還有一點你可能不知道,Costco目前是全美最大的紅酒廠商。

          因為Costco賣出的紅酒量實在太大。

          但是它并不賣很多種類,它只賣幾款最暢銷的紅酒。

          08 Costco其實還做金融生意

          在美國,對很多人來說,Costco的會員卡同時也是銀行卡。

          Costco和Citibank(花旗銀行)合作,發行了一種聯名卡。

          既可以作為Costco的會員卡,也可以當做信用卡使用,在Costco消費可以享受2%的返現。

          這也就意味著,Costco其實同時也在做金融生意,幫助信用卡的發行方來發行信用卡,同時來分享信用卡的刷卡收益,這可能也是Costco一個非常重要的收入來源。

          在中國,平安銀行也和Costco發行了一種聯名信用卡,會員費可以減100元,同時在Costco消費可以獲得最高1%的返現,白金卡每年最高返現1440元。

          09 Costco的周轉率極高

          像Costco這種零售企業,想要賺錢的一個特別重要的方法,就是提高周轉率。

          Costco的周轉率非常高,是11.8,接近12。

          什么意思?

          Costco用一筆錢進貨之后,一個月之內就能把貨物賣出去。

          這也就意味著,同一筆錢,Costco一年可以周轉12次。

          我們來算一筆簡單的賬。

          假如一個貨物放在一個普通超市,三個月才賣出去,那么用來進貨的這筆錢,一年只能周轉4次。

          很多人都知道,Costco的利潤率最高不超過14%。我們假設它的利潤率是10%。

          那么1塊錢的進貨款,在普通超市,一年周轉4次,就只能賺4毛錢。

          而Costco一年周轉12次,就能賺1塊2。

          所以,周轉速度越快,零售企業的利潤就越大。

          在Costco有一句名言,叫做,降低成本最好的辦法,就是提高銷售。

          什么意思呢?

          如果想要降低成本,就要提高每天的出貨量,這樣周轉率就會非常高;周轉率變得非常高,資金成本就會變得非常便宜。

          所以,真正的成本,是資金成本。如果你理解了這件事兒,你就會理解到底什么是Costco。

          10 Costco在中國會做電商嗎?

          Jay B.Smith告訴我們Costco馬上就要在中國開店了。

          我們當時問他:Costco會打算在中國做電商嗎?

          Jay B.Smith很謙虛地回答說:電商其實是我們一直不擅長的事,美國有一些企業做得特別好,比如亞馬遜,我們要向它學習。

          但是,我們還是希望專注于做自己擅長的事。Costco所擅長的,是在線下做供應鏈管理。

          所以,Costco知道自己所長,也知道自己所短。

          目前來看,就算Costco在中國要做電商,它也會把主要的精力放在線下,把線下的服務做到。

          最后的話

          最后,附上Jay B.Smith給我們分享的一組數據(截至2019年1月):

          1. Costco在全球共有736家門店,其中:美國516家,加拿大94家,墨西哥36家,英國28家,日本25家,韓國13家,中國臺灣地區13家,澳大利亞8家,西班牙2家,冰島1家;
          2. 擁有9270萬持卡會員;
          3. 年營業額:1310億美元;
          4. 會員續費率:90%;
          5. 全球擁有24萬名員工 。

          Costco是全球第二大零售商,第一是沃爾瑪。

          它是把零售效率做到的典型案例,是每一個零售企業學習的標桿。

          參訪完Costco,我自己是非常震撼的。它能夠獲得今天的成功,很大程度上,要歸功于它死磕自己、為用戶謀利的精神,以及它強大的供應鏈管理能力。

          在中國,也有很多向Costco學習的企業,比如小米,比如拼多多。

          最后,依然祝福Costco,希望它能夠在中國,越走越遠。

          文章來源:人人都是產品經理

          原型該畫到什么程度?

          資深UI設計者

          原型的不同階段,含義和作用也各不相同,更加認清了原型在工作中的用途,希望對各位也有所幫助~

          不知你有沒有這樣的經歷:為了不讓原型看起來丑,會糾結各種細節處理(間距、大小),結果造成工作周期延長,精力損失;為了讓原型接近于真實效果,會思考各種精致布局,結果leader來一句‘你現在做這么好看干嘛,這個功能都沒確定好’....在各種階段畫出了不合適的原型。


          所以今天想聊聊‘交互原型’這一話題,也算是對自己成長的一個總結和沉淀。


          文章目錄:

          ·原型的不同階段

          ·原型與用戶體驗的5個層面

          ·原型產出的原則

          Image title




          Part1:原型的不同階段


          其實我覺得畫原型和做設計的理念是一樣的:沒有好壞,只有是否合適~

          當產品經理/交互設計師沒認清當前的需求階段時,無論你畫的好不好看,都會出現一些糟糕的現象:一開始就注重細節處理、在原型需要重點輸出時,又忽略功能與邏輯上的思考、在功能未確定時追求精致頁面效果...


          下面是我對‘原型’的理解,所繪制用于表示不同階段下的需求特征。

          Image title




          01.想法階段:


          在產品需求的初始階段,功能概念都比較模糊,大部分想法都停留在腦海和口述上(工作中典型的場景,如團隊風暴、需求討論、會議評審)。需要我們不停地理清概念想法,驗證需求的合理性、目標是否正確。


          所以這個階段的強調是:產品雛形 - 將我們的想法、概念需求可視化出來,并加以討論驗證。因此,最合適的方式就是用‘草圖’表達,快速產出快速修改,能即時看見產品的雛形。

          Image title


          常用‘草圖’勾勒產品雛形,除了可以表達想法、探索方向外,好處還在于:

          a. 能提升你快速思考、驗證假設、優化設計流程的能力。

          b. 能展示你思考問題的過程(設計思維),體現專業能力。

          Image title



          02.修改階段: 


          這階段的產品目標和方向較為清晰,接下來需要優化原有的概念想法,為產品創建一個信息架構、梳理功能邏輯等工作,方便在需求評審會、團隊討論中推動產品功能的進展。 


          該階段強調:理清目標 - 根據用戶訴求、業務目標、運營需要等不同目標點,逐步梳理出原型上需要展示哪些功能內容(界面布局、信息取舍)。

          Image title


          所以對產品經理/交互設計師來說,只需產出一個大體上看得明白、能理清產品功能的‘中保真原型’即可。方便即時修改,向產品定型/高保真原型過渡。

          Image title



          03.確定階段:


          到了這個階段,產品需求的功能布局、信息設計已全部確定,這時一份全面、嚴謹的‘高保真原型’就尤為重要。


          一方面可以為視覺同事的UI輸出、開發的落地實現等提供依據。另一方面在各種工作場景中,高保真原型都能發揮很大的作用,如交互評審、領導過稿、A/Btest、demo演示等等。

          Image title


          這一階段強調:細節核對 - 因為關系著UI輸出、界面實現等工作,所以需要注意各種交互細節,以防出現設計、流程上的漏洞。


          有2個核對緯度上的檢查:


          a. 規范對齊


          若團隊內部有設計規范時,一定要對齊字體大小、顏色、布局、間距等視覺元素。且能復用已有樣式就盡量復用,避免出現“一個功能,兩種樣式”的情況,如圖:

          Image title


          b. 交互走查


          高保真原型輸出后,需要根據交互自查表,一一梳理原型說明是否存在漏洞,以防出現異常流程和內容狀態。Image title


          另外,當你想要獲得用戶反饋、測試你的想法是否為業務/用戶創造價值時,盡量使用高保真原型。原因在于:能夠產生真實的操作效果、給用戶帶來‘身臨其境’的瀏覽體驗。

          Image title

          最后總結一下,不同階段的原型用途:


          ·草圖:快速表達想法、驗證需求、展示思考過程。

          ·中保真原型:梳理大體產品框架,繼續優化功能。

          ·高保真原型:為UI輸出與開發實現提供依據、測試用戶反饋、制作交互demo、向領導過稿等等。

          Image title





          Part2:原型和用戶體驗5個層面


          另外我還發現,結合‘用戶體驗5個層面’來看不同階段的原型,兩者是多么地吻合、有理有據。


          01.戰略層和范圍層 - 草圖


          產品想要做什么?如何去滿足戰略目標?在構思把目標和需求轉變成功能和內容時,用草圖的方式是極為合適的:快速表達、即時驗證,能讓概念想法馬上‘可視化’出來。

          Image title



          02.結構層 - 中保真原型


          想法表達后,需要為產品構思一個具體的框架結構,根據業務目標和用戶訴求,不斷地修改產品功能、信息設計,慢慢完成產品的定型。所以這時候只需產出一個大體上看得懂、方便修改的中保真原型即可。

          Image title



          03.框架層 - 高保真原型


          這是原型設計的最后階段,產品關系已理清、功能內容已確定。這階段注重原型的界面細節處理,如梳理異常流程、信息的不同狀態、是否對齊規范等等,以便后期的界面實現,所以一份高保真原型就尤為重要了。

          Image title



          04.表現層 - UI效果圖


          原型確定后,接下就是UI優化階段了,這時候產品的最終效果也就出來了。產品的下次功能迭代,也是根據此UI效果圖的基礎上進行原型優化、修改。

          Image title





          Part3:交互原型的原則


          最后簡單說下,原型產出的幾個原則:‘使用灰色圖’和‘復用已有樣式’,避免在今后工作上踩坑:


          01.使用灰色圖


          原型就要有原型的樣子,大面積的彩色布局,很容易讓人覺得這是UI效果圖(視覺同事可不背這個鍋),尤其是在交互評審會上,這種細節更應該注意。



          02. 復用已有樣式


          這個上面已經說了,能復用樣式就復用,避免出現“一個功能 兩種樣式”的情況,否則和視覺、開發同事對接原型時,會造成一定的理解干擾。



          總結:

          以上對交互原型的一些見解,若有描述得不當請多指教,下面是總結文件(轉發截圖給我可領?。?。

          Image title


          文章來源:UI中國

          當我們談論設計的高級感時,到底在說什么?

          資深UI設計者

          對于「高大上」即高級感這個抽象的概念,其實每個人的理解都不盡相同。身為設計師,在很多時候都需要去理解需求方所提出的「高大上」的含義,然后在自己的理解與需求之間找尋最合理的解決方案。

          個人理解的「高大上」不僅是作品表現形式的高級感,也關乎時間的維度。有著持續生命力的經典設計如包豪斯或無印良品式的設計是「高大上」的,而區別于當下泛濫、普遍、常見設計的有獨特風格化視覺語言的,也是另一種形式的高級感。本文將從這兩個不同的角度來為大家拆解提升作品高級感的技巧。

          傳統意義的高級感,是少即是多的審美情趣

          傳統意義上的「高大上」即所謂的高級感可以用現代主義建筑大師密斯·凡· 德羅那句著名的「Less is more」(少即是多)來形容。這句概括現代設計精神的金句,影響了幾代設計師,不僅改變了世界建筑的面貌也改變了整個世界設計史。德國著名的工業設計大師迪特爾·拉姆斯也曾在他的「設計十戒」里有提到「好的設計是盡可能的無設計」。

          那些被大眾所接受的傳統意義上的「高級感」,拆解開來其實可以理解為克制感與性。高級感的營造往往是深遠的意境、極簡的表達以及的細節追求。那如何來實現設計作品的高級感呢?

          1、顏色傳遞情緒少顯高檔

          每種色彩都會給人不同的心理感受,相較色彩濃烈情緒飽滿的用色,傳遞情緒少的顏色更能給觀者治愈的能量。所以除了減少使用顏色的數量,降低色彩的飽和度或者多使用不明確色相的顏色都能削減色彩對人情緒的影響,起到提升作品高級感的效果。此外使用黑白灰或者單色,也容易降低色彩本身對人情緒的影響,營造高級感。

          比如很多人喜歡的「莫蘭迪色」,還有經典的黑白灰。

          2、字體選擇不宜多,簡單即是美

          字體選擇一般不宜超過三種,多利用文字大小對比營造信息層級關系而非文字種類。對于追求高級感更是如此,字體種類選擇宜少不宜多,簡單的字體好于自身過于個性復雜的字體。

          還有一種在做設計時讓文字顯高級的方式就是將文字圖形化與符號化處理。圖形從視覺表現力和神秘感上會比我們一眼就能讀懂的文字更勝一籌。這大概就是為什么很多人會認為英文比中文看起來更有「高大上」的感覺,而在中文排版中加入英文能從視覺感知提升高級感。其實當在設計里使用如拉丁語、丹麥語等我們自身更加不熟悉的語言文字時,這種高冷的疏離感會讓感官上的高級感更強烈。所以想要讓文字元素顯得高端,一個小技巧就是讓文字顯示在第一時間不易被解讀出來。

          3、善用留白,營造高級感

          善用「留白」也是對做所謂「高大上」的設計非常有效的一種表現手法。恰當的留白可以更加突出主題內容,讓重要的信息更準確的傳達。「留白」自身也可以營造出一種很好的空間感,讓畫面得到延伸,給觀者留出更多的想象空間,呈現一種意境美。

          很多時候信息和元素越多、越大就越難把握。多做減法去蕪存菁,避免無意義的視覺元素堆砌和雜亂無章,縮小或減少次要元素的存在感,利用合適的留白反而能讓你的設計更有高級的氣質。

          4、高質量的圖片素材

          在做平面設計的時候,高質量的圖片是設計質感有保障的重要前提。無論是在圖片庫尋找圖片素材,還是自己進行照片的拍攝,高質量的圖片一般都需符合以下兩條原則:

          1. 圖片清晰度高,拍攝角度、光效構圖等專業有講究。
          2. 圖片符合當下的審美趨勢,迎合時代的審美情趣。

          高質量的免費圖庫Unspalsh、 Pixabay、500px、Getty Images 等,都可以提供不錯的基礎素材。

          5、除了設計本身,還有工藝和材質加持

          營造設計的高級感,除了視覺設計效果本身的高階氣質,善用工藝與材質同樣能讓你的作品高級感滿滿。對于平面設計的書籍、包裝、海報等宣傳物料設計,合適的工藝與材質選擇會讓作品的質感得到提升,甚至可以彌補設計上的不足。

          雷射雕刻、燙金、凸版印刷、無墨壓印、絲網印刷、專色印刷等特殊印刷工藝的使用,手工裝幀或人工制作的加入,都能為打造「高大上」的設計增色不少。

          對于線上的視覺設計而言,給作品的細節增添有質感的材質也是豐富設計層次、打造高級感的方式之一。

          當下的高級感,是特立獨行的個性追求

          就像在開頭所說,你永遠不會知道需求方說的「高大上」到底是哪一種「高大上」,對方想要表達的感覺到底是哪種。通常可以在進行更加深入溝通之后,明確后面的設計方向。當普世經典的「高級感」并不在對方想要的感覺范圍內的時候,我們需要在「高大上」的光譜上搜尋更加契合需求的設計方案。

          這個時候,需要有針對性地營造不同的視覺風格,創造出區別于流俗、更加「脫俗」的設計。在溝通的時候,客戶所描述的「高大上」通常會帶有一些明顯的情緒、感知上的特征,抓住這些特征來進行針對性的設計也就成了關鍵。

          1、幾何元素和色相對比所營造的時尚感

          每年對于時尚與潮流感的界定一直在變,這一點非常值得注意。就像在前文所提到的「高大上」不僅要考慮作品的表現形式,也要顧及對時間維度的考量。比如站在當下這個時間點上,高飽和度紅藍雙色和大范圍漸變的視覺表現,就是 2019 年高度普及并被認可的視覺潮流形象。營造時尚感使用更簡約的幾何字體、幾何元素,搭配對比明顯的幾何色塊,小巧凝練的文字排版,這些都更容易塑造出符合當下的時尚感。

          同時,低飽和度、高素質的圖片打底是常見的設計技巧,這樣也更容易創造出色相對比,從而將時尚高級的感覺給提煉出來。

          2、巧選字體和配圖凸顯文藝范

          配圖的選取,色調的后期調整與文字排版的選擇,很大程度上決定了文藝氣息能否營造出來。午后的陽光,慵懶的萌寵,粼粼的波光,延伸的道路……這些能夠沾上詩意的配圖,搭配上經典的襯線字體如宋體(明朝體),再運用相對清晰簡單的上下或左右式布局,就能很快將作品打造出文藝范兒的氣質。

          3、把握好冷峻的氣息,創造出科技感

          未來一點,科技一點,諸如此類的描述也常常緊隨「高大上」三個字出現在甲方爸爸的需求里。雖然使用藍紫之類偏冷的色調或是簡潔的黑白灰是立刻能想到的選擇,但打造「科技感」的精髓還是在于設計作品的情緒傳達要少和冷。冷峻的線條,抽象幾何元素,無襯線簡潔又幾何感強的字體,加入與設計主題相切合的科技衍生物或是帶有明顯近未來屬性的物品為輔助元素,都是塑造作品「科技感」強有力的方式。

          4、強化視覺主體,營造沖擊力

          視覺張力的營造有多種方法,但核心還是在于營造凝聚力與速度感。整個畫面和布局要有一個非常明確的視覺中心點,元素和布局都應清晰地圍繞這個視覺中心點來展開設計。這個點可以是一個物品,一個標題,甚至可以是無形的存在,但一定要讓人能明確感知。輔以加粗、凝練的字體,大特寫、發散式的視覺裝飾和引導,沖擊力就出現了。

          當然,在色彩上為了兼顧到整體視覺的情緒,色彩的飽和度可能會偏高。雖然這樣偏離了傳統意義上「高大上」的設定,但是如果要兼顧需求,有舍才能有得。

          5、深入挖掘文化特征,進行風格化設計

          「風格化」設計的需求其實并不少見,問題的關鍵在于設計時要往哪個風格去偏移。是「和風」還是「韓流」,是「德味」還是「美式復古」,或者選擇時下最in的「國潮風」?無論是哪種風格化,都意味著需要深入挖掘相應的文化,才能有針對性地進行風格化的設計。我們后續會單獨撰文來寫風格化設計的事情,今天這里就不贅述了。

          高大上并不是一個的答案,它是一個涵蓋一定范圍的光譜。而我們要做的,就是在光譜上,找到一個大家都能接受的位置。

          文章來源:優設

          全方位揭秘有贊的產品設計原則

          資深UI設計者

          作為一個產品團隊,我們最需要的永遠都是懂用戶懂需求,并保持不斷的創新力。有贊希望每個產品人在這里都能足夠發揮自己的能量,為客戶創造價值,并獲取價值。

          于是,我們需要一個大家共同理解、遵循、迭代的《產品設計原則》,從而保障我們可以在不偏離的情況下肆意揮灑、充分創新。

          原則概要

          有贊的《產品設計原則》,根據客戶需求、有贊的使命和愿景、當前生態環境,以及我們所處的發展階段擬定,它是每個有贊產品在設計過程中都要遵守的基本原則。我們還會定期對其進行優化和迭代。

          它是一個產品視角的原則,并非完整的市場、運營或者技術視角。在產品視角上,我們把產品設計過程分成了 4 個部分:產品定義、產品設計、產品研發、產品運營。

          產品定義:首先是定義客戶和場景,面對什么樣的客戶,服務什么樣的場景,它的使用場景是什么;然后是價值,客戶價值和商業價值;再是全局,要做全局的整體的思考。

          產品設計:基于場景拆分用戶的使用任務,任務再會拆分為功能和交互、內容和信息架構,最終把它呈現到界面上。

          產品研發:主要指界面設計、技術研發,還應該有用戶體驗及可用性測試的部分。

          產品運營:產品上線前后的基于產品的運營計劃,產品的增長管理、市場營銷、跟用戶之間不斷的互動過程。

          這 4 個部分不斷循環迭代,就是整個產品設計方法的過程。在這個過程中有贊的產品設計原則如下。

          產品定義

          1. 用戶和場景是一切的基礎

          清晰的用戶畫像和使用場景,是整個產品的基礎條件。

          2. 找到用戶價值和商業價值的結合點

          定義一個新的產品時必須找到用戶價值和商業價值的結合點,同時能夠滿足用戶價值和商業價值的需求通常是最優質的需求。

          3. 設計可持續正向增長的產品模式

          產品模式應該是可持續的、長期的、正向增長的,隨著用戶的使用,產品價值會越來越高,業務增長會越來越好,成本增長不斷下降。并且,給老產品帶來正向增長的新產品,要比只利用老產品來補給的新產品要好。

          產品設計

          1. 首先要是能夠最小可用的全場景閉環

          商家端的產品要做成全場景、完整業務鏈路的閉環,因為任何一個環節的缺失和不完善都會導致商家的生意無法正常運轉。

          2. 每個商家都應該是獨立的個性化的

          本質上我們的服務是「在云上為每個客戶提供了一個獨立的產品」,商家都是獨立的,每一個商家都有個性化配置一切的權利。我們要盡全力去實現每一個商家的獨立和每一個商家的個性化,而不是規定他們一定要怎么樣。

          3. 產品結構及呈現方式需要可延續可拓展

          一個被信任的商業服務產品首先應該是持續穩定的,產品的結構和呈現方式一旦確定下來,就不能輕易改版。這要求我們的設計需要面對業務變化的時候可延續,面對功能和服務增加的時候可拓展。

          產品研發

          1. 穩定壓倒一切

          沒有任何東西比 SaaS 的穩定重要,宕機了再好的產品都沒用。會影響到系統穩定的事情不能做。

          2. 說人話

          說對方能聽懂的話,做用戶能用明白的產品。不耍專業,不設置門檻。

          3. 永遠保持一致的表達方式

          每一處給用戶表達的內容,都需要是一致的,不做多樣化。從開始到結束,從 A 產品到 B 產品,從界面視覺到文字內容,以及標點符號。

          產品運營

          1. 不可減少,每個用戶都重要

          新產品不能比老產品的功能少,不應該輕易下線產品功能,不降低服務。不讓少數服從多數,每個用戶的需求和習慣都是重要的。

          2. 先有,再,然后易用,最后好看

          有是最基礎的體驗,有總比沒有要好。然后使用效率要很高,再然后才是要好用易用,最后才是要好看。當然,丑也是不行的。

          3. 持續關注自己的「孩子」,哪怕她已經嫁人

          作為一個產品人,應該持續關注自己做過的產品,哪怕這個產品已經不歸自己管了,也應該經常關注并思考他的發展和進化。

          4. 不騷擾用戶,不群發

          我們的責任是幫助商家成功,不是為了讓我們自己的生意更成功,我們沒有權利去為了自己的商業目的不斷騷擾用戶。用戶通常不看系統消息,群發信息起不到溝通作用。

          一些常識

          • 沒有人會看公告。
          • 沒有人會看系統消息和群發短信。
          • 幾乎沒有人會改默認設置。
          • 習慣路徑的設計,比少一次點擊重要。

          有贊產品設計原則分享速記

          以下是白鴉在有贊內部關于《產品設計原則》的分享速記。

          在有贊產品設計原則這件事上,我們想了很久。有贊最早期的時候,產品的設計原則主要靠我和麥麥(有贊首席產品設計師)等幾個人的默契,以及慢慢形成的習慣。我們在一起天天聊,然后就有了一些共同的產品觀,以及產品設計的習慣和理念。

          但是,隨著我們的小伙伴越來越多,我們注意到有很多東西,都要再重新給每一個人講一遍。坦白說,所謂的產品設計原則或者產品觀,并不是全世界通用的。每一個公司、每一個團隊,因為業務性質和業務特點的不同,都可能會出現他的產品設計原則跟別人的不一樣。

          所以我首先要說,產品設計原則這件事,沒有誰是最好的。只有你的產品設計原則是否最適合你的業務,最適合你的產品。因此,我們發現很多新的同學帶著原來在其他公司、其他崗位上的設計原則、設計思想,加入到有贊這家公司之后工作中有一些不適應,你不知道我們在產品設計時為什么會那么想。甚至我發現新來的同學經常會犯一些我們認為在這個業務性質上,在我們的原則上,我們的價值觀上不應該犯的錯誤。

          所以我們花了很久的時間去討論有贊的產品設計原則,去推敲,最后把它確定下來。專門做這次的分享,而這次分享只是我們開始落實有贊產品設計原則的一個 kick-off ,之后我們還會把這次分享的內容再細化做出案例,然后對公司新入職的每個產品經理進行考試,如果考試不過關是沒有資格轉正的。因為有贊產品設計原則是這家公司與用戶的基本原則,這些東西我們要保持一致。

          我舉個有意思的例子。我們經常發現新來的同學在優化產品的時候,他會發現某個功能可能有一點臃腫(麻煩且沒什么人用),然后就把這個功能下線了。如果是 to.C 的產品,把某個功能下線是很正常的事情,比如微信去年上了一個可以去看最近三個月誰沒有聯系,最近半年誰沒有聯系的功能,上線了一個版本后,下一個版本直接就刪了。 to.C 這樣刪是沒問題的,但是 to.B 的產品你不能刪。我問新來的同學你為什么把它刪了?他說我看了一下數據,沒多少商家用,于是就把它下線了。我要強調在 to.B 的產品上不能這么刪,原因很簡單,哪怕只有一個商家用,你都不能下線。如果這個產品有危害你不得不下線,你要么做一個高級功能把它替換下去,要么就得先跟商家溝通說:我們打算把它下線,對你有影響嗎?這是一個基本的 to.B 的產品設計原則,非常基礎的原則。

          不僅僅是因為你要堅持這樣的原則,甚至從法律上說你都應該有這樣的責任。因為商家在購買你的系統和你簽協議的時候他買了那個功能,而你把那個功能拿走了,你就是沒有很好的履約,你負有法律責任,說嚴重點就是這樣的。

          另外,我們的產品設計師如果依據「大部分商家」和「一般情況下」去規定產品設計,也是一個壞習慣。

          比如,「一般情況下商家的簽到活動都是持續的」,于是產品設計師就把「獎品被搶完」寫成了「獎品被搶完,下次早點來」。這是個典型的壞習慣案例,「下次早點來」不只是多余的,還是錯誤的。如果某個商家的活動就這一次呢,你強行加了一個「下次早點來」對這個商家來說不就是個 bug 嗎?還是那句話:不能因為多少商家都這么用,我們就要求所有商家這么用。

          但是今天在中國幾乎沒有成熟的 to.B 產品經理,所以大部分的同學沒有這樣的習慣,來了就把功能下線了。然后每次問,每個人都要重新說一遍,不厭其煩。所以我們今天就專門把所有產品經理叫到一起說一遍。說完了我們還會把內容做成手冊,大家可以理解,這就是有贊產品設計的法律,我們會把它上升到非常高的高度來看待這個問題。

          有贊這家公司的所有做事方式、所有思考,以及所有出發點,都是基于我們業務。而我們的業務是基于什么?我們的戰略又是基于什么?都是基于我們長期的使命和愿景,所以我必須要給大家回顧一下有贊的使命和愿景。

          我們的使命是幫助每一位重視產品和服務的商家成功?!该恳晃弧购汀干碳页晒Α故俏覀冏钪匾年P鍵詞,我們要服務的是每一位商家,然后幫助每一位商家成功,但是為了整個生態的健康,那些不重視產品和服務的商家,我們是(可以)不服務的。所以我們在產品設計原則上,在產品的一些功能的選擇上,如果這個功能做完了會導致商家不重視產品和服務,我們是不會/能做的。

          舉個例子:消費者購買之后(可以)有一個評價,我們的購物評價是要么開啟要么不開啟這個功能。我們不接受商家去刪購物評價,因為商家一旦可以刪了消費者的差評,他就很可能不會那么重視產品和服務了。所以有贊永遠不會提供刪除商品評價的功能,商家要么就不開啟??梢圆挥?,如果要用就要接受有人說你不好,商家可以去跟消費者溝通,溝通完了消費者自己改,但是我們不提供讓商家刪壞評價的功能。所以,這就是最基本的有贊產品設計原則,我們只服務重視產品和服務的商家,我們所有的產品設計原則都是需要這樣。

          使命是一個很長遠的事情,是這個公司活著的理由。而愿景是什么?愿景是我們認為在可見的時間內,我們可以達成的目標。我們在愿景里寫了兩條:

          第一條,成為商家服務領域里最被信任的引領者。因為要成為「引領者」,所以我們對于每一個人的專業性要求很高;因為要成為引領者,所以我們愿意把我們的產品設計規范、產品設計原則、產品界面的東西拋到網上去。大家看到我們在有贊云上直接共享了,直接開源了我們很多很多產品設計的東西,是因為我們希望更多的同行一起探討一起分享,大家可以隨時訪問 design.youzan.com。我們愿意接受別人來學,今天大家會看到甚至連一些跟在我們后面的所謂的競爭對手們都在抄我們,大家看到一些「SaaS」的操作后臺跟有贊長得一模一樣。沒事,大家在這件事情上胸懷應該開闊一點,因為有贊要做引領者,所以我們就應該有這樣寬闊的胸懷,就應該把它共享出去。這也是為什么今天這一場分享會,我們是用「愛逛直播」面向全網直播。我們歡迎所有的同行一起學習一起交流,甚至我們接受所謂的競爭對手來抄我們,因為我們要做引領者。這就是我們自己基于這樣的愿景要去做的事情。

          第二條,我們給這個組織還定了一個愿景,就是持續做一個 Enjoy 的組織。因為要持續 Enjoy ,所以我們在做產品設計的過程中要好玩。

          我們的產品里要想到一些好玩的東西,然后這家公司的氛圍也會好玩,我們給商家的活動也會好玩,這是因為我們的使命和我們的愿景。好多新同學不知道為什么有贊這家公司除了清明節什么節都過,因為我們要 Enjoy,所以是個節我們都會把它弄得好玩一點。這就是為什么我們要用購物直播的愛逛來做這次直播,因為它好玩,這是我們做這些事情的原則。

          那么后面我講到的每一條有贊的產品設計原則都是基于我們的使命和愿景去做的,沒有任何一條跟它沒有關系,我們所有的思考點都是基于這個出發的,越在有贊這家公司呆的時間長的人,越能理解我們的每一條原則為什么那么做?為什么那么去設計?

          說完這些大的原則,我們再去看看面對的情況。剛剛我們說所有的原則都是基于我們的目標和我們面對的業務性質、業務情況、市場情況,那么我們面對的市場情況是什么樣呢?我們是什么樣的業務類型呢?

          我們去看一下今天全世界估值最高的、最值錢的 SaaS 公司 Salesforce,這是 Salesforce 從上市之后到現在的股價,這家公司市值快 2000 億美元了。

          Salesforce 做了十年才上市,上市的前五年股價幾乎沒動,因為 SaaS 需要慢慢積累,然后 Salesforce 上線了 force.com,相當于有贊的有贊云,然后股價開始漲,一路在漲,中間還有個漲是因為 Salesforce 要做 AI。而且一路漲的這些年里很有意思的是,Salesforce 每一年的收入增長標準是 34%,這是全世界最牛的 SaaS 公司的成長。

          我們再看和有贊微商城業務很像的 Shopify。

          Shopify 做了五年上市,上市后的前三年股價幾乎沒什么動彈,從 2017 年開始漲,市值也快 200 億美元了。

          一個 2000 億美元和一個 200 億美元的 SaaS 公司,早期都是這樣。所以我們一直說 SaaS 的業務是什么?SaaS 的業務是:首先要花 5 年以上時間做產品,然后再不斷地迭代和優化產品。(因為有贊的使命是「幫助每一位」,所以未來可以有多大的規模對有贊來說非常重要)所以有贊的產品要先服務通用的客戶,再服務垂直行業,再服務商家的個性化。在第二個 5 年時間,要同時開始培養銷售能力,獲取更多的客戶賺取更多的錢。然后,在第三個 5 年時間,我們發現所有的 SaaS 公司都在收購公司,最近 Salesforce 花了 190 億美元收購了一家做數據可視化的 SaaS 公司。為什么要收購其他公司呢?因為你手里有客戶了,你就可以給客戶賣更多的軟件,那些軟件不用自己做,可以買,買完以后賣給更多的客戶?;旧希恳粋€ SaaS 公司走完了這十五年,可以躺著再走十五年,這就是 SaaS 的業務類型。

          而我們今天在中國市場所面對的不僅僅是像 Salesforce 和 Shopify 這樣,需要長時間去做產品,需要很長時間去做服務,做企業服務之外,我們還面對三座大山。

          第一座大山,是今天中國電商平臺的極端壟斷。Shopify 的商家有 50% 的流量來源于谷歌,其中 30% 到了 Shopify 的店里,還有 20% 去了 Amazon 的店里。而在中國,在百度上搜購物相關的詞全被淘寶投了廣告,所以中國的電商幾乎還沒有多少來自搜索引擎的流量,因為電商平臺太壟斷了。所以商家需要「一個有交易功能的獨立官網」的能力。在過去的很多年成長得非常慢,只有過去的兩到三年才看到,中國的商家開始希望有一個自己的帶交易功能的官網。這就是最近兩三年大家看到的,商家在電梯和公交站牌投廣告的時候,除了品牌商有一個搜索框到天貓旗艦店之外,還會有一個小程序的二維碼,或者是微信公眾號的二維碼,然后掃完二維碼打開的基本全是有贊的店。我可以很負責任地說,今天在整個微信生態內,真正重視產品和服務的品牌商家的小程序和公眾號的 H5 官網,90% 以上都是用的有贊,尤其是有成交的。為什么?因為,我們有很好的風控體系,我們有售后維權體系,今天中國只有這一家公司有超過 100 人的消費者維權團隊,只有這一家公司有完整的擔保交易體系,只有這樣我們才能保障整個生態的健康,才能保障我們的商家是重視產品和服務的。但是這座大山我們跨了很久,還在越。

          第二座大山,是商家在購買有贊的時候會認為有贊能給他帶來增量的生意(以為用了生意一定會馬上就好起來,忽略了有贊是個工具,還需要自己用好這個工具),這是商家購買時候的動機。但是并非所有的商家都能把私域流量運營好,他購買了但他把有贊用好的能力不一定夠,活躍度不夠,這是我們今天在克服的問題,所以我們做了那么多的商家培訓,做了那么多的運營指導。

          我們是從中小企業開始服務的,最近一年多我們開始做大客戶以后,每一年的大客戶比例都在不斷的增加,我們現在大客團隊已經有幾十人了,明年我們應該有上百人的大客團隊,我們會簽更多的大客。尤其是有贊云上線之后,我們可以幫每個客戶個性化,我們的大客戶會變得越來越多。但是我們的大盤畢竟是中小企業數量最多,這樣我們又要越的第三座大山是什么呢?是中小企業的閉店率、死亡率比較高。你好不容易獲得一個客戶,他卻因為自己其他的原因把生意做失敗了,你做的再好沒太大用,這是我們要越的三座大山。

          所以,我用四個字總結,就是:路遠天黑。因為路遠天黑,因為 SaaS 這個行業是這樣,所以我們必須把每件事做的非常認真,我們要把我們的設計原則完全的貫徹下去,很多東西我們要整齊劃一的一直能走到那一天,要用非常穩定的產品質量的輸出,非常穩定的用戶體驗質量的輸出,這是為什么我們應該比所有的公司都更重視這件事情的原因。所以,這是我經常說的,這家公司產品理念就應該是「聰明人在下笨功夫」。我們知道在什么地方可以耍聰明,但是我們要用的是長期能增長的笨功夫。這是我們的使命、我們的愿景、我們面對的這個行業特點決定的。大家會看到在官網上,我們公布了這些使命、愿景,和價值觀。

          一家優秀的公司、一家偉大的公司是敢于把對自己的要求和它的使命、愿景、價值觀公布在官網上的,因為我們公布了就是讓所有的客戶來監督我們。我們在官網上沒有直接寫「幫助每一位重視產品和服務的商家成功」,我們寫了這個階段更具象、更能讓客戶理解的話。

          首先我們告訴全社會,有贊是一個商家服務公司,我們幫助每一位注重產品和服務的商家私有化顧客資產、通過互聯網拓展更多客戶,并全面提高經營效率、全面助力商家成功。為了讓客戶理解我們把它這樣解釋了,這是為什么官網上跟我們內部講的不一樣的原因。

          然后我們寫了我們要致力于成為商家服務領域里最被信任的引領者,并持續做一個 Enjoy 的組織。我們寫我們是一個商家服務公司,寫我們是從工具開始慢慢做生態,寫我們的經營理念是為客戶創造價值并獲取價值。為什么要獲取價值?因為我們要走很遠,如果我們不賺錢我們活不到那一天。我們要走很遠,所以我們做每一個產品都要考慮客戶價值和我們自己的商業價值,我們要追求更長期的經營和追求持續的增長。所有的這些原因,都是因為我們自己的使命和愿景,以及我們面對的環境。

          我今天專門再重新講一遍,是希望每一位有贊做產品的人能理解這每一句話背后的思考和原因。我們再說自己的戰略,這家公司會從一個 SaaS 公司變成一個大數據公司,變成一個人工智能公司。

          我們有電商 SaaS ,除了電商 SaaS 我們還做了門店 SaaS ,然后我們在做有贊云,我們在嘗試分銷、嘗試有贊支付、嘗試有贊金融、嘗試有贊廣告業務,我們未來有更多的增值業務,這是我們一直在走的業務。我們今天在門店 SaaS 的業務剛剛開始,所以我們還有很遠很遠的路要走。

          基于前面這些大背景,你會看到這家公司的所有的思考方式和思維理念,就是我們要給我們的客戶提供解決方案,來幫助我們的客戶在生意上成功。我們的客戶成功了,我們可以通過客戶的介紹獲得更多數量的客戶。因為我們服務了更多數量的客戶,我們才能更理解客戶的需求。因為我們更理解客戶的需求,我們才能把解決方案做得更好;把解決方案做得更好,客戶會更成功。我們一直在圍繞這樣的一個正向循環,在做我們所有的布局、所有的思考、所有的產品、所有的投入。

          所以你會看到,這家公司只會通過解決方案幫助客戶成功來獲取更多的客戶,不會在市場上拼命打廣告,不會在市場上拼命做補貼來獲取客戶。為了幫助客戶成功獲取更多客戶的目的,是為了我們更理解客戶的需求,所以我們更要重視今天已經付費客戶的需求。我們不是不重視還沒有付費客戶的需求,我們更重視付費商家的需求是因為要理解現在商家的需求,把它做好,然后再去豐富解決方案,然后再來服務更多的客戶,這是我們整個的經營理念。原則上,從有贊云正式上線之后,我們不接受客戶說「我的需求你們有贊滿足不了」。滿足不了只是時間問題。

          這就是我們想要做的事情,這就是這家公司整體的思考方式和整體的設計理念。這個東西不只是產品在考慮的問題,也是公司的整個服務體系、銷售體系、產品運營體系、技術體系以及包括 HR 體系、財務體系都在用這樣的思維方式考慮所有的問題,這是我們整體的東西。

          接下來我們再來說我們的設計原則,來得早的同學都見過這個設計原則,這是我們最早定的一版很粗的設計原則。設計原則是:說人話、產品應該是低門檻的、產品盡量讓商家可以配置、產品要做到最小可用、所有的產品表達是一致性的,每一個商家盡量獨立。

          這就是我們第一版的設計原則,接下來我要開始說未來幾年有贊的產品設計原則。

          我想強調一下,剛才前面的內容是全公司視角的。

          公司每一個人的視角和思考方式。所以,接下來所有內容都是「產品視角」。它不包含我們的商業體系和服務體系的視角。接下來我會提到產品研發,產品研發不是指技術一定要這么干,是產品研發那個階段要做的東西。也會講到產品運營,也不是說運營部門一定要這么干,是產品人在產品視角上應該怎么考慮運營問題,應該是什么樣的原則。

          在說產品設計原則之前,我先說基本的產品設計方法論。有三個部分。

          第一部分,是產品設計的邏輯,發現問題、發現客戶的需求,然后去解決問題,然后再去驗證這樣的問題有沒有被解決,驗證完問題之后去發現新的問題,再去解決問題。所以每一個產品人在做的事情,其實就是發現問題、解決問題、驗證問題的整個過程。

          第二部分,是產品人應該知道自己的核心能力是什么?產品人的核心能力有三個:

          第 1 個是一件事情能把它想清楚。任何一件事發生了,你能不能想到它底層的原因是什么?它的根本是什么?

          第 2 個叫說得明白。因為產品是整條線的那個牽頭人,如果一個產品人不能把你的想法這件事情的東西說明白,就是能力很差,不存在表達能力很差的產品經理。有人說張小龍的表達能力就不好,那是你們沒見過他講產品邏輯和思考的時候表達能力有多好。「不善」演講不代表表達能力不好,要的是把自己的思考清晰表達出來的能力,而非煽動能力。

          第 3 個是要有能力快速地去試。這個試包括但不限于把產品搞上線讓用戶來用,也包括了可能做一個粗的原型,也包括了可能去做訪談,去做客戶的溝通。

          然后再說產品人的設計方法,有贊的《產品設計原則》,根據客戶需求、有贊的使命和愿景、當前生態環境,以及我們所處的發展階段擬定,它是每個有贊產品在設計過程中都要遵守的基本原則。我們還會定期對其進行優化和迭代。我們把設計方法分成了 4 個部分:產品定義、產品設計、產品研發、產品運營。

          產品定義:首先是定義客戶和場景,面對什么樣的客戶,服務什么樣的場景,它的使用場景是什么;然后是價值,客戶價值和商業價值;再是全局,要做全局的整體的思考。

          產品設計:基于場景拆分用戶的使用任務,任務再會拆分為功能和交互、內容和信息架構,最終把它呈現到界面上。

          產品研發:主要指界面設計、技術研發,還應該有用戶體驗及可用性測試的部分。

          產品運營:產品上線前后的基于產品的運營計劃,產品的增長管理、市場營銷,跟用戶之間不斷的互動過程。

          這 4 個部分不斷循環迭代,就是整個產品設計方法的過程。在這個過程中有贊的產品設計原則如下。

          1. 產品定義

          第一個,產品定義的產品原則。

          第一點,用戶和場景是一切的基礎。

          清晰的用戶畫像和使用場景,是整個產品的基礎條件。

          在有贊做產品,如果你不能說清楚這個項目你思考的核心使用場景,它的用戶畫像,你什么都不可能做好。所以用戶畫像和使用場景是最基礎的東西。

          第二點,找到用戶價值和商業價值的結合點。

          定義一個新的產品時必須找到用戶價值和商業價值的結合點,同時能夠滿足用戶價值和商業價值的需求通常是最優質的需求。

          你在定義一個新的產品時必須找到用戶價值和商業價值的結合點,不是所有的用戶需求都要今天滿足,因為如果那個用戶需求跟商業價值之間不能契合上,它的優先級可能就會被降低。

          我們去做一件事情,這件事情有兩個軸,一個軸就是用戶價值,一個軸是商業價值,我們要找到這兩個軸里最契合的那個點,然后那個事情的優先級才是最高的,這就是最基本的原則。

          舉個例子:假如微信公眾號的應用很淺,要點公眾號菜單打開一個 H5 , H5 的交互也不那么好。如果把它搞一堆組件,把它做成原生的小程序,那體驗是不是更好呢?做了小程序之后,用戶的記錄還能夠被留存下來,還能找到用過的小程序,小程序的內容還可以被很多人搜索,那是不是更好呢?這是基于用戶體驗來說的。但是基于用戶的體驗和用戶的價值之后,是不是一定要做它,還要考慮對于微信的商業價值是什么,讓用戶的體驗更有粘性?讓場景能擴張?商業上可以讓內容更封閉在微信的生態內?商業上打造一個新的閉環游戲生態?我們不知道這些是不是騰訊真實在考慮的決策原因,但我可以肯定每一個決策的背后都是基于用戶價值和商業價值這兩個點。

          有贊做所有的事情,決策的背后也是基于這兩個點,有很多客戶提各種需求,我們應該先看客戶是誰?畫像是什么樣子?這些需求的場景是什么?滿足這些需求的價值有多大?然后再看如何在這件事情上獲取商業價值,商業價值不代表一定是錢,它可能還有更多商業可期的東西。所以,任何決策的背后都應該是這樣,如果做一件事只能給用戶創造價值,商業價值是損失的,這件事優先級一定不高;如果一件事你只能夠獲取到商業價值,對用戶是沒有價值的,這件事情可以不做,這是有贊這家公司的基本原則。

          第三點,設計可持續正向增長的產品模式。

          產品模式應該是可持續的、長期的、正向增長的,隨著用戶的使用產品價值會越來越高,業務增長會越來越好,成本增長不斷下降。并且,給老產品帶來正向增長的新產品,要比只利用老產品來補給的新產品要好。

          你不能設計出來一個產品,那個產品是負向增長的,要設計一個產品讓用戶用完之后會有更多人來用,會帶動更多的正向的收獲,會獲得更多正向的需求,會帶動更多正向的收入,會帶動更多正向的客戶成功。而如果你做一個產品,只能解決短期的問題,不能長期正向循環正向增長,那這就不是一個好的產品。我們做任何一個產品任何一個功能任何一個業務,它都應該是可持續的、長期的、正向增長才是最好的。

          2. 產品設計

          在產品設計階段,有三個產品設計原則。

          第一點,首先要是能夠最小可用的全場景閉環。

          商家端的產品要做成全場景、完整業務鏈路的閉環,因為任何一個環節的缺失和不完善都會導致商家的生意無法正常運轉。

          這里的關鍵詞是「最小可用的全場景閉環」,最關鍵的詞是我們和 to.C 場景完全不一樣的,就是「全場景閉環」。to.C 的場景不是全場景閉環,你會發現做 to.C 的業務經常會出現:要做一個業務,大家開始一起頭腦風暴,認為要搞 100 件事,然后這個業務搞了 10 件事就敢上線了,上線就開始運營了,然后過了幾年公司都賺了錢了,業務都跑很順了,有很多用戶了,當年的 100 件事才只做了 30 件,其中有 20 件是在那 100 件事里面的,還有 10 件可能不是那 100 件事里面的,是別的地方的。這就是 to.C 產品,可以快速迭代,小步快跑。而 to.B 的產品最小的那個快速迭代也得是全場景閉環的,想做一個 to.B 的業務,然后列了 100 件事,對不起請先做夠 90 件,不做 90 件不是閉環不能上線。

          舉個例子:我經常講的,就是我們最早做收銀的時候,第一版沒有掛單功能。想一想一個收銀的產品如果有 100 個功能,掛單能排到前三十嗎?能排到前二十嗎?不能。于是我們犯了一個錯誤,就是沒做掛單功能就上線了。然后被客戶吐槽,說你們做的什么產品?連掛單都沒有。然后我們問客戶掛單重要嗎?客戶說重要啊。這就是做 to.B,必須要做到的。

          然后我們做了一個掛單只能掛 1 單,客戶又反饋,「什么產品只能掛 1 單」。我們問:經常掛很多單嗎?客戶說「偶爾要掛很多單」。

          掛單的場景就是你在超市排著隊買東西,結賬的時候需要再買個東西,收銀員把你的東西放一邊,后面的人先結賬買單,把你的單選擇掛單,等你把東西拿回來之后,她再把那個單取出來,掃個碼再把之前的東西放進去一起買單,這叫掛單。這場景豐富嗎?排的優先級高嗎?不高,但是你沒有,這個產品就不能上線。

          這就是 to.B 要做全場景、完整場景的閉環,如果你做不到完整場景閉環你都不好意思上線。所以在這家公司,大家千萬不要帶著 to.C 的思維來做產品的初期那個最小可用,那個初期的最小可用上線了,商家罵一頓走了,銷售白忙活了,等再去賣的時候商家說哎呀有贊我知道,很爛的,收銀連掛單都沒有。所以一定要把閉環做完,做 to.B 就必須要這么干,我希望大家能理解。

          第二點,每個商家都應該是獨立的個性化的。

          本質上我們的服務是「在云上為每個客戶提供了一個獨立的產品」,商家都是獨立的,每一個商家都有個性化配置一切的權利。我們要盡全力去實現每一個商家的獨立和每一個商家的個性化,而不是規定他們一定要怎么樣。

          軟件最早都是單機版,即使今天我們做了 SaaS ,其實也只是在云上給每一個客戶提供獨立的軟件,所以每一個客戶的商城都是獨立的,每一個客戶都有個性化他的商城的權利。如果成本可控的情況下,每一個功能都應該是可配置的,有的人想把購買叫「立即購買」,有的人想把購買叫「擁有它」,你就應該讓他可以去定義購買按鈕的文案。to.C 沒有人這么想過(因為一個產品都應該是一個統一意志的),但是 to.B 就應該是這樣,每一個商家都是獨立的,每一個商家都有個性化的權利,你要盡全力去實現每一個商家的獨立和每一個商家的個性化。

          我見過很多 to.B 的產品上來就不被接受,就是因為他們不懂這樣的基本理念。比如,商家說我有這個需求,然后產品經理說你應該那么用,請問誰規定商家必須要那么用?

          我給大家舉個例子:我給企業微信的產品經理說了好多次。我說企業微信能不能有標記未讀?原因很簡單,麥麥給我發的一條信息我看了,我判斷需要找一個稍微空一點的時間花幾分鐘回復他,我標記一個未讀,隨后再找回來回復他。企業微信的產品經理回復我說:企業微信里有個功能叫待辦事項,你應該把它加入到待辦事項。我很無語。

          這就是不會做 to.B 產品的人的思維方式,他希望和規定用戶的行為,但是 to.B 不應該這么干。微信可以這么干,但是企業微信就不該這么干,這是基本的 to.B 的思維。

          第三點,產品結構及呈現方式需要可延續可拓展。

          一個被信任的商業服務產品首先應該是持續穩定的,產品的結構和呈現方式一旦確定下來,就不能輕易改版。這要求我們的設計需要面對形勢變換的時候可延續,面對功能和服務增加的時候可拓展。

          一個好的 to.B 產品,有贊微商城的產品后臺界面結構、產品架構,從 2015 年開始就沒有改過了。2015 年我們上線的時候就說我們要上線一個版本,這個版本的產品架構在未來永遠不改。一個 to.B 的產品不要沒事折騰改版,改版了客戶就不會用了, to.C 產品要搞點花樣,有點爭議沒關系,to.B 產品沒事兒不要動它。所以很多人知道,這家公司如果你要改商家管理后臺的導航必須我通過,是因為我不希望你改。

          因為它需要一直可延續,那么它就要求你在設計的時候是縱向的,豎著的導航,因為它有拓展空間(豎著有滾動條,橫著沒有)。

          還有我們的很多產品經理不理解,為什么要堅持有贊微商城的后臺概況、店鋪、商品、訂單都長這樣,商家會那么找嗎?我告訴你:只有中高端商家會跑到里邊二級導航找,大部分商家都會從首頁點擊,商家基本上不太會理解你的架構,所以我們那個產品架構是給誰用的呢?是給在座的有贊產品經理們用的。為什么?因為讓你不要亂放,告訴你商品就放在商品這里,訂單就放在訂單這里,店鋪就放在店鋪這里。確保這個產品有一萬個功能的時候產品結構還是穩定的,常用的東西在首頁可以找到,不常用的在二級導航里面可以找到,或者直接搜索到。

          所有的導航和所有的內容,都應該是商家的生意,你不要去搶他的,而我們跟商家之間的生意,放在設置里面,設置里面有一個專門的版塊是我們跟商家之間的關系,剩下都是商家自己管理自己的生意,我們在給商家做的是一個工作臺,整個有贊打開概況頁只有內容區左上角你買的什么版本,是有贊跟他之間的生意。設置里面二級導航最下面的有贊服務,是有贊跟商家之間的關系,剩下都是商家自己的,你不要攙和進去。

          舉個例子:最早我們把商家交的保證金,商家在有贊這里還有多少有贊幣,都放在資產里面了,這是不對的。資產是他的生意,不是你給他的東西,這是我們要做的規范。這些規則,商家懂嗎?他不懂,他在乎嗎?不在乎,在座的各位必須在乎,因為今天你有這么多功能,未來有一天這個產品有一萬個功能的時候,你現在開始不在乎,未來就崩了。

          我有一個做證券軟件的朋友,去年我在南京做產品培訓的時候他來找我,說白鴉我準備給我的軟件改了,我的后臺得改了,沒法干,我們有一萬個功能,太難用了,我準備改它,改得倍兒簡潔。我說:別,不需要那么簡潔,需要穩定,因為你有那么多功能甩不掉,是因為你要服務那么多的客戶,就需要那么多的東西,所以你需要一個穩定的產品架構。

          還有為什么你們會發現,我們的后臺看不出來是我們的后臺,因為我們沒有在我們的后臺放有贊 logo。很多軟件公司,把左上角的 logo 放成自己公司的 logo。一個商家在他的后臺天天看有贊的 logo,他為什么要看見你的 logo?他不需要看見你的 logo。我們的 logo 在哪?我們的 logo 在內容區最底下灰色放在那,那是一個版權聲明而已。

          這是我們做事情的原則,因為你要考慮你的用戶要什么。還有比如阿里媽媽,然后你會發現阿里媽媽的后臺花里胡哨的,阿里媽媽的每一個商家后臺產品長的都不一樣。一個商家的廣告投放后臺搞那么多花樣干嘛?

          所以我們前天又梳理到凌晨兩點多,然后規定接下來我們給商家用的 SaaS 產品,所有的布局方式都必須一致,左右布局,然后一級導航、二級導航、三級導航內容區規則必須一模一樣,因為任何一個商家用有贊的所有產品,習慣應該保持一樣,你不要讓他用 A 產品用 B 產品用 C 產品都要重新學習一遍,這是不行的。

          不過,我們的廣告投放后臺、商家資產的后臺,它是一個平臺型產品(這不是商家管理自己店鋪和消費者互動的后臺,而是商家跟有贊之間互動的后臺),雖然也要保持左右布局保持體驗一致,但是我們要做品牌露出,因為要聲明你在用有贊支付,這是你在有贊支付的后臺,你在管理你在有贊支付的資產。

          有贊以后給商家所有的后臺產品都必須左右導航,不接受上下導航,只有這樣商家用我們所有的產品的習慣是一致的,學習成本是的。這就是我想說的:產品結構和呈現方式需要可延續可擴展。

          3. 產品研發

          然后我們再說產品研發,今天主要說界面。

          第一點,穩定壓倒一切。

          沒有任何東西比 SaaS 的穩定重要,宕機了再好的產品都沒用。會影響到系統穩定的事情不能做。

          如果你要做一個功能,這個功能可能會影響到系統的穩定性,不要做。因為沒有任何東西比 SaaS 的穩定重要,如果你宕機了,你做得再好都沒用。

          這也是為什么這家公司應該是全世界唯一一家把恥辱時刻會出現的東西做成吉祥物的原因,為什么霸王龍是有贊的吉祥物?為什么辦公區里都是霸王龍?是我們想提醒每一個人:穩定是 SaaS 的第一要務。宕機了你什么都不是,你不能宕機,所以穩定壓倒一切。

          如果你做一個產品,產品呈現上也要穩定,而且這個穩定應該在方方面面持續保持。商家為什么覺得你靠譜?你怎么樣成為最被信任的引領者?你怎么做到最被信任?我們今天說一個商家靠譜,那家店在那里開 10 年了口味沒變過,然后你覺得他靠譜,對不對?

          正是因為這樣的原因,所以我不希望我們今天變明天變。所以這也是為什么我們每年兩場發布會是固定的, MENLO 在五月初,年底有感恩答謝會。 MENLO 發布會所有的設計主題都一定圍繞著電燈,可以每年換個電燈的創意,但是必須是圍繞著電燈,這故事要持續講下去,才會穩定被信任。MENLO 發布會的門口一定會看到愛迪生的那張圖片,這就是我們要做的,一定會在整個 MENLO 發布會的地方能看到那個燈塔的圖片,這就是持續做一個被信任的品牌要堅持的穩定,不止是系統穩定,有很多地方要保持「穩定」。

          第二點,說人話。

          說對方能聽懂的話,做用戶能用明白的產品。不耍專業,不設置門檻。

          說人話是這家公司的基本價值觀,大家都懂,我想說另外一個,拒絕設置專業門檻。今天有很多的產品經理有一個惡習,就是沒事喜歡取名字,沒事習慣造詞。我最害怕和做廣告的人打交道,廣告行業有無數的詞,就好像今天中國傳統文化圈子一樣,非得搞一些詞,搞一定的門檻,這是不對的。所有的產品名字、所有的詞、所有的用語都應該是人話,都不應該設置門檻,這也是為什么我們的產品取名好像特別沒文化,你看我們產品名字「有贊零售」、「有贊美業」、「有贊教育」顯得特別特別沒文化,人家都叫「智慧XX」、「XX生意寶」,但是我們就叫這樣的名字,因為我叫了這樣的名字可以十年二十年不改名字,客戶一看就懂它是什么。但凡要占短期的 PR 和市場營銷宣傳的便宜,設置那么高的門檻,商家還要去理解:哦?你那個什么生意寶是什么?哦,原來是這樣的啊。

          還有我不知道你們現在有沒有在堅持,我想強調一下,我們的二級域名不要用英文,有贊零售就是 lingshou.youzan.com,然后每一個產品的二級域名都應該是拼音且每一個產品的二級域名都要考慮拼錯的時候也可以打開(必須 linshou\lingshou\linsou\lingsou 都應該可以跳轉到有贊零售的二級頁面),這是取二級域名的原則。沒事搞個英文,你覺得商家知道那個英文是什么意思嗎?這就是要知道怎么是說人話,說人話在每一個細節里。

          第三點,永遠保持一致的表達方式。

          每一處給用戶表達的內容,都需要是一致的,不做多樣化。從開始到結束,從 A 產品到 B 產品,從界面視覺到文字內容,以及標點符號。

          賬戶就叫賬戶,登錄就叫登錄,在 A 產品是這樣,在 B 產品也是這樣。前天檢查到凌晨兩三點鐘,還發現有的產品叫通用設置,有的產品叫高級設置,有的產品叫我的設置,這是不對的,要叫通用設置所有的產品都要叫通用設置,名字就需要被固定化。如果你覺得這個設置要改個名字,我們商量商量全線一起改,這是你要保持的一致的表達。還有,to.C 的產品可以花樣很多,to.B 的產品不需要那么做,所以一定要有一致的表達。

          4. 產品運營

          然后我們再去說產品運營的部分。

          第一點,不可減少,每個用戶都重要。

          新產品不能比老產品的功能少,不應該輕易下線產品功能,不降低服務,不讓少數服從多數,每個用戶的需求和習慣都是重要的。

          就是我前面講到的,to.B 的產品不接受你把一個功能下線,永遠不要去減少你的東西。

          第二點,先有,再,然后易用,最后好看。

          有是最基礎的體驗,有總比沒有要好。然后使用效率要很高,再然后才是要好用易用,最后才是要好看。當然,丑也是不行的。

          有是最基礎的體驗,這個功能有沒有?先要有,然后要。因為你做的是一個商家工作臺,他使用效率要很高,然后才是要好用,要易用,上來就能用,上來就會用,然后才是要好看。

          to.B 的產品不應該是上來搞好看,沒用的。我們不需要那么好看的商家后臺界面,簡潔是最重要的,所以我們左右導航且顏色都是灰的,不要搞那么飽和度很高的顏色,商家后臺不需要那么跳,黑白灰配一些色,讓它舒服一點就好了。當然「有贊美業」可以特殊,美業本來就很時尚,但是美業也不要用大紅那么跳的顏色,這是基本的。好看沒有好用重要,好用沒有重要,因為它是商家后臺,天天都在用,他學習一下未來效率高很重要。沒有有重要,先要有。

          問:和易用有什么區別?

          答:,指的是長期使用效率;易用通常指的是用戶是否容易學習容易上手。舉個例子:我們做水電煤繳費,每個月用一次,每次用都忘了上次學習的操作技能,那么應該注意「容易學習容易上手」,符合「別讓我思考」的邏輯,寧愿多點一次也別讓他多想。我們做商家后臺「發貨」和「收銀」功能,每天都用,用很多次,應該注重「使用效率高」,即使要學習一下,也得保證可以操作,不要每次都要點 N 多回才能完成一個操作。

          第三點,持續關注自己的「孩子」,哪怕她已經嫁人。

          作為一個產品人,應該持續關注自己做過的產品,哪怕這個產品已經不歸自己管了,也應該經常關注并思考她的發展和進化。

          我覺得這是任何一個產品人都應該有的基本精神,你既然做了一個產品,這個產品就是你的孩子,你就應該持續關注她,哪怕這個產品你做完了,你不再負責了,轉到別的部門了,別的人在負責,你都應該時不時的去看看她。因為你做出來的產品就是你的孩子,如果你的女兒嫁人了,你是不是就不聯系她了?不會吧。

          我很負責任地說,我做過的支付寶產品、百度的產品,到現在我偶爾還想回去看看她,看看她被改成什么樣子了。我覺得我骨子里至少還有那種精神,這是一個產品人最基本的精神。

          第四點,不騷擾用戶,不群發。

          我們的責任是幫助商家成功,不是為了讓我們自己的生意更成功,我們沒有權利去為了自己的商業目的不斷騷擾用戶。用戶通常不看系統消息,群發信息起不到溝通作用。

          在這家公司里,任何給用戶群發信息都必須我批準,而我不會有時間審批,發郵件我看都不會看,你發微信我也不會理你的。如果你非得說不發會死,會出現大問題,那么自己想辦法找我,找的第一次我理都不理你,因為你不要給商家發信息,人家用你的后臺做生意,你沒事給他群發什么信息呢?為什么要去騷擾他?你的責任是幫助他的生意更成功,你的責任不是為了讓你的生意更成功。

          5. 一些基本常識

          還有些基本的常識,沒有在我們的原則里。但是我會發現有一些新的產品經理,或者在別的沒有底線的公司做過產品的人帶來了一些惡習,這些基本的常識我把它重復強調一下,我不認為這是我們的特殊原則。上面十三條很多是我們的特殊原則,不是全行業通用的,剩下內容是一些做產品要有的基本常識。

          第一點,沒有人會看公告。

          你要清楚,沒有用戶會看公告,你不要搞一個產品改完了公告上完了就結束了,然后商家說這怎么改了?你理直氣壯地說我發過公告呀。商家不會看公告的,沒有用戶會看公告,不要依賴公告告訴用戶你的產品變了,發生了什么變化,你要用你的產品設計能力讓他感受到你發生了什么變化。當然,也別傻乎乎的在產品上專門搞個圖層提醒他「我變了,看到沒」,你要知道在你的新用戶眼里不存在「變了」,你就是他的第一眼。

          第二點,沒有人會看系統消息和群發短信。

          不要覺得你上線了一個改變了的東西,或者你改變了一個政策,群發一條系統公告問題就解決了,解決不了,基于用戶體驗他就不知道去看你發的信息。當然有的時候法律上需要,你可能還是得發,但是基于用戶體驗設計,你不要以為你發了他就會看,他不會看公告的,他不會看系統消息的,他也不會看你群發消息的,你的產品讓用戶感知到改變不要靠這些,沒有用,他不看。

          第三點,幾乎沒有人會改默認設置。

          這也是最基本的素養,我經常聽大家討論產品,討論著說,哎呀,到底通常他們更多人會用 A 呢?還是用 B 呢?默認該用 A 呢還是該用 B 呢?突然有一個人冒出來說:沒關系,加個高級設置,讓他可以從 A 設置到 B。這么做并不能解決問題。

          幾乎沒有人會改默認設置的,只有高級用戶會改,所以當你的一個產品模式有 N 種設置的時候,你一定要花最多精力去想默認設置該是哪一個?因為你默認是什么樣他就會那么用。舉個例子:我們最早為了強調有贊擔保很重要、很特殊,有贊擔保上線的第一版,我們用了一個綠色的底。然后就有人說我們做一個白色的底,不那么丑的,商家可以去改設置。常識告訴我們商家是不會改默認設置的,所以我們把默認設置改成白色,如果有商家覺得提醒別人有贊擔保特別重要,他要改成帶顏色的底,他可以去改設置,高級商家可以去改,默認新店都是白色的底。

          但是我們并沒有把老店鋪改過來,因為商家是獨立的,你默認綠色的底他用了,你就沒有權利幫他改成白色,即便幾萬個商家里面只有 10 個商家喜歡綠色,你憑什么給他改成白色?所以我們要想辦法告訴幾萬個商家「這個有點難看,你可以把它改成更好看的顏色」,而不是強行把它改了,你沒有權利不能私自去改他的東西也是基本原則。所以默認設置非常非常重要,你一定要花最多的精力去想,這個東西有三個設置默認設置成哪一個?非常非常重要,但是這件事不是所有產品人都具備這樣的素養。

          第四點,習慣路徑的設計,比少一次點擊重要。

          絕大部分做產品的人都看過那本書,中文名叫《點石成金》,英文名叫《Don’t make me think》,書中說可以多點一次,每次都不需要思考,這是基本原則。所以少點一次多點一次沒那么重要,重要的是讓他形成習慣路徑。

          舉個例子:微信不需要把「朋友圈」拉到一級導航。雖然你進朋友圈的頻率那么高,你每次進朋友圈點擊「發現」再點進朋友圈,但是微信就是不會拿到一級導航。因為這樣會給發現里面的其他頻道帶來很大的流量和商業價值,反正養成了用戶習慣,用戶體驗有沒有損失?有一點點,只一點點損失,可以接受。

          我們有很多很多產品是一樣的,比如說切換店鋪,很多人習慣把重要的東西都擺到首頁,跟擺地攤似的,如果有一萬個功能呢?怎么擺。所以,你要設計他的使用習慣。

          我們已經設計了有贊商家的兩大流量入口,一個流量入口是概況頁,很多重要的、常用的東西放在那,那是個工作臺。還有一個入口我們已經慢慢把它養成了,就是應用市場。我們有這兩個流量入口就可以讓很多商家去發現一些東西,他可能不會點到訂單再點到里邊去,他會在首頁直接點待發貨訂單然后進去發貨。

          你要設計好他的路徑,這個路徑的設計還包含如果你在首頁上放的是廣告位,那個廣告位一定要更新,如果你不更新,他就把那個廣告位當成一個導航用了,商家不會覺得只有左邊那個我們叫導航的東西是導航,他不會那么認為的,如果廣告位總不更新,運營的位置總不更新,以后就不要更新了,因為他會把那個位置當成他的導航。

          再舉個特別有意思的例子,早年我在百度的時候,阿里巴巴的很多用戶,是在百度上隨便搜索一個詞,點百度右邊的廣告「找什么什么去阿里巴巴」,然后進阿里巴巴,他永遠都那么進,其實那就是他的習慣路徑,這個路徑依賴性非常非常強。

          所以如果你能讓他養成習慣路徑,就可以讓他多點一下,沒關系,這是最基本的常識。

          最后,以上每一條原則我們希望每個人都要熟悉起來。接下來的新人,需要通過這些產品設計原則的考試才能轉正。

          中國有太少的企業服務公司了,所以我們這個行業能夠徹底站在商家或者企業角度思考的人也不多。希望有贊的《產品設計原則》是一個開始,能夠幫助到更多這個行業的產品人,因為我堅信:未來五年,中國最好的企業服務產品經理絕大部分都坐在這里。當然,我們還是非常缺產品經理和體驗設計師,電商、零售、教育、美業、營銷、交易、會員、數據、支付、金融、云、中臺、風控、廣告等方向都缺,如果遇到優秀的產品經理和體驗設計師可推薦,請大家把簡歷直接給到麥麥。(郵箱:joinus@youzan.com

          我也堅定地認為未來三到五年,整個中國的商家都需要升級他們的經營系統,尤其是深度擁抱互聯網。那么,這個行業最缺的就是需要人給他們提供足夠好的產品,需要能夠真正站在商家角度思考,真正有企業服務視野的產品人。所以,在座的各位一定會成為未來這個行業最值錢的人。

          文章來源:優設

          UI 工作流程指南:切圖標注

          資深UI設計者

          當界面設計定稿之后,設計師需要對圖標進行切片,提供給開發工程師。切圖與標注是為了能夠滿足開發人員對于效果圖的高度還原需求,直接影響到工程師對設計效果的還原度,并且也是設計師重要的輸出物之一。合適、精準的切圖可以最大限度地還原設計圖,起到事半功倍的效果。

          通常我們只需要對 icon 與圖片進行切圖即可,文字、線條和一些標準的幾何形狀是不需要切圖的,例如搜索框只需要在標注中描述它的尺寸、圓角大小、背景色值、不透明度即可,開發工程師可以用代碼實現這種效果。

          切圖基本規范

          1. 切圖的尺寸必須為偶數;
          2. 同一模塊內,切圖大小應保持一致;
          3. 如果有背景,盡量用平鋪的背景圖案來設計(減少程序體積);
          4. 可點擊的部件要把相關狀態都切圖輸出,比如:正常狀態、點擊狀態、不可點擊狀態;
          5. 輸出的切圖應當盡可能的壓縮大小,以降低 APP 的總大小,提升用戶使用時的加載速度(推薦在線壓縮:https://tinypng.com);
          6. 所有的變形字體把它當成 icon 來切;
          7. 切圖輸出格式:png-24;
          8. 重復的東西只切一個。

          切圖輸出類型

          1. 圖標切圖輸出

          桌面圖標切圖輸出

          App 的桌面圖標會被運用在很多不同的地方,比如手機桌面、APP store、手機的設置列表,所以 app 桌面圖標需要很多個不同尺寸的切圖輸出。兩個平臺對應的桌面圖標設計輸出尺寸也不盡相同,在輸出的時候要把雙平臺的尺寸全部輸出切圖。桌面圖標切圖只需要提供直角的圖標切圖即可,手機系統會自動生成圓角效果。

          系統圖標切圖輸出

          一套圖適配雙平臺:iOS平臺(iPhone 6plus版本除外)和安卓平臺公用 44*44px 切圖素材,即可實現一套切圖適配兩個平臺的開發。

          適配大屏幕:為了適配 iPhone 6plus、iPhone 7plus,單獨切一套比原有 44*44px 切圖大 1.5 倍的切圖,即 66*66px 大小的切圖。

          APP內功能圖標

          圖標是可以有留白區域的,建議圖標尺寸盡量不要過多。

          2. 圖片類切圖輸出

          圖片類切圖主要是指啟動頁、新手引導頁、默認提示、廣告圖等需要完整切圖的圖片。同一類型的圖片切圖一般要保持同樣的尺寸大小,以便于工程師開發使用。另外一般這些切圖的文件較大,在切圖過程中需要控制切圖文件的大小。

          全屏類切圖

          局部類切圖

          3. 動效元素切圖

          動效元素切圖一般是指在 app 中加載動效所需要的切圖元素。

          gif 動圖切圖一般分為三種:

          一是只需要給到 gif 圖動效的部分即可。

          △ 城易logo

          二是,導出序列圖片壓縮打包給開發人員。

          三是導出 json 。

          Airbnb 開發了一款動效神器:Lottie,這是一個將 After Effects 動畫提供給任意一個 iOS,macOS,Android 還有 React Native 原生 APP 的文件庫。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件,以 JSON 文件的形式進行輸出。Lottie 通過 JSON 格式下載動畫數據并實時提供給開發者。

          相關鏈接

          如何導出json動畫文件

          打開 AE,首選項 – 常規,將允許腳本寫入文件和訪問網絡選項勾選上。

          窗口 – 擴展 – Bodymovin,選擇好合成和保存路徑后,點擊 Render 導出 data.jason 文件,再把該文件交給 iOS 開發 (其他同理),具體如下圖:

          這里設置選擇 Demo ,可以導出 html 文件,在瀏覽器查看動畫效果。選擇 Glyphs 將字體轉換成圖形形狀。

          導出文件:

          在線測試結果:可以直接上傳 json 文件,可以提前知道動畫是否有問題,然后再交付給開發。

          網址:https://nicolasjengler.github.io/bodymovins-json-tester/dist/

          切圖命名規范

          1. 通用切圖命名:組件_類別_功能_狀態@2x.png

          舉例:tabbar_icon_home_default@2x.png(對應中文:標簽欄_圖標_主頁_默認@2x.png)

          2. 模塊特有切圖命名:模塊_類別_功能_狀態@2x.png

          舉例:bill_icon_search_pressed@2x.png(對應的中文為:賬單_圖標_搜索_ 默認@2x.png)

          3. 常用英文單詞表

          標注軟件

          現如今市場已有很多設計交互的平臺,如:國內的墨刀、藍湖、摹客等,國外的 Figma、invision 等,各自都有優秀的特點,既滿足交互需求,又能有標注切圖功能,選擇適合自己團隊的工具與開發一起協作即可。

          1. Figma

          支持 sketch 導入,Figma 也像 Zeplin 一樣,標注頁面間距與尺寸,并且支持各種圖片格式、尺寸、形態輸出,開發人員也有相應的代碼可用參考,分享鏈接即可。

          2. 墨刀

          支持 sketch 上傳頁面至客戶端,分享鏈接即可。支持多種切圖格式下載,開發人員也有相應的代碼可用參考,操作簡單清晰。

          3. 藍湖

          支持軟件 PS、sketch 上傳在線標注,在設計源文件上切好圖片,開發人員可在線上下載,且有相應的代碼可用參考,分享鏈接即可。

          文章來源:優設

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合