<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>

          首頁

          聽說你的作品集還差個封面?

          seo達人



          圖片

           

          01.你是誰

          可能很多人在面對作品集封面的時候想的都是:怎么才能吸引人?怎么才能成功引起面試官的注意!雖然吸睛這點是一個比較重要的因素,但是更重要的還是你是誰。

          作品集展現的是你的過往作品,可能每個項目或者作品風格有所區別,但是整個作品集可以看成一個你的作品。

          你想通過你的作品集展現你的哪些能力?展示你的審美,甚至展現你的思想。都需要你經過仔細的思考。所以先想清楚你想表達什么,或許你的問題會迎刃而解。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          02.展現優勢

          我發現真的有很多人作品集里面的作品很優秀,但是封面卻草草了事,或者隨便做了一個跟自己的優勢毫不相關的封面。舉個栗子,有些人可能非常擅長插畫或者C4D,但是卻非要學別人表達極簡、抽象等等風格,導致直接結果就是面試官看了封面就興致全無。不要覺得好東西都在后面,我要在后面展示??赡苊嬖嚬俑緵]看到后面,就關了看下一個!

          所以,學會展現優勢,從一個好的封面開始吧!

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          a

          03.個人色彩

          可能很多同學看了前面兩點會說,你說了半天這么抽象,但我還是沒思路啊,不知從何下手。別急,下面給大家提供一個具象可實操的思路。

          個人作品集,要有自己的特點,避免扔在千千萬萬作品集中石沉大海,讓人印象深刻的方法當然還是得從自己下手,畢竟你跟別人永遠不可能一模一樣,你要展現的還是你自己,總的來說就是要具有個人色彩。

          舉個栗子:你可能擅長LOGO,就做一個自己的LOGO;你可能擅長插畫,就畫一個自己的形象,結合自己的興趣和特點;你可能擅長C4D,就建一個自己的模型,像打造一個個人IP一樣的展示自己。

          結合個人色彩,展現自己的閃光點,總是比千篇一律的排版更讓人印象深刻。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          今天所有的作品集封面參考圖已經貼心地為各位打包好啦!

          點個“在看”,去公眾號回復品集封面001就可以下載啦!

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

          轉載請注明:學UI網》聽說你的作品集還差個封面?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務



          設計要知道-HMI設計必看!車載HMI的設計入門

          seo達人



          一、汽車 HMI 是怎樣的領域?

          HMI是Human Machine Interface 的縮寫,其實就是人機交互,汽車HMI設計主要是研究人與汽車的人機交互界面,是駕駛員和車輛交互的橋梁。當然不止界面的設計,也包括開關、按鈕、大屏、語音等等。側重的是在完成交互任務的流利順暢,同時增強駕駛樂趣,是人與界面、人與車各系統的體驗感受。

          要是想了解HMI領域,必定得從HMI的載體開始說起,HMI經過了四個大的階段演變,市場目前正處于第三階段,第四階段也在過渡中。

          圖片

          十年的交互界面,可以說是發生了質的變化,一是界面設計多元化,從工業時期追求性能的簡單粗暴,現在界面有設計簡潔現代,也有百變換膚,考慮到了用戶的審美需求;二是從交互的角度來講,做了沉浸式導航界面,提升駕駛專注度。還有交互體驗的增加,有了車聯網和車內芯片強大的計算能力,汽車也能夠更靈活、更貼近使用情況的向用戶提供信息(如導航,路線推薦,胎壓檢測,用戶習慣記錄等等)。語音解放了駕駛員的雙手,讓交互更溶于駕駛場景當中。

          圖片

          OK,有了對比感受才更加強烈,我再從以下幾個方面詳細聊聊我對汽車HMI的理解。

          HMI的前景就更不用說了,雷軍的最后一次創業也放在了”造車”上面,可見互聯網的各大巨頭都想分一塊蛋糕。更是高價招人。現在阿里的斑馬、百度的Car  Life 和Apollo、騰訊的 Ai in Car、 谷歌 Android auto、蘋果 CarPlay、華為車機應用等,一線的互聯網公司都是早早布局車載,可以說是最新的一個大風口,更是不少設計師想轉型HMI設計,要想入局車載可以看看已經有成熟的設計規范。大家可以自取《HMI設計必看!車載中控的前世今生》。

          從目前的發展趨勢,智能汽車駕駛艙的發展方向主要集中在三個方面:更大的屏幕,自動化的控制界面,以及語音交互。目前智能車載系統的功能仍然非常有限。在垂直應用場景中,語音交互的體驗和技術的穩定性仍有很大的提升空間。

           

          二、車載系統的形態

          現有的車載系統分為三種,全面接入內置智能系統、平臺解決方案、軟件應用程序。

          圖片

           

          1、全面接入內置智能系統

          汽車廠和汽車制造商,將先進的技術應用到汽車的駕駛艙中。例如Tesla X,硬件、軟件和人機界面都是車廠整合。不僅能夠實現多媒體系統的深度集成,而且還能夠與駕駛員進行車內診斷和控制系統的深度集成。連接互聯網絡同時提供API接口,可以自定義應用程序和獨立開發者提供定制服務等。在提高汽車性能的同時,汽車制造商也在努力改善駕駛艙內的體驗,以提高市場競爭力。

          圖片

          車廠開發的技術可以更好地與汽車兼容,然而大部分傳統車企沒有強大的相關研發能力,語音交互相關的人工智能技術并不是車企的強項。因此也會找一些科技巨頭來合作,提供平臺解決方案。

           

          2、提供平臺解決方案

          目前科技巨頭都在為駕駛場景提供駕駛解決方案,例如,蘋果、谷歌、亞馬遜、Nuance、阿里巴巴和百度、華為、騰訊都為智能駕駛艙創建了平臺和操作系統。使用軟件平臺定制HMI單元,科技公司提供軟件平臺,車企自己定義介入的硬件與服務。平臺和系統可以將其技術和服務集成到汽車專用操作系統中,為汽車駕駛員提供完整的智能駕駛體驗。

          圖片

          技術巨頭憑借其先進的技術研發能力和與汽車制造商的緊密合作,有效的優化了相關產品和服務的質量。但是為了快速搶占市場,科技巨頭公司通常更愿意提供通用類型的平臺服務,很難為不同的車廠提供定制化服務。還有因為本身的市場競爭,會存在系統壁壘,如CarPlay系統需要插入蘋果手機。但在相當一段時間內這也是可能的一種解決辦法,因為這減少了HMI的整合成本,而漫長的汽車設計流程周期常常掣肘著汽車人機界面整合的發展。

           

          3、軟件應用程序

          軟件公司開發各種智能駕駛相關的便攜硬件和軟件服務。常見的方法是,通過將外部硬件與汽車連接,在通過軟件服務來優化汽車駕駛艙的性能,將普通汽車變成智能汽車。

          這些公司的服務和產品非常靈活,通??梢栽谥付ǖ膱鼍昂吞囟ǖ男枨笾袨橛脩籼峁┒ㄖ苹姆?。然而,這類服務往往需要一些額外的操作和硬件設備的支持。說到這里軟件的應用程序分為兩種方式,一個是車載小程序,一個是應用軟件。

          與手機小程序只在入口、開放程度、定位等方面略有差異有所不同,BAT三家車載小程序在喚醒方式、交互方式、構建場景等方面也呈現出不同的側重和戰略打法。三家都基于自己對車聯網的理解,勾畫出小程序在車載場景下如何進行應用延伸,其目的都是為用戶帶來智能網聯汽車的體驗提升。那說說車載小程序的優點。

           

          3.1車載小程序的優點:

          圖片

          • 車企強勢,曲線救國

          因為車企掌握大部分的話語權,在強勢的車企面前,全家桶組合可能不能達成合作共識。因為車企更想選取不同領域的頭部產品來搭建服務生態。此時車載小程序作為一種相對輕量的解決方案,容易進入到車聯網的生態之中。

          • 即用即走貼合場景

          在汽車環境下,所有的功能都是為了車主更高效的完成任務而產生的,快速、便捷的人車交互方式是其基本要求。

          “即用即走”的小程序是工具型產品再好不過的載體了。特別是BAT還為車載小程序開發了場景識別、自動喚醒的功能,在交互上除了語音之外,也能通過傳統的觸碰或者更加高級的手勢完成人車交互,這讓車載小程序的交互無比接近人類想象中的無人駕駛形態,也讓車載小程序有了更加強大的生命力,至少短時間內不會被新的應用所替代。

          • 快速搭建加快車載發展

          BAT都為小程序的開發者提供了開放的開發環境,甚至還提供固定模板幫助開發者加快開發速度,降低開發成本,這使得很多創業型的中小型開發者也可以參與到車聯網的生態建設中來。

          由于車載小程序和手機小程序的底層框架是打通的,這也是說,如果某個小程序在移動端上沉淀了足夠多的用戶,并且適用車載場景,具備服務能力的話,就可以快速完成車載小程序的移植,這對于建設豐富的出行服務生態和車聯網都是具有實際意義的。

           

          3.2現有車載小程序 

          圖片

          • 騰訊車載小程序

          騰訊車載小程序目前大致分為三類:出行服務小型車、生活服務小程序和視聽服務小程序,其最大特點是基于位置和場景會被自動喚醒。比如用戶經過加油站、停車場、旅游景點的時候,有些購買和支付的服務就會主動彈在車機上,用戶再通過語音完成操作。

          如果說手機小程序是“人找服務”,那么騰訊車載小程序則進化成“服務找人”。

          傳送門:(關注公眾號私信我領PDF)

          圖片

          • AliOS車載小程序

          基于算法和豐富的生態服務體系,AliOS車載小程序的最大特色是自帶場景智能感知的基因。得到車主授權后,車載小程序可以圍繞行車場景,實現上車前、行車中、下車后自然串聯的智能化場景服務。

          譬如,用戶可以在車上通過觸控、語音、手勢等多模態交互方式,咨詢附近的推薦餐廳,小程序會基于用戶的喜好作出推薦,還可以預約排號;到達餐廳附近,系統會自動喚醒小程序,為用戶找到停車場;下車后,車載小程序會無縫連接到手機小程序端,用戶可以在手機上查看餐廳的預約信息等。

          相比騰訊車載小程序,AliOS車載小程序的開放程度稍高,但也和手機小程序一樣,僅限于阿里系的商業生態之內。

          傳送門: https://miniapp.alios.cn/index#/document

           

          • 百度車載小程序

          百度也在為自身搭建智能系統。所以相比騰訊和阿里,百度車載小程序的分類更加細致,場景也更加豐富。車企可以根據車型定位和自身需求,自行定義和組合可供使用的車載小程序。

          所以很多科技公司轉向百度生態,讓大哥帶小弟的方式,一起進入到車企。百度開放的生態可以將自己主要功能接入百度App、百度地圖、百度貼吧、百度網盤百度系App上運行,還可以在愛奇藝、wifi萬能鑰匙等外部App平臺上運行。騰訊和阿里基于位置或者場景,可以自動喚醒小程序有所不同,百度的車載小程序大部分場景下還是只能依靠用戶用語音喚醒。

          傳送門: https://chelianwang.baidu.com/homepage/openPlateform/design.html

           

          三、車載系統的特點

          梳理整個汽車的HMI 的發展其實我們追求的就是三個方向:

           

          1、操作(快捷、精準)操作行為無法超過3秒

          隨著大屏、多屏化的發展趨勢,觸摸和語音控制應時而生,為了增強操作合理性,以及減少或避免觸摸屏的誤觸功能。從信息輸入來看,以觸控、語音為主,手勢、視覺交互為輔;從反饋輸出來看,以視覺、語音、觸控交互為主,嗅覺交互為輔。

          人機交互定義需要區分車輛是行駛中還是靜止狀態,車輛在行駛中,對于需要駕駛員操作反饋的交互行為需要遵循3S原則(上面提到的三秒原則),降低安全隱患。甚至有一些交互動作在車輛行駛過程中需要禁用的。

           

          2、信息(清晰、聚合)信息功能需要高度聚合

          得益于計算機算法的強大,汽車功能越來越完善,信息量也越來越大,為了讓用戶有更好的體驗,避免過多信息的干擾,必須做到界面顯示輕量化。

          保障關鍵信息是醒目的,容易讓用戶視覺快速捕獲,在各種環境場景下具有良好的可見性和易讀性,無需駕駛員費力尋找和識別。

           

          3、反饋(明顯、高效)高效的交互方式

          在駕駛的過程當中,司機的雙手被占用,于是眼睛和耳朵感知要提高,與移動端的視覺顯示不同,HMI設計師需要注意除了基礎的視覺顯示規范外,還需格外注意與安全相關信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

          在車輛行駛過程中,對于司機來說,聽覺反饋也是很有必要考慮的場景,通過語音反饋司機需要獲取的信息,能讓司機盡量保持視覺焦點在路況上。多場景的融合考慮信息獲取的效率,能減少在開車過程中的安全隱患。

           

          四、車載的開發流程

          車企現在對智能系統的設計越來越重視,因為只有把軟件實力提升才可以更好的掌握話語權,而且用戶研究與設計流程整合的方式能夠幫助汽車制造商在競爭激烈的汽車行業中先人一步博得用戶喜愛。

          汽車HMI設計開發需要按照整車開發的流程進行,這樣在造車的各個階段才能有效的管控和輸出設計產物,由于HMI設計涉及的相關范疇廣,只有按照既定的流程才能設計出符合車機環境的系統界面。

           

          1、整車開發流程

          在解答如何展開HMI體驗設計前,我們需要了解現在汽車的整體設計工作流程,一輛汽車的生產需要經過V型的開發流程(從目標的制定到目標的驗證的過程)

          圖片

          大體可以分為六個階段:

          1. 產品戰略階段
          2. 概念設計階段
          3. 設計開發階段
          4. 工程車階段
          5. 生產階段

          圖片

           

          2、HMI設計開發流程

          然后我們來說一下HMI設計流程,HMI和C端B端的的設計大部分一樣,也是需要與汽車工程師,市場人員,設計調研人員合作。不同的是HMI的設計更多會反復測試保證安全性優先的情況下,滿足功能需求,整個HMI設計過程中及設計和實現是機密結合的 。

           

          HMI設計開發四大流程

          圖片

          • 需求分析調研評估

          在整車開發項目中,HMI體驗設計應該從立項時開始介入,主機廠在通過市場調研和用戶需求分析等調研方法,分析出市場上存在的潛在需求后,從平臺化角度評估需求的導入和定型驗收,和樣車研發同步進行。

          • HMI創意設計

          在得到用戶需求分析和市場調研的數據后,將這些數據轉化成為設計目標,得到初步的概念設計,之后在功能定義和產品開發達成一致之后,即項目目標正式確認,可開始進行細節和具體流程的設計;

          主要包含以下細分模塊:產品功能配置、內飾設計、市場競品對標、人因分析、硬件約束、軟件約束、功能需求定義、交互設計、視覺設計

          • 工程實現驗證評估

          在驗證評估階段中,通過臺架仿真測試,或者提供特定評價用車和培訓用車以及進一步的分析和質保路試。進行體驗驗證和設計迭代。之后是系統開發、硬件開發、軟件開發、整車測試與評價。即可開始生產批量試制(PVS)。

          • 開發測試

          最后是工程開發驗證階段,跟進實車功能測評,生產批量試制流程凍結后,會進行批量生產前總演習(OS),全面驗證批產。所有流程環節都驗證成功凍結后,產品則開始投入批量生產(SOP)。

           

          整個分析下來HMI設計流程看似和互聯網的開發流程大體相似,其實還是有很多不同,甚至可以說沒辦法完全復用的。因為兩者的側重點不同,關于汽車HMI設計與互聯網設計原則的差異,和具體HMI的設計流程細節我們下次講!

           

          原文地址:七醬設計筆記 (公眾號)

          作者:郝小七

          轉載請注明:學UI網》設計要知道-HMI設計必看!車載HMI的設計入門

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          獨家曝光!大廠設計師的交付細節全公開

          seo達人


          很多新人設計師初期會只關注行業趨勢和手活的提升,而忽略更偏向團隊賦能的“設計交付”(Handoff)環節,但后者其實更能甄別設計師的業務深度。畢竟美上天際的設計圖,落地性無法保證,也只是鏡花水月,完全無法轉化為商業價值。

          在下面的部分,我根據自己的經驗列出了一些值得關注的交付細節,供各位設計師參考。

           

          產品背景和邏輯交付

          很多UI設計師在交付時沒有“解說”的概念,認為這屬于交互和產品寫文檔時負責的部分,其實不然。尤其對于一些中小型互聯網公司,如果沒有配齊產品和交互人員,或者缺乏相應的產品/交互說明產出,UI設計師需要適度補足這些缺失的部分。

          具體說來,就是在高保真設計稿中加入少量的說明解釋類頁面,用最簡潔的語句和配圖快速傳達任務的背景和目標,以便開發人員快速進入狀態,準確理解需求,降低在開發過程中掉鏈子的幾率。

          部分云交付平臺(如摹客Overflow等)支持上傳后快速連接出流程圖,在實際工作中非常實用。花上幾分鐘時間連接好頁面間跳轉關系并配上說明,開發同學理解起來就舒服多了。

           

          設計稿及圖片素材交付

          首先,直接說結論:用云平臺交付設計稿,別發什么壓縮包!

          很多Ps時代的設計師都經歷過手動標注的過程,之后又逐漸轉為了使用插件(如Sketch Measure)導出的HTML交付包的方式。但:類似Sketch Measure這樣的插件大多是個人作品,兼容性和可靠度完全沒有保障;此外,導出壓縮包的方式面對改稿時的痛苦指數是非常高的。以國外行業軌跡來看,云交付一定是大勢所趨。

          針對國內設計行業現狀,云平臺大致有圖中的3種選擇:

          具體使用方式上都大同小異,下載針對自己設計軟件的對應插件,然后選擇所需的內容上傳。成功后直接將鏈接發給開發工程師即可,但切記還要確認:

          • 設計稿上傳時選擇了正確的設計倍率(尤其是對于移動端設計);
          • 所有的素材都已經標記好切圖,并能正確地在云平臺顯示和下載。重要項目最好下載所有素材逐個檢查,尤其注意圖片質量、文件大小和分辨率;
          • 界面細節是否有重點信息遺漏,可以借助平臺自帶的一些標尺、卡片、圖釘等工具補充說明;
          • 如有復雜交互或動效,考慮補充GIF / 視頻供開發人員理解和參考。

          “設計倍率”對于很多經驗較淺的設計師是個難點,如果沒有十足把握可以選擇摹客這種自帶全平臺切換算法的云平臺,這樣即使選擇錯誤也可以在云平臺二次修改。素材檢查也是很多設計師都會忽略的點,很多時候就是這一步把關不嚴,導致最終界面還原度不足。

           

          圖標交付

          圖標具有一定特殊性,交付方式往往不局限于傳統圖片格式交付,還有SVG雪碧圖、字體圖標庫等等特殊方式可以使用。

          • 傳統圖片格式(PNG、Webp等)交付時,注意內容四周透明區域大小的正確,同時還要準備hover / disable 等不同狀態下的版本;
          • SVG雪碧圖的方式一般需要特定的插件導出資源包。這種方式導出后可以上傳到云平臺的網盤中,并和開發溝通好。
          • 字體圖標庫(iconfont)的方式需要先轉換好svg,并保存在字體圖標網站上,最后通過網站打包。最后同樣需要上傳好 + 溝通好。

           

          設計規范及組件交付

          部分云交付平臺擁有全面的設計規范管理功能,開發交付時,除了能提供必備的圖層信息和CSS樣式代碼外,還能提供變量名稱(Variables)、組件代碼(Snippet),樣式表(Stylesheet)等更多專業的開發信息。

          • 在設計軟件中封裝好了組件,上傳后平臺就能夠自動識別,并可以綁定組件代碼、添加關聯鏈接或其他描述信息;

           

          • 之后,所有使用了該組件的設計稿,開發人員都能輕易地獲取到和組件模塊的開發信息,大大提升開發效率和還原準確度;

           

          • 平臺還能自動識別頁面使用的顏色和字體,并集中歸納。手動編輯相關變量名稱信息后,就可以導出開發所需的樣式表文件,非常方便。

           

          動效交付

          最后簡單提一下動效的推薦交付方式:

          • 一般場景:視頻(Mp4)或動圖(Gif、Apng、Webp)格式是最推薦的,效果可控度高。不同方式主要是幀率、質量、兼容性方面有區別,具體差異不贅述,可自行檢索。
          • Lottie / JSON 方式必須要借助AE插件導出,同時對動畫內容有一定要求,比如不支持表達式和Alpha通道等,使用前需要做好規劃。
          • SVGA的方案對內容本身限制較少,但是需要在代碼中載入一個微型的播放器,建議提前和開發人員商量。
          • 動效說明書的方式只適合復雜度不太高、且必須100%由前端實現的場景。

           

          總結

          總體來說,選擇一款足夠好的云交付平臺是事半功倍的關鍵。近年一些自帶交付功能的在線設計工具(如Figma)崛起,但從訪問速度、易用性和功能豐富性的角度來說,依然和專業的云交付平臺有著不小的差距,所以我依然建議使用摹客這樣獨立的交付平臺來保證交付品質。

           

          原文地址:UI中國

          作者:摹客產品協作設計

          轉載請注明:學UI網》獨家曝光!大廠設計師的交付細節全公開

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          火爆全網的設計風格、科技感的代名詞

          seo達人



          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          可以看到今年流行的輕擬物風格和以前還是有所不同的。

           

          01.透明材質

          這種風格最大的特點一定少不了透明的材質。毛玻璃材質是最常見的,透明磨砂的質感會讓人感覺畫面十分清透、充滿科技感。

          圖片

          圖片

          圖片

          圖片

          圖片

           

          02.光線折射

          除了透明材質之外,還會經常與光線折射相結合,營造一種晶瑩剔透、夢幻輕盈的氛圍感,使畫面整體質感大大加分。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          03.漸變幻彩

          質感和氛圍感到位之后,加上明亮絢爛的色彩漸變配合,會讓整體作品不僅有質感、有細節、還十分吸睛。整體風格明亮治愈、有一種超前的科技感和脫離感,難怪微軟和國內大廠都爭相使用這種風格。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

          轉載請注明:學UI網》火爆全網的設計風格、科技感的代名詞

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          5招!幫你搞定配色難題!

          seo達人


          前言

          合理的色彩搭配是成就優秀作品的必要條件,我之前也寫過很多篇關于配色的文章,有興趣的同學可以翻一翻。

          這篇文章我不講理論,只希望配色做不好的同學,能學會借助工具解決工作中的配色難題。

          下面我就為大家推薦5個實用的配色工具,樸實無華的5招,幫你搞定工作中的配色難題。會詳細到每個功能的介紹、如何使用、側重點是什么等等。

          補充:因為都是國外網站,如果你英語水平跟我一樣差,可以下載一個網頁翻譯的插件,輕松一點英文秒變中文。

           

          一、Adobe Color CC

          網站:https://color.adobe.com

          Adobe官方出品的配色工具,也是我在剛接觸設計時常用的配色網站,支持RGB、CMYK、HSB等多種色彩模式,并且也支持多種配色規則,比如:類比、單色、補色、分割補色等等。

          圖片

           

          使用起來很簡單,選定色彩調和規則之后,轉動色相輪上的調整錨點,就會出現統一色彩調和規則下的多種配色形式。

          圖片

           

          另外,每個色彩下方都會有對應的屬性,并且每個屬性都可以通過拖動圓球進行手動調節。

          圖片

           

          所以,在工作中當你只能確定一個主色的情況下,我們可以將其設定為基色,通過手動調整的方式,讓系統自動生成配色方案,這在工作中很實用的。

          圖片

           

          還有一個功能很好用,就是從圖片中提取色彩的功能,叫做提取主題。

          圖片

           

          當我們看到一張很美的照片或者是想要參考別人作品的色彩時,就可以通過這個功能提取色彩。

          圖片

           

          可以根據圖片中的色彩屬性進行提取,比如:彩色、亮色、柔和、深色等等,官方叫做使用色彩情景提取。

          圖片

           

          提取主體初始默認是系統自動選取圖片中的關鍵色彩,當然可以手動選擇圖片中你想要色顏色,是不是特別方便?

          另外不僅可以提取純色,還可以提取漸變色。

          圖片

           

          跟提取純色差不多,也可以進行手動選取你想要的顏色,同時也可以手動設置漸變色標的數量。

          圖片

           

          還有一些好玩的功能,比如:色彩游戲、對比檢查器等等,大家可以去看看效果,都試一下。

           

          二、Colourco

          網站:https://colourco.de

          一個很有意思的線上配色網站,可以根據自己的喜好自由的進行顏色搭配,在調色板內范圍內滑動鼠標,顏色就會隨之發生變化,想要哪個顏色,鼠標左鍵點一下就可以鎖定,以此類推。

          圖片

           

          它還有很多實用的色彩調和規則,比如:單色、單色和深灰色、類比、四邊形。類比與補等等。

          圖片

           

          有了這些色彩調和規則之后,在選定一個色彩調和規則后,你同樣可以通過鼠標在調色板范圍內移動改變色彩,直到選定之后,點擊鼠標左鍵鎖定。

          圖片

           

          如果你感覺調色板數量不夠,可以通過頁面右側的“+”號鍵進行添加。

          另外也可以通過手動調整中間顏色的屬性和參數,在選定的的色彩調和規則下系統自動生成最優的色彩搭配方案。

          圖片

           

          這與Adobe Color CC網站中的比較相似。

           

          三、WebGradients

          網站:https://webgradients.com

          這是一個主要做漸變色的配色網站,網站內有180種漸變配色方案,整體風格都偏柔和、舒服自然,方案質量很高。

          并且支持在線預覽、PNG格式下載以及生成CSS代碼等等。

          圖片

          與其他配色網站的不同在于:無法手動調整、自由變換,沒有過多的操作,從180中漸變配色方案中選擇你想要的即可。

          圖片

           

          下面是我隨機挑選的幾個,確實很漂亮。

          圖片
          圖片
          圖片

           

          所以在工作中,當你想用漸變色又沒有適合方案的時候,不妨來這個網站看看,也許會有意外收獲。
           

          四、ColorSupply

          網站:https://colorsupplyyy.com
          一個做在線配色方案分享的網站,收錄了很多來自世界各地優秀設計師的色彩搭配方案,號稱設計師和插畫師的顏色選擇器。
          相比其他配色網站來說,它更加立體、直觀、有特色。
          圖片

           

          它也支持多種色彩調和規則,不僅有類似、補充、三合會、分裂補等等比較常見的色彩調和方式,還有新鮮的、漫畫、自然、豐富的、畫家等實用又特別的,可以說是面面俱到。
          圖片

           

          相比其他網站來說,它還有更神奇的功能,就是支持配色方案的實際效果預覽。讓你實時看到每一個方案運用到工作中是什么樣的。
          圖片

           

          它還支持在線預覽不同配色方案下的平鋪圖案、可直接復制的色值卡以及漸變色的實際效果。
          圖片

           

          另外,進入“十六進制匹配”功能,你也可以手動屬于一個顏色屬性,系統就會幫你生成優質的配色方案,同樣也支持方案的實際效果預覽。

           

          五、ColorSupply

          網站:https://www.palettable.io
          相比前面幾個配色網站來說,這個網站更加簡單、好玩一些。有點像一些手機交友APP,你只需要選擇喜歡或不喜歡即可。
          圖片

           

          當我們確定好第一個色彩屬性之后,系統就會幫我們生成搭配方案,這時你感覺合適的就選擇喜歡,不合適的就點不喜歡。
          圖片

           

          以此類推,直至確定最終方案后,點擊出口按鈕,可以導出PNG格式的色卡。
          圖片

           

          其實每一個系統幫你推薦的顏色,都不是隨意隨機的,而是使用數百萬設計師的知識生成漂亮的調色板,都是有理論依據的。
          以上就是我為大家推薦的五個實用的配色網站,每一個都有其獨特之處,幾乎涵蓋了工作中的方方面面。
           
          合理的色彩搭配對于設計作品來說往往能起到1+1>2的效果,反之也會將一個整體都還不錯的作品毀掉。
          所以當我們在工作中對于配色沒想法時,不要去悶頭苦想,不妨借助這些配色工具幫助你快速找到合適方案,做的多了、接觸的多了,自然而然就會提升你的配色功底。 

           

          原文地址:美工美邦(公眾號)

          作者:老張 


          轉載請注明:學UI網》5招!幫你搞定配色難題!

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          拒絕千篇一律!用「場景創意法」打造高粘性運營活動

          seo達人



          寫在前面

          隨著互聯網時代的不斷發展和完善,各大互聯網品牌都已在運營活動中集中發力,如何借助運營活動讓用戶能自發的、高頻次的使用產品將決定著未來的商業體量及價值。

          說到運營活動不得不提到的就是某多多,某多多的成功靠著拼單省錢這個運營思維讓上億用戶都曾幫著朋友砍上一刀,隨著這種運營活動的大肆推廣,各大友商也隨之效仿,越來越多的親朋好友也在我的幫助下身受數刀而樂此不疲。

          圖片

          *圖片信息來源花瓣網

           

          隨著親朋好友蜂擁而至發來的求砍鏈接,似乎記不得我是在什么情境下,以哪種動機,去做了這件事,更記不得這是誰家的品牌,品牌主張是什么?倡導著什么樣的消費方式?那對于這種運營活動獲取到的新用戶真的是商家想要的用戶嘛?

          如果不是那運營活動要如何打破千篇一律同質化嚴重的惡性循環呢?

          接下來以《趕集薪心愿節》運營活動作為案例剖析給大家,希望通過本次的運營活動解讀給大家帶來一些小小的啟發。

          圖片

          圖片

          01.行業洞察引發場景聯想

          無論是剛走出象牙塔的學生黨,還是工作已久的白領,職場無疑是一場無硝煙的戰場,為了區隔品牌與品牌間的運營活動同質化,趕集薪愿節活動場景擬定為——挑選職場裝備的裝備庫。

          圖片

          圖片

           

          02.人群定位賦予身份標簽

          一場無硝煙的戰爭場中離不開英勇奮戰的職場戰士,為了給予用戶更多的參與感與代入感,將挑選裝備的職場人給予“未來職場戰士”的身份標簽,使其更具榮譽感。

          圖片

           

          03.品牌傳達到創意概念

          各大招聘類網站都在為自己的平臺搖旗吶喊,作為58同城旗下的趕集網平臺肯定也要在這場無硝煙的戰爭中加強趕集網用戶的品牌認知,刺激新老用戶在端內使用的活躍度,加深用戶對“真職位”的口碑印象,在真職位的傳達上,結合場景進行專屬表述:集齊薪裝備,玩轉真職位。

          圖片

          圖片

           

          04.利益驅動轉化專屬裝備

          通過對職場人真實生活工作路線場景還原分析,初步分為三大專屬裝備:1.通訊裝備  2.出行裝備  3.生活裝備。游戲中獲得的裝備卡片對應的也都是真實職場生活中所用到的物品,讓用戶感知從虛擬到現實增強用戶的身份聯想。

          圖片

          圖片

           

          05.互動游戲方式激發沉浸體驗

          打造場景化主題運營活動,最終目的還是渲染氛圍讓人能感受游戲化場景給予用戶代入感及滿足感,結合游戲場景的互動性能增強用戶沉浸式的體驗,從而形成肌肉記憶與游戲習慣。

          圖片

          圖片

          圖片

           

          活動數據 

          活動上線十天數據顯示:活動落地頁轉化率有明顯增加,本次用戶留存時間較純利益驅動運營活動有顯著提高,上線后活動次留均值及活動分享轉化率大幅度提升。

          圖片

           

          總結

          靠利益驅使的運營活動是否真的能長久的留住用戶,當商家不在為用戶提供優惠或獎勵時,什么樣的運營活動才能代替以利益驅使的運營活動,讓用戶自發性的有效留存這個可能是運營活動永久的一個值得為之探索的課題。


           

          原文地址:58UXD (公眾號)

          作者:環鐵藝術家

          轉載請注明:學UI網》拒絕千篇一律!用「場景創意法」打造高粘性運營活動

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          設計賦能商業變現初探

          seo達人



          關鍵詞解讀

          為了更好的理解接下來的文章內容,筆者會首先對以下關鍵詞進行解讀:商業變現、設計賦能、價值鏈理論。

          圖片

          關鍵詞

          1. 商業表現
          杰克·韋爾奇在《商業的本質》一書中提到:商業歸根結底是一項“團隊運動”,必須依靠團隊的力量。就企業而言,筆者解讀為「商業」的本質是:企業團隊(個體、群體)通過創造一系列的價值活動實現企業和外部客戶之間價值交換的運行模式;而「變現」則是指在此系統中“企業收入-支出成本”所得的實際收入,提升收入總額和降低支出成本均可以實現“變現”的目標。

           

          2. 設計賦能

          設計師站在用戶和業務的視角,能夠從全鏈路的視角出發,洞察各利益相關者的關注點,運用專業的設計方法去挖掘產品和設計的機會點,最終促進業務持續健康向上發展。

           

          3.“價值鏈”理論

          價值鏈的概念最早是由美國哈佛商學院的邁克爾?波特教授在其著作《競爭優勢》中提出的,稱作“價值鏈分析法”。把企業內外價值增加的活動分為“基礎活動和支持性活動”?;A活動即企業生產經營的主體活動,涉及產品的物質創造及銷售、轉移買方和售后服務的各種活動,支持活動是輔助基礎活動,是通過提供采購、技術投入、人力資源、及公司范圍的職能支持的活動。不同企業參與的價值活動中,并非每一個環節都會創造價值,只有特定的價值活動才能真正創造價值。企業要密切關注組織的資源狀態,特別關注和培養企業在關鍵價值活動上獲得競爭力。

          企業保持競爭優勢,既可以來源于價值活動所涉及的市場范圍的調整,也可以來源于企業合作或調整價值鏈所帶來的收益。

          隨著社會分工的細化和專業化以及互聯網的普及和發展,價值鏈的內容也不斷向前發展,目前已發展為“合作競爭的價值鏈”理論。

          圖片

          合作競爭價值鏈

           

          價值鏈理論包含4個構成要素:價值主張、運營模式、界面模式和盈利模式。

          1.價值主張:包括價值主張、客戶關系、客戶細分三大部分。

          1. 價值主張:不但包含了企業的戰略方向,而且包含了企業提供給客戶滿足其需求的價值項,比如“快捷的渲染服務-10s出高清效果圖”。
          2. 客戶細分:確定目標客戶群體,并對其進行細分,探索不同細分市場的客戶需求。
          3. 客戶關系:是在明確用戶需求的前提下,找到吸引顧客、留住顧客、轉化顧客的方式,從而對所提供的產品和服務進行不斷的改進以維系和形成良好的長期往來關系,C端業務中常見的客戶關系即是“會員”。

          圖片

          價值主張

          2.運營模式:企業將資源和能力轉化為產品服務的過程模式。包括關鍵業務、核心資源兩大部分。企業的產品和服務作為企業價值創造的載體,需要通過一定的過程將資源和能力轉化為產品和服務,通過優化流程、提高效率則可以減少該過程中涉及到的成本和費用。

          3.界面模式:包含重要伙伴和渠道通路兩個部分。通過渠道通路,企業可以將自身的產品和服務傳遞給客戶,客戶也可將信息、資源、能力等回饋給企業。而企業的合作伙伴,在一定程度上促成了企業的產品和服務的產生,是企業外部的重要資源。

          4.盈利模式:包含包括成本結構和收入來源兩個構造塊,企業可以通過“開源節流”以實現商業的高效運作。

           

          賦能維度提取

          初步確定4個維度

          可基于價值鏈模型從“公司角度”或“具體業務角度”去作分析,可更加靈活的應用該理論。但需注意,以上構成要素中,設計師很難全面切入,定要找準設計切入方向,才可發揮最大價值。

          那么我們來看如何確定設計賦能維度?

          一方面,在上述的價值鏈理論中,“客戶關系”“重要伙伴”通常會有專業的商務、銷售、售前、運營人員去維系,盈利和收入模式也會有高層管理人員進行制定和分析管理,設計師在工作鏈路上很難觸達盈利模式和客戶關系相關的內容?!爸匾锇椤眰龋O計師通常會進行客戶調研、競品分析等,以挖掘更多的產品機會點,促成業務價值達成,因此在賦能方向上,“重要伙伴”會合并到價值主張側進行分析,不再單獨展開來講。

          另一方面,基于價值鏈理論的指導,我們進一步提煉企業或具體業務的核心價值鏈:企業需要將資源和能力整合,去生產或研發承載企業價值的產品/服務;產品/服務經過銷售到達客戶側,客戶付費購買則企業產生營收。在這條關鍵鏈路中,「生產/研發鏈路」「產品/服務」「銷售鏈路」「客戶/用戶」都是非常重要的環節且缺一不可。而設計師基于“全鏈路”的設計思維,利用豐富的設計研究等方法均可以在此四部分進行有效切入挖掘業務價值,因此初步確認將此四部分對應價值鏈中的「運營模式」「價值主張」「渠道通路」「客戶細分」作為設計切入的賦能維度?!干a研發鏈路」和「銷售鏈路」作為直接賦能“降本”和“增收”的關鍵鏈路可作為設計賦能的持續探索方向。

          圖片

          確認賦能維度和方向

           

          基于維度對業務進行分析,找到更加細分的賦能維度乃至設計機會點

          雖然初步確認了賦能維度,但是對于設計師如何尋找設計賦能機會點尚沒有清晰的思路,因此筆者從自己負責的房產業務入手,嘗試進行分析和挖掘。以下為簡要的分析,僅供大家參考。

           

          1.價值主張:房企業務在當下重要的價值主張在于探索全鏈路的業務解決方案。

          思考設計可以做什么:

          1. 目前的解決方案是否完整,能否在房產上下游繼續拓展。
          2. 已經有的解決方案客戶是否真正用起來,能否真正滿足客戶的需求?
          3. “數字化精裝”到底如何做到數字化?
          4. 競品做了什么?
          5. 如何鏈接到C端消費者?(客戶對戶型對喜好如何,對裝修風格喜好如何)…

          設計做了什么:

          1. 對新房營銷客戶的核心訴求進行分析,基于C端消費者的購房鏈路整理客戶關注的數據,提供到產品側進行參考。
          2. 對同類產品進行詳細競品分析梳理得出產品的基礎功能、進階功能、增值功能,并且將報告提供到產品側在后續的產品設計中進行參考。
          3. 基于對業務現狀的分析,整理出期望的業務表現,根據表現的內容整理出可衡量的指標以及尋找可切入的設計機會點。

          圖片

          業務現狀分析

           

          2.客戶細分:提供更加精細化的產品和運營策略。

          思考設計可以做什么:

          1. 目標客戶的類型?
          2. 不同地產大客戶的共性和差異性?
          3. 形成清晰的地產客戶畫像?
          4. 地產客戶下的細分角色?不同角色的關注點?…

          設計做了什么:

          1. 通過“桌面調研、定性調研”的方法調研“新房營銷”場景下的主要用戶角色,梳理得出“決策者-營銷總、管理者-案場銷售主管、使用者-置業顧問”的用戶角色畫像,聚焦所服務客戶(用戶)的特征、動機、日常工作分析,為后續的產品功能規劃提供參考。
          2. 根據當前客戶細分情況,整理在客戶細分側期望的表現,整理可衡量標準以及可切入的機會點。

          圖片

          目標客戶分析

           

          3.運營模式:將資源和能力轉化為產品和服務的過程。前文已經提到,優化流程、提高效率均可以減少該過程中涉及到的成本和費用。針對此部分筆者還未進行系統分析,因此簡單說明。

          1. 一方面可以思考產研基建能力建設是否完善,是否有進一步優化的空間。
          2. 另一方面可以思考產研、商務、運營等角色涉及的協作流程是否高效,能否進一步提升人效。

           

          4.渠道通路:跟增收有直接的關聯,在C端業務中表現為「購買轉化鏈路」,而在面向大B客戶的業務中,可細拆為“產品/服務”從「觸達客戶–>新簽–>續約」的全鏈路。

          圖片

          面向大B客戶的轉化鏈路

           

          思考設計可以做什么:

          運用鏈路分析法,對轉化鏈路進行系統梳理,并明確鏈路中期望的目標表現,發現可用于衡量的數據指標和可挖掘的機會點。參考下圖以“觸達鏈路”為例進行詳細說明:

          圖片

          “轉化鏈路”分析

           

          首先,需要對線上和線下的觸達客戶渠道進行枚舉和系統梳理。比如線上涉及到官網、推文;線下涉及到展會、沙龍。線下渠道包含宣傳冊、折頁等,可透出二維碼引流到線上渠道;線上渠道還可以通過推文轉發分享、搜索等進行引流。

          其次,在觸達鏈路中我們期望的目標表現是什么呢?在這個過程中,我們期望越來越多的人進入官網;希望線上的推文被大量分享;希望線下觸達的客戶量越多越好,期望品牌曝光次數越多越好,因為品牌曝光意味著觸達客戶量的機會增加,觸達客戶量也有可能隨之增加。

          再者,如何衡量目標是否達成呢?最終指標:一方面是觸達客戶數量,觸達量增加很可能意味著轉化率提升;另一方面是咨詢率,在觸達客戶增加的同時,咨詢率提升意味著對業務感興趣的客戶多,轉化的可能性就更大。過程性指標包括官網訪問量,推文閱讀量與分享量,單場活動觸達客戶量等。觸達鏈路的主要目標是引流和拓客,最終轉化與否還要依賴新簽過程,因為轉化率不會作為觸達鏈路的最終指標。

          (此處推薦大家使用GSM模型的方法確立目標表現及衡量指標,在后續的文章中會進行詳解,本文暫不詳細說明)

          圖片

          GSM模型

           

          最后,在觸達鏈路中,切入賦能的方向在哪里呢?

          一方面線上線下的渠道能否進一步拓寬?-分析現有渠道,線下客戶掃碼二維碼后打開的是H5頁面,關閉頁面后無法再次查看頁面,進而無法了解業務。因此建議增加“小程序”作為線上客戶留存渠道,一方面可以依賴微信生態方便客戶再次查看,另一方面在留存的同時還能提高客戶間的傳播分享。(下圖是基于已有小程序時的觸達鏈路)

          另一方面,已有渠道的品牌曝光量能否增加?-分析現有的官網,在官網中透出“酷家樂地產業務”的入口較深,且布點少,這些都影響了業務曝光度;于此,我們可以去思考,SEO搜索酷家樂時是否可以透出“酷家樂地產業務”?線下渠道是否可以增加可被客戶帶走的物料?線下展會中播放配音視頻,通過聲音傳達到更多客戶處,然客戶產生興趣,吸引客戶前來了解業務。

          沿著上述的思路和方向,我們可以思考更多可切入的方向與機會點。

           

          初步歸納整體研究思路

          上述的分析是基于價值鏈理論,從「價值主張」「客戶細分」「運營模式」「渠道通路」4個維度進行切入,從實際業務著手運用專業的設計方法進行分析,整理得出期望目標達成的具體表現,以及確定目標可衡量的數據指標或軟性評估體系,最后挖掘出可賦能的方向以及機會點。

          圖片

          從業務著手,嘗試挖掘賦能方向和機會點

           

          由此,筆者也形成了相對清晰的研究思路:

          基于價值鏈理論,選取賦能變現相關聯的維度。從維度切入,運用專業的設計方法對業務進行系統梳理,挖掘維度下更細分的方向,并且確定相關的評估體系用以確保目標達成。由于單條業務挖掘的方向可能有限,因此后續需要對其他典型業務進行分析,盡可能從業務實踐中抽離賦能方向,并且最后應用到其他業務實踐中。

          圖片

          設計賦能商業變現的研究思路

           

          影響因素:

          1.產品/業務的生命周期:

          產品/業務所處的生命周期不同,所選擇的維度也會存在差異性。筆者當前所負責的業務還屬于從0->1階段,業務品牌影響力需要不斷增大,對外營銷推廣渠道也需要不斷拓展,因此在業務的品牌影響力建設、渠道拓展方面都存在可深入挖掘的方向;而對于其他相對成熟的業務,賦能維度仍需要側重在運營模式優化(內部流程優化、提效降本)和銷售轉化鏈路的優化與升級(直接影響營收)兩個方向。

          2.業務類型:

          B端業務和C端業務的類型不同,可挖掘出賦能方向也會存在一定差異性。尤其是在銷售變現鏈路上,B端業務重在分析「觸達客戶」->「新簽客戶」->「續約客戶」的鏈路,需要對轉化鏈路中涉及的商務、運營、市場人員的角色及其作用進行深入了解;C端業務更重在從消費者的角度對C端轉化鏈路進行分析,包含「初識/了解」->「產生興趣」->「下單購買」->「多次回購」->「分享推薦」的完整鏈路,更要側重于分析消費者的心理和購買動機。由于目標用戶/客戶、轉化鏈路、業務屬性的差異性,賦能變現的切入方向也會存在一定的差異性。

           

          總結

          本文從“價值鏈”理論著手,選取設計賦能可切入的4個維度「價值主張」「客戶細分」「運營模式」「渠道通路」。并且從實踐出發,將上述維度落入到具體業務中進行分析,挖掘更加細分的賦能切入方向以及機會點。

          讀完該篇文章,希望各位設計師們可以達成以下2個目標:

          1. 了解價值鏈理論的概念,并且將理論應用到當前自己負責的業務中進行分析。

          2. 在設計賦能商業變現中找準設計賦能可切入的維度以及挖掘細分的維度和機會點,并且真正落實到具體業務中。

          以上內容為設計賦能商業變現的初步探索,在后續的持續探索中會力求總結出更系統的理論框架和方法并分享給大家。

           

          參考文章:

          書籍:《競爭優勢》

          書籍:《商業的本質》

          論文:價值鏈、商業模式相關的學術論文

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:瑤一

           

          轉載請注明:學UI網》設計賦能商業變現初探

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          設計師如何讓講故事成為輔助利器!

          資深UI設計者

          在日常的生活中,我們總是容易被一個故事吸引,而且更愿意傾聽故事,對故事內容也更容易理解。講故事,是一種比較自然的溝通方式。

          作為一個用戶體驗設計師,你是否有想過,利用人類對故事天然的 “親近感”,輔助我們在日常的設計工作中解決問題?

          在本期的思考中,我試圖從一個好故事所具備的特質中,找到我們日常設計工作中可以借鑒的方法。

          本期提綱:

          • 為什么會思考 “體驗設計師可以從講故事中學到什么?”
          • 梳理故事要素,全面了解用戶
          • 參考故事結構,引導完成任務
          • 明確主線支線,輔助聚焦目標
          • 結語

          為什么會思考

          “體驗設計師可以從講故事中學到什么?”

          這要從 B 站那些的知識區 UP 主說起。

          最近,在不知覺中,我養成了在 B 站追更知識區 UP 主的習慣。比如 “法外狂徒” 羅翔老師,常以 “張三” 為主角,將嚴肅枯燥的法律知識點,串聯成一個個普法故事,妙趣橫生。這些視頻內容,都很擅長使用最簡單的故事講述復雜的專業問題,能夠讓沒有專業背景的普通人聽得懂,看進去,學習到知識。

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          故事在復雜的知識和觀眾之間架起了一座溝通的橋梁。

          因此,我開始思考,將故事中一些引人入勝的技巧和方法,用到體驗設計中幫助用戶理解信息、參與互動。

          梳理故事要素,全面了解用戶

          以下哪段描述更吸引你呢?

          • “凱文到了理發店,在理發店等了一個小時,最后理了發?!?
          • “上了一周班的凱文周末想剪頭發。天氣很熱,走到時凱文已滿頭大汗。開門瞬間他心一沉,顧客擠滿了理發店,他在旁無聊的等了一個小時,最后總算理了一個滿意的發型?!?

          這兩段描述其實講的是一個事情,但是后者包含了講故事最重要的六個要素:

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          因此,將這兩段描述一起比較,前者是簡陋生硬的流水賬,后者則是完整生動的故事。從生動的故事中,我們更能體會到人物的所有行動以及情緒。

          通過六個要素塑造一個人物角色的故事,讓我們能快速在腦海構建一個立體的角色形象。在日常的設計工作中,每個產品需求對應的目標人群各有差異,設計師同樣可以使用故事的六個要素,幫助快速了解我們的用戶。

          首先,在調研中,可以按照故事六要素設計的訪談問題,這樣可以幫助了解到相對全面的用戶信息。其次,調研后整理信息時,可以根據故事六要素,將素材加工成具體且有代表性的故事,能夠幫助我們不被繁雜的原始信息束縛。

          下面看看故事的六要素方法在微信記賬本的改版方案中的實踐。

          這次改版的目的是為了解決記賬本的流失問題。方案前期,我們根據故事的六個要素設計了訪談提綱,然后招募用戶,進行了面對面的調研訪談。

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          隨后,由于訪談提綱與故事六個要素對應,因此按照這個對應關系,我們從原始的訪談資料中,整理出一個具有代表性的用戶故事。

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          通過這個故事,我對目標用戶的身份、行為、習慣有了清晰直觀的了解。同時,根據故事中情節描述,再對照記賬本中的交互體驗,可以看出,用戶流失的核心問題主要在于,自身的記賬習慣與記賬本提供的體驗不匹配,導致用起來有阻礙,用得不習慣。

          用戶的習慣是按日看賬,但是記賬本沒有聚焦在每日的統計上。因此,方案中我將明細頁按日分塊區隔,不僅每日的信息更聚焦,而且方便用戶進行日間的對比。

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          同時,用戶大部分時間都在關注當日的賬,只在月底、月初等階段性的時間節點,才會復盤整月的記賬情況。因此,我設計了 Tab 頁面結構,區分了用戶的高低頻行為。用戶進入記賬本時,會優先呈現明細,通過 Tab 頁面切換,在需要時也可以看到該月的記賬統計。

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          這個方案在后續的用戶調研中,得到了不少用戶正向的反饋。由此可見,利用故事六要素設計,能幫助設計師了解用戶,能從混亂的信息中抽絲剝繭,找到清晰方向。

          參考故事結構引導完成任務

          積木雖然只有幾個形狀,但是通過排列組合,能有無數種結果。這跟體驗設計的工作的很像。日常工作中我們大部分時間不是在創造一個從未見過的事物,而是將已有的信息進行組織,讓用戶順利的完成一段符合期待的旅程。

          故事的結構就是一種組織信息的方式,可以串聯起用戶在頁面、流程中的行動,讓用戶更容易朝著一個目標移動。

          最常見的故事結構就是經典的三段式結構,開頭鋪墊情節,中間描述沖突,結尾給出解決方案或行動。這種方式符合人類的認識規律,也被無數熒幕經典驗證過。

          讓我們再來跟隨朋友會員的方案,感受如何用三段式的故事結構,構建起一個順暢的任務流程。

          為滿足中小商家吸引顧客消費的需要,小賬本提供了會員優惠活動的功能。但是我們的中小商家群體一般都缺少專業的運營經驗,為了讓他們順利完成設置活動的目標,我參考故事中的三段式結構去呈現頁面信息,幫助理解活動、完成設置。

          • 開頭,對設置會員活動有什么好處進行了鋪墊,說服商家的參與。
          • 中間,給商家提供會員活動,洞察商家可能會遇到選擇活動的問題。
          • 結尾,提供活動建議,根據商家的建議進行活動推薦,解決問題。

          在故事中,沖突和起伏是人為創造出來,甚至需要戲劇性的夸大表現。體驗流程中,沖突是用戶使用功能中可能會遇到的問題,我們要提出解決方案,避免沖突,讓任務流程順暢。

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          當然講故事的結構不止一種,故事結構的本質是為了將零碎的情節串聯成一個自然的流程,方便用戶和理解。

          明確主線支線,輔助聚焦目標

          在故事中,一般圍繞著主角去展開故事。試想一下,西游記中如果將諸天神佛、各路妖怪的都安排成主角,那將是多么盤雜的信息量。因此故事才以師徒五人西行取經為線索展開。后面隨著一路上斬妖除魔,整個奇幻詭譎的神話世界躍然紙上。因此,故事中,用區分主線為主、支線為輔的處理,避免用戶的注意力被分散。

          回到我們用戶的旅程中也是一樣,無關緊要的操作將會將用戶分散用戶的注意力,讓用戶脫離原本的目標。因此在實際的設計工作中,要根據用戶的目標,區分清楚主線、支線。

          想要區分主線支線,就必須取舍。將跟用戶目標強相關的重要信息放在主線,可以讓用戶的操作更聚焦;同時,將次要的信息放在支線,輔助充實主線。用戶有更深入的需求時,也能夠有地方獲取。

          以顧客抽獎中讓商家順利完成一個抽獎活動的設置為例。如果要設置一個抽獎活動,需要設置獎品、活動周期以及開獎時間。這三項操作,我們如果讓商家自行操作,他們的操作門檻會非常高。他們甚至會因為復雜的操作而放棄使用。

          因此,根據與商家的交談,我們將用戶更重視的獎品信息設為整個活動的主線。按照商家會持續進行其他會員活動的習慣,默認設定了定期開獎,持續活動的通用規則。同時將只有部分用戶需要的修改活動形式和開獎時間的高階操作,收攏到支線中。保證主線通暢,用戶能輕松開啟活動。

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          如果一些支線無法很好輔助主線,甚至影響主線信息的傳遞,我們也可以舍棄。

          以朋友會員中為商家生成一張傳播優惠信息的宣傳海報為例。在過程中我們在針對為海報的設計了自定義宣傳語編輯、海報主題選擇等功能,后面發現用戶在編輯宣傳語、選擇海報主題等支線任務上付出了不少時間。因此,最近的方案中,我們去掉了這個支線任務,雖然也是犧牲掉了一些自定義編輯的能力,但是對于復雜規則理解困難的商家而言,生成海報的路徑變得簡單清晰了。

          用微信的實戰案例,聊聊設計師如何讓講故事成為輔助利器!

          主線支線本質上就是一種明確任務優先級的方法,主線支線的安排要從達成的目標出發去取舍。

          結語

          以上就是講故事的一些具體的方法在設計流程中的作用??偨Y一下:

          • 梳理故事要素,全面了解用戶
          • 參考故事結構,引導完成任務
          • 明確主線支線,輔助聚焦目標

          當然,因為時間的關系,以上的思考只是冰山一角,故事在設計中發揮的作用不止于此。比如講故事還可以用在日常的合作溝通中,幫助快速達成共識;故事也能用在產品宣傳中,讓用戶留下深刻的印象,等等。

          故事在日常的設計工作中無處不在,如果你是一位用戶體驗設計師,說不定,你在平時的工作中就不知覺的就用到了講故事的能力。斯蒂夫.喬布斯曾經說過:“世界上最有權利的人,是講故事的人。他們設定了未來世界的場景、價值和流程”。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設   作者:We-Design

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          「設計系統」的完整框架

          資深UI設計者

          很多年前剛聽到這個概念的時候,一直覺得設計系統是個非常高大上和牛逼哄哄的事情,當時 Material Design 剛剛出來沒多久,蘋果的人機設計指南在設計圈稱王稱霸,雖然自己主要做的都是安卓系統,還是認真拜讀了 IOS 的 Human Interface Guidelines。

          然后,其實也沒有什么然后了……

          你怎么看待設計系統這件事呢?

          關于設計系統,有的人會覺得類似于一種玄學,有的人認為它好是好,但容易被束之高閣,放著落灰,有的人認為它對于設計師是一種束縛……另外,還有很多和它相關的概念也經常被混淆:設計語言、設計原則、設計規范、設計風格、設計組件……

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 1: 設計系統詞云圖

          為了理清設計系統到底是什么,我把上面的這些和設計系統經常出現的詞語進行了分類。我認為,它們指出的,應該是基于不同角度對設計系統的解釋。在這些詞語里,有的解釋了設計系統存在的原因:追求效率,保持一致性、避免重復勞動,有助于數字產品形成整體性等。有的解釋了它的組成或者相關聯的內容:設計規范、設計語言、設計原則、設計規范、設計風格、設計組件等。有的解釋了設計系統容易出現的問題:玄學、束縛、高大上,理想化等。

          存在原因

          存在原因,也就是建設設計系統的目的,正是由于設計系統是為了幫助我們的工作工作更加有效率的一個整體工具,也就注定了設計系統的樣式、組成和運作方式不會一層不變,每個公司都需要自己找出適合自己團隊設計與開發之間最順暢的那個系統。

          要知道,雖然設計系統聽起來很酷,但創建一個好的設計系統其實是非常消耗精力的。所以,設計系統的目的一定要清晰并且符合現狀需要。

          為什么還要去創建設計系統呢?

          我認為,只有對于下面這幾條,你或團隊有強烈的需求,才是生成一個設計系統的好時機。

          • 以往的設計內容總是需要被快速重復使用
          • 需要釋放設計資源,讓人力更專注于更加復雜和有價值的問題。
          • 需要在多個團隊或多個產品之間保持一致性
          • 需要幫助初級設計師的產出迅速達到更高級的要求

          沒有被需要的設計系統,就是未來束之高閣,等著落灰的一套“玄學”。

          組成內容

          系統這個詞,是指由相互聯系的要素構成的有特定結構和功能的有機整體。設計系統,自然也是一個整體性的有機集合。

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 2:設計系統的組成內容

          1. 設計原則

          設計原則是引導設計系統建設的指導思想和戰略方向,基于大量實際經驗提煉的高度理論化概括。

          設計原則這個概念并不是為了設計系統才出現的,從完形心理學流派運用過來的格式塔理論所包括的臨近性、相似性、封閉性、連續性等設計原則,還有以“如非必要,勿增實體”為核心的簡約設計原則,來自唐納德諾曼的概念模式、反饋、限制范圍、可感知的預設用途四條設計原則等等。

          為了對抽象的設計原則有更具像化的體會,我們再來看看幾個比較有名的設計系統的原則。

          • 蘋果公司:美學整體,一致性,直接的操作性,反饋,隱喻,用戶可控
          • 微軟公司:自然而然的,符合直覺和有力的,引人入勝且沉浸
          • 谷歌公司:材料是一種隱喻,明顯、圖形化和有目的性的,有意義的動效

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 3: 三大設計系統的原則

          突然發現就蘋果公司沒給自己的設計系統專門取一個名字啊~

          可以發現,雖然三家公司的設計原則各有不同,但幾乎都是從通用的設計原則中提煉優化的。

          建設一個設計系統一定需要設定自己的設計原則嗎?

          我認為它不是必須的。

          雖然設計原則很重要,但在設計系統初期的時候,遵循現有基礎和通用的設計原則來指導建設整個系統也是可以的??偤眠^隨隨便便從基礎通用的設計原則中拿出一些詞語潤色一下,簡單的堆砌一些高大上的詞語,空泛的放在那里,等著它們逐漸變成別人口中的“玄學”吧?

          正因為原則是設計系統高度抽象化的結晶,所以它需要基于大量實際設計經驗再去生成,不然,很難起到指導設計系統達到增加效率的目的。

          2. 設計風格和規范

          設計風格,是這個設計系統給人形成的一種代表性的圖形印象。設計規范,是用于協調統一性的規則和范式。在 60 年代的《美孚品牌手冊》和 70 年代的 《NASA 圖形使用規范》中,就已經包含“顏色、字體、圖形、用法和示例”等內容。

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 4: 設計規范

          有了設計風格和設計規范并不一定就能讓使用這個設計系統的產品建立統一的品牌調性,只有當設計系統具有了一定辨識性的設計風格,并在設計規范指導下進行長期的設計產出后,才能夠讓使用這個設計系統的產品形成統一的品牌調性。

          3. 設計組件和模式

          對于設計系統里,我們最熟悉和常用的應該就是設計組件了,也就是 UI kits,包括輸入框、按鈕、文字、鏈接、下拉菜單等等。是組成界面的最小元素和這些元素的常用集合體。

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 5: UI kits

          設計模式,比元素更復雜一些,是完成任務所使用的一些基礎的、常用的交互方式,是可以解決問題的小型設計方案。比如 Material design 里的 Confirmation and acknowledgement,它提供的就是為機器在執行操作之前向用戶確認的一系列設計方案。

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 6: 設計模式

          簡單點來說,設計組件就是一些元素,主要給設計師用的,設計模式就是一些交互方式,主要給研發工程師看的。由于兩者很相似,如今更多的會把兩者合起來看。

          2013 年,前端工程師 Brad Forst 將原子理論運用在界面設計中,形成一套設計系統后,設計組件得到進一步擴展,可以形成比原來最初出現設計模式這個概念時更高層次的集合體,例如,大到幾個完整的頁面及其包含的交互方式,也可以成為某個設計系統的其中一個組件。

          當然,由于各個產品的需求、場景和定位等不同,越大的合成組件將會越復雜。

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 7: 原子設計理論

          4. 內容資產

          在某些設計系統的定義里,可能會把內容資產作為設計規范的一部分,但我這里想強調的是其作為資源的一部分。

          由于設計系統是一個有機的整體,在它不斷的服務于各產品線的同時,也一定會需要不斷填充不同的內容,比如應用里使用的圖標、字體、插畫、模型等等,這些內容積累下來,也應該成為這個設計系統的一部分,如果有其他的應用或產品需要,就可以直接取用,從而提高整體的工作效率。

          內容資產比較常見的有圖標庫、字體庫和音效庫,分別提供了多種圖標、多種字體和多種音效可以給不同的產品或應用使用。隨著插畫風格、三維風格的留下,未來必然還會出現隸屬于某個設計系統的插畫庫、模型庫,以及在產品里經常使用的文案集合。

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 8: 內容資產

          5. 工具、流程

          這兩塊主要是針對設計系統適用的具體環境,在協同性要求下我認為需要納入設計系統的內容。簡單的舉例來說,就是如果使用藍湖做自動化標注,就團隊統一使用藍湖,而不是有的人使用藍湖,有的人使用摹客。

          6. 設計語言和設計方針(guidelines)

          還有兩個經常提到,但我剛才畫的設計系統圖示里沒有提到的概念。

          設計語言:語言,是一個能夠達到相互交流的符號系統。人類學家索緒爾認為,語言能反映出多變言語活動背后的穩定規律。所以,我認為這里的設計語言,應該等同于設計規范,是設計規范另一種表述。

          設計指導方針(Design Guidelines):按照中文翻譯理解,我認為它是說明、介紹設計系的文檔,沒有包含在設計系統內。

          常見問題

          最后,設計系統的詞云圖里出現的玄學、理論化、落灰、空中樓閣……這些都是創建設計系統時很容易遇到的一些問題,尤其是實用性最高的設計組件,更是首當其沖。之前我組織我們團隊的設計師做復盤性質的workshop,單就設計系統的設計組件部分,大家就提出了20多條問題。

          從3個方面,幫你快速掌握「設計系統」的完整框架

          圖 9: 設計組件復盤 workshop

          綜合來說,設計系統常見的問題有三類:

          1. 定義性問題

          設計系統從大的框架性定義到具體設計組件的定義都不是件一蹴而就的事情,它從 0 開始,每一次的更新和迭代,對于當前的團隊來說都需要是既關鍵又有效的。關鍵是指設計系統當前定義下來的內容是后面的產品線經常性使用的,有效是指這些定義確定下來的內容是可以使用現有的資源去完成的,即以現有團隊的能力、時間和設備是可以完成并達成其效果的。

          2. 使用性問題

          目錄不清晰,文檔說明不全,包含資源不完整,這些都是使用時的問題。如果把設計系統看作一個產品,讓用戶(設計師或研發人員)覺得好用,才是它不會被束之高閣的解決方法。

          3. 協作性問題

          不知道有更新,收不到反饋,不了解使用者的情況……協作性的問題催生了市面上諸如藍湖、摹客、墨刀、Codesign以及很多設計軟件的云服務功能等。

          雖然現在市面上有非常多優秀的設計系統可以參考,但正如在存在原因中提到的,由于它是為了幫助我們自己所在的團隊更有效率的工作,終究還是需要靠自己基于實際情況去做變化。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:優設   作者:林影落 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          設計分割,你用對了嗎?

          資深UI設計者

          今天和大家聊聊設計中的分割,很多人新人做設計時,會經常糾結頁面分割用什么方式處理,是用線還是留白,還是用投影?今天我們來系統的研究下,分割的類型以及設計時候我們如何去運用。

          更多設計文章,設計交流,歡迎添加 | 微信ddm7212

          關注#公眾號:SKY蓋哥 ,第一時間獲得設計干貨和分享內容。

          一、分割線的作用

          分割顧名思義就是做設計時候,分割頁面的設計手法,它的目的是讓我們的設計更加有序,不同內容在頁面中呈現的方式更加讓用戶容易理解。是幫助內容組織的很重要方式。當然分割有很多種形式,色彩,線,間距,投影,圖標,圖文等等,今天我們來系統的研究下分割在設計中到底如何使用的,以及什么時候使用什么樣的分割最合理,希望大家通過這一篇文章學會和掌握。

          很多人提到頁面分割,可能腦海第一個想到,就是分割線,或者是色塊,其實不然,分割有很多種類型,不同類型在頁面中效果也不太一樣。那接下來,我們一起來看看頁面分割到底有幾種類型。

          二、用線進行分隔

          ▲使用水平的分割線來區分頁面內容,除了分割內容外,還做到分組的效果。如上圖阿迪的app和電商app都是通過類似的方式來處理。常用在表單中,能使界面瀏覽效率更高,更快速去檢索內容;是頁面分割中最為常見的。

          ▲比如在airbnb的案例中,分割線就是用來分割內容,起到分組的作用,讓頁面閱讀起來更加有節奏。

          ▲在dropbox的設計中,分割線也可以搭配icon來使用,讓頁面看起來視覺層次更強,同時分類更加明確。

          ▲分割線可以說是我們每天都在運用的,無論今天的內容設計,還是像dropbox這樣的工具產品都離不開分割線。但是分割線運用時候,需要注意分割線顏色不要太深,否則會有山寨感。

          ▲線太深會讓頁面不夠精致,顯得山寨,所以常用的分割線一般是#CCCCCC,#EEEEEE,或者黑色的10%透明度

          三、用色塊分割

          ▲除了線以外,色塊分割也是比較常用的,一般在頁面中用灰色色塊來分割,這個色塊高度一般20px左右,常用于分割上下兩組的內容為主。

          ▲華爾街新聞app設計中,大量運用色塊對頁面進行分割,頁面模塊更加清晰。

          ▲谷歌瀏覽器的設計中,運用了色塊的分割,模塊更加明確。如果你們的產品需要很明確的劃分組和組的關系,可以運用這種方式。

          ▲在很多電商設計中,這種風格目前還是主流,對于頁面內容比較復雜的頁面,需要這種分割明顯的樣式去區分模塊和功能。

          缺點是風格陳舊

          用色塊分割,需要考慮產品整體的風格規則,這種分割方式一個最大弊端就是風格會有些陳舊,在當今留白,輕量化設計當道今天,太多色塊割裂感強,會顯得陳舊,所以使用的時候需要根據產品整體風格去把握。

          四、用圖標進行分割

          ▲除了線,色塊還會通過一些插入式的圖形進行分割,如上圖,整個都是列表的信息流,在列表的前面適當加一些圖標來錨定整個頁面,會讓頁面看起來有更大的空間,瀏覽起來也更順暢。

          ▲谷歌瀏覽器的設計,也是通過圖形來錨定頁面節奏,讓設計看起來更加合理和秩序感。

          ▲谷歌新聞的列表設計,表單前面通過數字來錨定整個頁面的節奏和空間,讓大段文字看起來沒那么累。

          ▲谷歌的產品系列中,表單前面增加圖形或者文字會比較多,也成為他風格統一的非常重要的一個DNA。在表單前面加圖標或者其他視覺元素能讓頁面呼吸和留白更加的通透。

          五、用留白進行分隔

          常用的的線,灰色色塊,圖標分割這些都比較傳統,且對于頁面來說一個最大缺點是占據了很多空間,本身移動端屏幕就很有限,線,色塊,圖標,無形增加了用戶認知負擔,所以隨著設計趨勢的發展,用戶也更加關注內容本身,所以慢慢的設計開始嘗試用空白去分割頁面,同時還能消除了頁面多余的視覺噪音。

          留白在頁面中是設計師沒有放任何視覺元素,使得混亂的頁面看起來有了喘息的空間,空白的原則創建了空間,通過格式塔的運用,用戶自動在視線上形成了分割,同時空白為頁面增加了很多呼吸空間,并且讓設計看起來更加簡潔,在當下也是越來越流行。

          ▲國外知名社交電影軟件MUST整個頁面都是采用的空白分割運用在它設計中,通過內容去區分頁面模塊信息。

          ▲有序的留白,從始至終貫穿著整個頁面設計,這種風格也不需要任何線條就能將頁面層次很好的傳遞出來。

          ▲知名藝術電商網站Artsy就是運用空白分割,頁面干凈富有藝術氣息??瞻讈矸指钤絹碓匠蔀橐环N主流設計手法。

          六、用色彩進行分割

          色彩也同樣可以用來分割內容,將色彩運用的好,不僅能吸引用戶將關注力停留在頁面上,更主要是能讓用戶更方便的注意到你想表達信息內容。

          ▲Headspace整體頁面大多是通過這樣的色彩進行分割,色彩本身就是和其他內容有隔離關系,恰到好處的構圖,加上色塊的運用,很好的將內容和模塊區別開來。

          ▲在他的產品中到處可見這樣的設計,不僅讓頁面非常的年輕活潑,同時這樣的配色也會讓整體設計讓人印象深刻。但是需要注意是不能色彩太花了,圖形存在是為了內容做烘托的,最要還是讓用戶關注內容本身。

          ▲Stadium live這款直播產品,將色彩玩到了極致,整體頁面就通過色彩來區分內容,非常符合娛樂化產品定位。

          ▲在它頁面很多地方都隨處可見色彩的大膽運用,這個對于設計師配色功底要求較高。

          ▲這款APP也是我非常喜歡的一款產品,大家感興趣可以去下載體驗。也是用色彩做分割非常成熟的一款產品。

          七、用投影做分割

          陰影在設計中是非常重要的一個設計元素,除了能給頁面帶來設計層次,同時也能很好的區分內容,業內最出名的莫過于的google的材料設計語言,其中就是大量運用投影來營造頁面氛圍。

          ▲在google系統產品中,運用投影來做頁面分割非常多,投影除了能拉開頁面的空間感,同時在視覺上能更加突出。google日歷案例中,導航和核心操作加號按鈕都加深了投影。

          ▲google新聞頁面中同樣如此,除了導航區域,在卡片上也通過投影方式來分割內容,增強層次。

          ▲在蘋果新聞的產品上,同樣看見了類似設計手法,通過按鈕或圖片的投影,增強頁面深度的運用,不同于google的是蘋果的投影更加柔和。

          ▲Instacart產品也是如此,通過投影來區分內容,他們的卡片外面都增加了投影加強頁面深度??傊队笆欠浅:玫囊环N增強頁面層次和細節的一種手法,大家運用時候定好場景和規則。

          八、行業趨勢

          以上7種分割方法,基本覆蓋了所有視覺的分割手法,雖然沒有放品牌和網頁的案例,但是大體都是相同的,今天無論我們選擇哪種分割手法,本質都是沒有錯的,關鍵是要和整體的設計語言調性匹配起來,如果選擇一種就運用一種,切忌多種混搭,這樣就不會出現頁面錯亂的感覺。從整體移動端設計趨勢來說,曲線、留白和投影來分割是一個大的方向趨勢,值得我們多多關注。

          最后

          今天這篇文章只是一個設計中的基礎,它在于幫助我們梳理設計的內容細節,別看一個小點的知識,當你掌握的這些小點知識多了后,你的知識體系就會形成面,最終幫你帶來質的提升,今天這篇文章是讓你打開系統的思考,希望大家在使用時候,根據自己場景去定義。設計沒有一個絕對正確的標準答案,試了才知道。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼ben_lanlan,報下信息,會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          文章來源:ui中國   作者:skys 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          日歷

          鏈接

          個人資料

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

          存檔

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