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

          首頁

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          博博

          B 端產品主要是 Web 端產品,空間大、操作多,內容相對復雜。需要通過頁面布局或者視覺設計表達出明確的邏輯關系,從設計角度降低用戶的學習成本。而用戶有固定的認知規律。格式塔原理揭示了人類視覺的認知是整體的:我們的視覺系統自動對視覺輸入構建結構,并在神經系統層面上感知形狀、圖形和物體,而不是只看到互不相連的邊、線和區域。

          格式塔主要包括 7 個基本原則:

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          今天我們就來總結下,格式塔原理在 B 端產品中是如何應用的?

          接近性原則


          我們先看 2 張截圖,分別是不同分辨率下的界面效果。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          可以明顯的感覺到高分辨率下,菜單列間距離較大,菜單的歸屬關系很清晰。而低分辨率下,菜單間的距離變小,特別是后面兩列的菜單會給人混在一起的感覺。這就是格式塔原理中的接近性原則,距離近的關聯親密,距離遠的就各自獨立分組。

          當我們想要傳達給用戶層級關系時,就需要善于利用接近性原則。例如表格上方的功能按鈕,通常我們將高頻、核心操作放置在左側,低頻、輔助功能放置在右側。通過增大元素間的距離,達到功能分區的目的。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          相似性原則


          相似性原則是通過顏色、尺寸、圖形等方面的共同屬性,實現信息的分組或者高可讀性。

          例如在可視化圖表中,不同范圍值的指標采用不同的背景色。通過背景色的差異,將同一范圍內的數據形成視覺關聯,提高用戶對信息的識別效率。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          通過圖形尺寸的相似性也可以構建內容分區。例如阿里云、騰訊云控制臺的首頁,都采用了雙列設計,左側主要以高頻的業務功能信息為主,右側是輔助運營信息。兩列尺寸寬度有明顯差異,用戶會將相同寬度的卡片歸為一組。這樣有助于用戶理解兩類卡片的內容差異,并有效地突出業務信息。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          閉合性原則


          IBM、蘋果的 Logo 設計,無論是“用刀砍過”,還是被“偷咬了一口”,用戶仍然可以識別出完整圖形。這就是視覺閉合性原則的一種表現方式。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          在 UI 設計中,則會通過對齊方式,形成虛擬空間。例如下圖中阿里云通過明顯的背景色、陰影等手法形成有形的內容空間。而微信公眾號則是平鋪背景色,內容區借助標題、卡片對齊形成視覺閉合空間,最終將頁面劃分為左側導航菜單和內容區兩個空間。視覺表現上更輕量化。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          另外閉合性是需要元素之間相互輔助的,單獨的元素無法構建出閉合空間。以下圖為例,雖然四個小的卡片做了間距分割,但是由于界面整體上是橫向分割的。我們會將 4 個卡片看作是整體元素去理解和認知。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          連續性原則


          用戶更習慣于從左到右的橫掃閱讀,因此連續性主要體現在橫向空間中。

          下圖中,雖然左側的標簽文字與右側的內容信息有較為明顯的間距,高度尺寸差距也比較大。但是用戶不會將內容看作是 4 個獨立的個體,而是理解為兩組信息。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          在某些場景中,如果信息平均分布,不會產生連續性的視覺感知。

          例如下圖指標監控中,指標都是采用小卡片,間距、尺寸較為統一。這種情況下用戶就很難對信息分組處理。在我看來這些指標只是一個個的視覺散點,沒有明確的視覺重點。用戶無法感知到內在的邏輯性。用戶想要找到某個指標時,需要逐個檢索,花費的成本更高。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          簡單對稱原則


          通過上述很多圖片,我們可以看出頁面元素基本都是橫平豎直,中規中矩的元素和分割方式?;蛟S有些單調乏味,但是勝在簡單,不會帶來額外的視覺噪點。

          特別是 B 端產品,基本看不到異形的存在,甚至全圓角矩形都很少見到。即使有異形,也只是作為視覺表現元素存在于內容中,而不會作為空間的劃分邊界。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          主體與背景原則


          主體與背景原則最典型的應用就是蒙版彈窗。通過拉大主體與背景的差異性,凸顯彈窗信息。

          當我們需要著重表現內容時,同樣適用于主體與背景原則。例如登錄界面的設計,會通過差異化的背景、陰影等方式,帶給用戶清晰的視覺層級,適當凸顯輸入框的主體地位。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          而 B 端內容區是核心空間,基本都是采用純白背景,與頁面背景形成對比,從而占據信息的主體地位。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          共同命運原則


          共同命運原則聽起來有點玄學,指的是相同運動特征的元素會被認為是同一組或者是具有相關性的內容。運動的元素在 B 端產品中應用很少,我沒有找到合適的案例解釋這個原理。

          在移動端產品中有些應用案例。比如 iOS 系統中,桌面布局編輯態下抖動的圖標,可以與靜態不可編輯的內容形成隔離效果,視覺引導性更強。同樣今日頭條頻道編輯時,也采用了抖動效果。

          如何在 B 端設計中應用格式塔 7 大原則?來看詳細分析!

          總結


          雖然 B 端產品沒有 C 端色彩豐富,表現力上沒那么炫酷。但是兩者對信息傳達的要求是一樣的,要求和諧、有序、層次分明,輔助傳達內在的業務層信息。靈活地運用格式塔原理將對產品的體驗提升會有很大的幫助。

          格式塔原理不僅限于視覺表現,產品經理或交互設計師在原型設計時,也要重視格式塔原理,輔助設計方案表達,提高團隊間的協作效率。

          今天的分享就到這里了。如果有更好的案例,歡迎評論區留言分享給大家~


          作者:子牧先生

          轉載請注明:優設網

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

          魏華的微信.png

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

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

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



          終于整理完了,這些圖標庫也太好用了!

          seo達人


          首先先給大家推薦兩款sketch插件:Dapollo、Kitchen 3 

           

          Dapollo

          Dapollo插件是一款由螞蟻金服和Iconfont打造的設計插件集,這套插件包含了組件庫、頁面模板庫、色彩庫、圖標庫等設計素材,而且質量很高,最厲害的是支持設計稿一鍵導出前端代碼,能幫助開發效率提升和保證還原度。

          里面集成iconfont的圖標功能,親測在iconfont系統維護期間還可以使用,直接搜索拖拽使用即可。

          圖片

          插件獲取:后臺回復“Dapollo”自助領取

           

          Kitchen 3

          kitchen3集成了Ant Design、Creek Design、Rex Design L 等設計系統的圖標資源可以在圖標面板中快速拖拽對應設計系統中的圖標。iconfont升級期間可以作為臨時性的備選方案使用。

          圖片

          Kitchen 支持圖標的一鍵替換!只要是從Kitchen 中拖出的圖標,就可以點擊其他 icon 直接替換,演示如下:

          圖片

          同時集成了iconfot上的圖標資產(iconfont維護期間,暫時不能使用),可以直接選擇自己項目中的圖標資產:

          圖片

          更多介紹請查看往期文章設計師必看|這款設計神器讓你效率提高十倍!

          后臺回復“Kitchen3”自助領取插件包

           

          下面推薦幾個圖標備用網站,大家按需領?。?/span>

          1、https://iconpark.oceanengine.com/official

          圖片

          字節跳動的官網圖標庫,可自定義大小和線寬,就是圖標資源相對iconfont較少。

          2、https://icons8.com/animated-icons

          圖片

          icons8內置了3700 多個動畫圖標,全部以 JSON 格式提供Lottie、GIF 和 After Effects 格式,可直接下載源文件,不過企業商用需要授權收費的。

          3、https://www.flaticon.com/

          圖片

          線性、面性、插畫類圖標資源提供PNG、SVG、EPS、PSD 和 CSS 格式,會有付費內容。

          4、https://iconmonstr.com/

          圖片

          iconmonstr – 免費的、巨大的、不斷增長的簡單圖標來源,由來自德國的資深設計師 Alexander Kahlkopf 創立,擁有超過 20 年的圖標設計專業經驗。

          5、https://ikonate.com/

          圖片

          與字節圖標庫類似,可自定義圖標大小、線寬、顏色,缺點就是資源相對較少。

          6、https://remixicon.com/

          圖片

          Remix Icon 是一組為設計師和開發人員精心打造的開源中性風格系統符號。所有圖標均可免費用于個人和商業用途。

          7、https://feathericons.com/

          圖片

          國外免費開源圖標庫

          8、https://akveo.github.io/eva-icons/#/

          圖片

          va Icons 包含480多個精美的開源圖標,用于常見的操作和項目。在桌面上下載我們的套件,以便在您的 Web、iOS 和 Android 數字產品中使用它們。

          9、https://heroicons.dev/

          圖片

          麻省理工學院授權的圖標,可直接在Figma上打開。

          10、https://3dicons.co/?utm_source=appinn.com

          圖片

          制作精美的開源 3D 圖標在CC0 下100% 免費用于商業和個人用途與任何設計工具一起使用。里面圖標內容挺豐富,大家可以多點點看下。

          以上網站地址也更新在圖象官網上了,大家可以自取鏈接地址:https://www.tuuux.com/design/toollist

          圖片

          以上給大家分享了兩款sketch插件和10個圖標資源站基本能夠滿足大家的需求,希望能夠幫助你在工作中提高效率。

           

          原文地址:小六可視化設計(公眾號)
          作者:小六
          轉載請注明:學UI網》終于整理完了,這些圖標庫也太好用了!

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          B類新品場景設計

          seo達人


          大總管默默 APP設計  46瀏覽 

          圖片
          前序背景

          整個電商導購模式伴隨著著人群與場景的精細分層,從傳統的商品貨架式延伸至更具多元化的場景導購式,如“聚劃算”、“百億補貼”、“有好貨”等。

           

          圖片
          什么是 B類買家場景

          基于1688平臺商家和貨源情況,結合對買家人群的洞察,我們發現B類買家來平臺的核心訴求是“找商機、找供給、好服務”,商機尋找是B類買家建立新采購關系的主要動機。B類買家場景本質就是圍繞某一類買家找商機訴求,聚合對應不同屬性特征商品及服務,幫助買家高效找挑建立新的采購關系。

          圖片

          以“找新”場景為例,簡單介紹一下我們的設計思路

           

          圖片
          新品場景設計案例

          B&C買家的找新差異

          新品消費崛起通常C端以新品體驗價、限量抽取、試用等模塊來打造新品頻道的心智;而與C類消費者“滿足個人喜好、看重個人體驗”有所不同,B類買家“找新品”的行為背后其實是一個商機發現與判斷的過程;

          圖片

          現狀

          首先依靠數據分析得到平臺找新買家的三大身份占比,對他們的生意特點、拿貨特征、服務訴求進行分析,結合定向的調研走訪,梳理出核心關鍵問題,主要集中在“找挑效率低、決策參考少、新品找不到”;

          因此我們制定了設計方向:通過直播的方式,以“新品首發”欄目打造新品心智;圍繞人群個性化差異,進行商機新品賣點表達并在鏈路中透出,助力買家提升找挑新品效率。

          頻道場景搭建

          從場景心智設計開始,以2個核心維度展開:1.了解用戶行為特征;2.心智框架構建;

          1、用戶的行為特征

           針對商品賣點信息比較少,無法判斷哪個商品好賣的問題,思考如何基于買家動線做有效的設計表達方案更好的引導決策。我們去分行業進行廠貨內容維度拆解定義,從行業貨盤分類、賣點分類到核心特征提取,多維度抽取關鍵要素?;谡緝韧庥脩粲|點和進貨渠道的差異做不同的表達方式,通過視頻動態化引流吸引用戶注意產生認知,通過圖文做高效的決策判斷。

          圖片

          下圖是一個典型的買家畫像(如圖)

          圖片

          不同類型的買家對新品的定義和需求不同,對進貨渠道、商品特征、商家要求也存在差異。買家在新關系中拿貨選擇較謹慎,提升貨盤匹配度、建立對商家的認知信任、降低拿貨決策成本成為當前首要解決的問題。

          2、心智框架的構建

          基于對買家找新訴求關鍵信息抽煉,設計內容瀏覽路徑,與用戶進行認知匹配,加深用戶對于場景心智的認知;

          進行以下三個設計方向實施:

          圖片

          01.入口有感知

          通過渠道上新、新趨勢與線下模式相匹配,讓買家快速了解頻道定位,滿足強發現性買家需求;

          圖片

          02.內容有認知

          通過強化服務及貨盤映射,滿足買家低門檻快速測款需求,以流行風格、渠道牛商、趨勢新品等主題內容高效聚合,加深買家對于場景心智的認知;

          • 找新拿樣階段下服務訴求被滿足:起批門檻低、小單拿樣;發貨退貨有保障、快速測款;
          • 與自身線下找新習慣相匹配:下線檔口、貨盤風格映射、平臺趨勢參考;

          圖片

          03.導購有效率

          對于B類買家來說,選新品更多側重對未來商機確定性的投資;新品在前期普遍銷量較低,無法單以銷量熱度做為決策條件;圍繞商品生命周期、貨盤特征拆解商機關鍵決策點在鏈路中透傳,提升買家導購決策效率;

          a 商機因子拆解 – 以動態封面、商機表達助力找挑效率

          • 初期:款不確定,基于商家硬實力,以商選品,快速捕捉商機;如:十三行檔口、青島即墨產業帶商家;
          • 發展上升期:風向標、商機熱度逐步增多,具有流行新元素;如:新材質、新圖案、新工藝;
          • 爆發熱賣期:下游市場熱度升高、消費數據初步形成,以款找商,選更優供給 ;如:同款更低價、服務更確定;

          圖片

          圖片

          b 動線設計 – 不同階段環節下的拆解表達

          圖片

           

          寫在最后

          在打造新品場景中,除了剛剛所提到的場景的搭建、賣點的表達,同時我還對商家做了研究和分析,了解商家線下發新的渠道和方式,以及不愿意把新品發布在平臺的原因;我們通過“直播首發”集中上新,同時以工具、數據的方式幫助商家更好的對商品進行表達,增強播后一定周期內商品轉化和新關系建立的效果感知,從而提升商家新品上行的意愿度。

          對于B類導購場景的設計我們還在不斷的探索,在B端的場景下,圍繞用戶多類型角色、多階段需求以及成熟的下線模式去做特征的洞察和映射,以設計的手段解決改善問題;B端的設計師除了要懂設計本身,還要擁有業務、商業的思維,盡可能走進了解你的用戶,也許在這里我們很少有推陳出新的大動作,但每一個設計小點的背后都藏著對用戶訴求不斷分析拆解的努力。

          感謝閱讀

          文中設計稿僅做DEMO演示用,具體以實際線上為準

           

          原文地址:AlibabaDesign(公眾號)

          作者:CBU設計部

          轉載請注明:學UI網》B類新品場景設計

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          LOGO設計

          seo達人


          圖片

          底板類型,只是眾多創意方法的其中一種。
          這種類型的優點是效果氛圍豐富, 自身的風格調性比較明確。常常用在大型活動主文案、或是比較復雜的畫面中,能很好地串聯元素跟文字之間的聯系。

          這種類型都有什么要點和制作方法呢?等我依次給大家分享

           

          特點

          我們先來看一些同類型作品的樣例:

          圖片

          1.底托

          很清晰的一點,這種風格最主要的一點就是有一個經過設計的字體底托以讓字體清晰,不受畫面其他元素影響。

          2.重量感

          字體厚度、底托厚度、高光、陰影

          3.主題感

          主題感很強,這種方法設計出來的字體往往會有很強的主題傾向性。也就是風格指向。不用看見搭配的畫面 也能知道傳達的是個什么樣的氛圍。

          圖片

           

          主題感怎么找?

          1.分析需求

          第一步我們要做的就是分析需求,提取關鍵詞,明確設計目標,我們才能順利地往后執行。

          我們看看這個需求,首先,這是一個漫畫LOGO需求。我們應該先了解故事劇情并收集整體一些畫面風格,從這些畫面中提取可以提煉視覺元素的關鍵點出來:

          圖片

          觀察漫畫內容,我一共提取出了下面6個關鍵詞:

          圖片

          然后把他們轉化提煉成視覺元素。

          2.提煉視覺元素

          我們挨個關鍵詞提取視覺元素,

          比如科技感:

          圖片

          科技感的特征一般由科技線條構成。

          裝甲:

          圖片

          這個漫畫里就有,直接仿造畫風就可以。

          燈光:

          圖片

          能量:可以做成類似能量護盾,或者閃電的樣式。

          圖片

          以上就是我們視覺元素的提煉了。接下來就是具體的執行。

           

          執行

          底板類型的我們第一要做的當然是底板了,我想到的是可以用機甲的元素做底板,把文字承托在上面。

          1.制作底板

          底板要注意兩個點

          (1)排版

          我們可以先做一個大概的排版

          圖片

          要注意底板不要太大也不要太小,字體在底板上占80%左右的面積比較合適。

          (2)造型

          造型這里也是比較重要的,我們可以多觀察漫畫里的視覺元素來做。比如我這里是參考的戰機:

          圖片

          它整體的一個機翼造型還是蠻酷的,我們大概秒回一個剪影出來

          圖片

          還是蠻帥的。
          放上字體看看比列結構,跟著排版調整一下:

          圖片

          注意控制占比在80%左右。

          (3)層次

          底板如果只有一層的話,就會顯得有點單調,層次不夠。也就做不出厚度來。

          參考了下底板類型的層次是怎么做的,總結了三種出來:

          厚度增加層次:

          圖片

          做出字體的厚度和,底板的厚度來增加層次感,比較穩定厚重。

          元素穿插點綴增加層次感:

          圖片

          刻畫一些貫穿前后空間的元素, 可以增加層次感和統一性。

          層次堆疊:

          圖片

          這種就比較直觀,就是一層一層的去堆疊累積,以增加層次感。

          我們可以結合起來使用:

          所以我們可以在不變動大型的情況劃分一下,劃分些大的層次出來。

          圖片

          圖片

          這樣就豐富多了,其他的一些厚度啊之類的,可以在上色的時候再添加。

          (4)配色
          我同樣參考下樣例:

          圖片

          總結幾個點:

          1.底板顏色要和字體形成對比,才能凸顯文字。

          2.一般底板使用暗色。文案使用亮色,或白色。第四個那種使用同色系的可能就有點區分不開,字體不夠突出。

          方向:

          字體:使用白色

          底板:暗色

          白色好說,暗色怎么找呢?檢查了一遍視覺參考,發現有一個飛船顏色挺好的。

          圖片

          剛好又是暗藍色,這不是符合我們的要求嗎?

          用到底板上看看:

          圖片

          感覺不錯?。?

          (5)刻畫細節:

          把我們提煉的視覺元素拿出來用上

          圖片

          飛船上的線路縫隙,手掌上圓形的燈。

          添加下看看:

          圖片

          精致多了。

          這里要注意添加細節的兩個目的:

          1.讓我們的元素象形意義更明確,簡單說就是畫啥像啥。讓人一眼能看出來你這個是什么。

          2.層次,有凸起的地方(燈光,厚度),有凹陷的地方(比如縫隙,線路)。增加細節上的層次感。

           

          2.文字制作

          1.結構

          圖片

          我們看下現在的效果,如果直接放文字就會顯得很薄,字體壓不住底部。輕飄飄的感覺,我們上面總結的參考中都會給字體增加厚度來壓住底部,我們可以試試,給文字再增一層底板,來增加厚度:

          圖片

          是不是就整體多了?
          所以字體結構,分了字體本身和字體底板兩部分來組成。

          2.字型

          字型肯定是要做的,但因為字體設計單獨一個門類,我這里就不細講了。
          我們參考一些比較英朗科技感的參考來做就可以,展示一下:

          圖片

          3.細節

          提取科技線的元素:

          圖片

          添加到字體表面刻畫出科技感:

          圖片

          4.一個亮點

          在字體上提取一個筆畫,做特殊效果,使其與別的筆畫有明顯的視覺差異:

          圖片

          這里我是把“靈”字中間那一橫提取出來做了發光燈燈光的效果,使之成為一個視覺亮點。

           

          3.添加特效

          最后我們把字體放上去,整體加上一些前面提煉出來的閃電能量類的效果:

          圖片

          圖片

          這樣我們的logo就制作完成了。

           

          總結

          當我們要做某一種類型視覺的時候,不要光看表面的東西。好看或者不好看,什么也學不到。可以總結提煉他們的特點出來去深挖研究,理解里面深層次的邏輯,這樣我們才能進步得快。

          然后要去學習挖掘提煉某一種類型視覺元素,把他們融合應用到我們的項目中去。把控好每一處細節,才能出優秀的作品。

          希望對大家能有所幫助和啟發,謝謝。

           

          原文地址:菜心設計鋪 (公眾號)

          作者:慢熱

          轉載請注明:學UI網》LOGO設計

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          設計師突破瓶頸的四大狠招,專治止步不前

          seo達人



          設計是一個看上去有點難,實際做起來更難的行業,一件作品看起來平平無奇,可你真要做起來還不一定有人家的好,又或者你覺得別人的作品只是比你的好一點點而已,但你不要小看這一點點,想要跨越這一點點,你也許需要付出一兩年的努力,甚至是更久,因為設計師的瓶頸期非常多,很多設計師在兩三年期間都沒有任何長進也是很正常的事情。不進則退,在這個競爭激烈的行業里,我們要盡量縮短自己的瓶頸期。蔥爺本篇文章給大家推薦四個突破瓶頸的辦法,希望對你有用。

           

          01.刻意練習基礎技能

          大部分設計師做不出好的設計作品主題是因為基礎不夠扎實,其實這也正常,大學里安排的課程太多,學生也認識不到基礎的重要性,不會好好學,或者會嚴重偏科,所以很設計師都沒利用好這個打基礎的絕佳時間段,包括我自己。而非科班出身的設計師問題會更嚴重一些。所以,針對基礎的技能進行刻意練習很有必要,特別是自己明顯的短板。

           

          平面設計師的基礎技能主要有這么幾個:圖形設計、字體設計、版式設計、色彩搭配。那么要怎樣進行刻意練習呢?

          ? 選擇一個自己最需提升的技能,比如你目前的主要工作就是排版,而你的版式又很弱,那你就優先對版式設計進行刻意練習;如果你的工作是海報設計、廣告設計、包裝設計這種考驗綜合能力的工作,那你就選擇自己最薄弱的環節去提升。

          ? 買一些該類的書籍、找一些該類的文章來看,并且要收集、賞析巨量的作品,最好是每天都看點此類的作品。

          ? 每天都花一點時間做練習,如果想要提升色彩搭配,可以每天搜集幾張圖片并提取出它的配色,還可以每天用顏色來表現一個主題,比如春、夏、秋、冬、喜、怒、哀、樂、酸、甜、苦、辣等等。

          圖片 

          ? 把自己每天的工作內容或成果分享到朋友圈、微博或者是微信群里,也可以是某個人,這么做既可以適當給自己增加一點打卡的壓力,也有可能收到一點反饋。

          ? 什么時候可以暫停呢?首先,這項技能已經基本可以滿足你的工作所需,客戶或上級幾乎不會再挑你這一方面的毛病。其次,你自己覺得已經有很大進步,套路和方法基本掌握,短時間很難再有提升,這時你就可以暫停去提升其他技能了。

           

          02.學習新技能

          對于基礎還不錯的設計師,特別是一些老鳥,最有效的突破瓶頸的方式就是學習一項新技能,比如3D、插畫、合成或是動效,最好是選擇一個你在工作中能最常用到的技能, 比如電商設計師可以優先選擇3D或合成,品牌設計師可以優先選擇插畫。

          圖片

          這些都是比較主流、比較實用但是大部分設計師都不具備的技能,這些技能可以大大豐富設計的表現手段,能給你的設計作品帶來完全不一的感覺,算是橫向提升了自己,這種方式比縱向提升自己更快,效果更明顯。

           
           

          03.進一個好的團隊

          大家都知道環境對學習的重要性,另外,很多人都應該聽過“跟對人,做對事”這句話,而加入一個好的團隊實際上就是找到了一個好的環境,以及跟對了人。曾經就有朋友跟我說過,在某家公司待了一年,感覺比在上家待了兩年學到的東西還要多。

          當然,好與不好是相對的,我們沒法都一下擠到頭部的公司里去,畢竟面試者與公司是一個相互選擇的關系。但是對于想突破瓶頸的你來說,一個理想的設計團隊應該要有一些基本的要求,我自己是這么認為的:

          ? 團隊中一定要有水平比你高比較多的設計師,比如主管或總監;有高人指點比你自己摸索要進步快很多。

          ? 該公司的設計出品不能低于行業平均水平,公司整體水平不行,你想你能行嗎?

          ? 公司老板是認可設計的價值的,乙方基本都能滿足這一點,但是很多甲方老板都覺得設計可有可無,或者覺得設計要有,但是好與壞不重要,有就可以了,這樣的公司對設計的要求基本上是只求快不求質,能做出啥好作品。

           

          04.用營銷思維做設計

          很多人說設計是技術活,其實這句話只對了一半,因為設計師確實需要懂一些技術,比如設計軟件,你也可以把設計的基礎技能看成是技術活,就像手藝人一樣,設計確實有熟能生巧的成分。但是僅僅懂一些技術很難做出真正優秀的設計作品,縱觀那些真正優秀的商業案例,通常會有消費者洞察、品牌思維、營銷思維在里面,設計的形式、圖形、文案、編排都是有邏輯、有目的的,而不僅僅是從美觀、藝術的角度去考慮。

          圖片 

          當你學會站在更高、更廣的角度去思考設計、去做設計時,你的設計能力就得到升華。

           

           

          圖片 

          古人有云:“活到老,學到老”、“學無止境”,不管你做哪個行業,學習都是一件需要持續做的事情,這哪是什么內卷啊?這明明就是老祖宗留下來的文化。

           

          原文地址:蔥爺(公眾號)

          作者:蔥爺

          轉載請注明:學UI網》設計師突破瓶頸的四大狠招,專治止步不前

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          UI設計細節分析

          seo達人


          正文

          產品設計做到極致的時候,發揮的空間就會深入到細微之處的功能,看著簡單的功能,也會被設計師腦洞大開。不僅帶給用戶更好的使用體驗,也通過趣味性和差異化的表現方式,帶來不一樣的感官體驗。

          為了提高大家對于細節設計的靈感,今天黑馬哥為大家整理了一些細微之處的優秀設計方案,希望可以帶給大家更多設計思維。

           

           

          一、個性化的 UI 設計風格

          隨著用戶群體的年輕化趨勢,產品 UI 視覺層也在嘗試更多年輕化的風格,更獨特的視覺風格才能增加年輕用戶的好感度。最近體驗到皮玩 APP,描邊風的設計手法和青春活潑的配色,整體的界面設計帶來獨特的視覺風格,讓人眼前一亮。

          通過描邊可以中和色彩之間的排斥感,也能強化風格特征,是色彩構成中較為常用的手法。被運用到 UI 設計的表現中,帶來的風格感也是獨特新穎的,將成為一種風格趨勢被延續。

          圖片

           

           

          二、視覺區域的業務動態演繹

          強化主界面視覺感通常會在頂部區域進行,通過品牌色、插畫、IP 形象配圖等形式居多,再配合動效形式效果更佳。在每平每屋 APP 首頁中,頂部區域通過動畫形式演繹業務屬性,不僅增強了該區域的視覺感,達到吸引用戶關注的目的;也將產品的業務屬性表達出來,加深用戶的記憶點。

          圖片

           

           

          三、增強操作體驗的情感氛圍

          通過愛奇藝 APP 在端午節期間觀看視頻時,單擊或者雙擊屏幕則會出現歡快舞動的粽子形象,營造出節日氛圍。情感化的設計增強了操作體驗度,趣味性的設計也營造出更好的感官體驗。

           

           

          四、帶給你美食誘惑的下拉刷新

          麥當勞在麥麥商城欄目的下拉刷新設計中,采用漢堡形象結合層級動效進行表達,讓人眼前一亮。動效拉長的漢堡不僅體現出份量感,激發用戶的食欲;漢堡形象就十分麥當勞,展現出品牌關聯性。

          源圖像

           

           

          五、刷新狀態下的趣味化 IP 形象

          IP 形象結合到刷新設計中的案例非常多,不僅可以帶來情感化的體驗,也能增加功能操作的趣味性。半次元在下拉刷新時不僅結合 IP 形象,還通過下拉的程度將形象拉長,最后再配合表情和動態營造出趣味性。

           

           

          六、滾動的 3D 元素強化視覺感

          隨著三維設計的流行,在 UI 場景中也掀起了流行趨勢,出現在視覺強化、圖標設計、按鈕設計等元素中。吃貨筆記 APP 將 3D 元素的圖標作為登錄界面背景設計,配合滾動的動畫表達,帶來了非常驚艷的視覺效果。強化視覺感和青春潮流的風格,可以將用戶的關注度轉移,降低對于功能操作的排斥感,也提高了產品設計的感官體驗。

          圖片

           

           

          七、積分兌換的可視化表達

          積分兌換是增加用戶粘性的慣用形式,如何提高積分活動的參與度是設計重點。麥當勞 APP 將積分兌換模擬真實用餐場景,不同積分值對應不同套餐,交互形式簡單易懂。可視化的設計表達增加用戶的理解度,實物照片增加美食誘惑,吸引用戶參與積分活動,用戶體驗度較好。

           

           

          八、個性化的界面布局設計

          隨著產品設計越來越成熟且豐富多樣,在 UI 布局層面也不斷突破常規束縛,呈現出更大膽的設計解決方案。PODO 漫畫啟動頁過度到首頁時,布局做到自然過渡且風格特異,打破常規的界面布局給人眼前一亮的體驗。在瀏覽過程中不僅有視差感的體驗,動效的結合也增加了設計的關注度。

          圖片

           

           

          九、3D 實景增強購物體驗度

          如今的生活方式已經是足不出戶就可以滿足購物需求,眾多產品為了提高購物的真實感和體驗度,利用 3D 實景逛店提高場景代入感。屋顏 APP 利用 3D 實景打造了線上體驗館,虛擬空間體驗過程中點擊家居產品即可進一步了解商品信息。場景感的體驗館讓商品展示更有代入感,也打造了不一樣的購物場景,帶給用戶更好的使用體驗。

          圖片

           

           

          十、情感化的步驟設計

          針對步驟或者流程設計,除了簡單易懂的描述方式以外,通過配圖/圖形等來輔助用戶理解,往往可以使得傳遞效率事半功倍。每平每屋 APP 在展示裝修步驟的設計中,通過 IP 形象結合場景來表達不同步驟的場景感,不僅讓步驟信息更易理解,也使得單調的步驟變得更有趣味性,帶給用戶的感官體驗也是非常不錯的。

          圖片

           

          小結

          越是簡單的設計越容易被人忽略,看著簡單做起來卻難以突破,想要做出差異化的設計,就要從細微之處探索不一樣的表現形式。體驗和分析優秀的設計,是為了提高我們的設計感知能力和積累解決設計問題的靈感。

          希望今天為大家分享的設計案例可以帶給大家更多靈感,描述內容僅代表個人觀點,不足之處大家互相彌補。

           
           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》看著簡單,老司機做出來就完全不一樣(UI設計細節分析)

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          探秘|QQ社交形象年度盤點設計密碼

          seo達人



          圖片

           

          概述

          每年年底,QQ都會迎來一年一度的年終盤點活動,幫助用戶實現QQ社交記憶回溯。通過生成用戶專屬的社交形象,拉近用戶和QQ之間的距離,體現品牌溫度。

           

          一、設計目標

          年度盤點活動不同于主題運營活動,是對QQ用戶年度高光時刻的總結。在活動設計目標的設立上,我們希望塑造QQ溫暖品牌形象的同時清晰展示QQ用戶年度的社交記憶點,通過創造用戶記憶點,激發用戶分享。

          圖片

           

          二、創意構思

          我們從QQ用戶熟知的社交行為、場景出發,進行視覺元素延展。將用戶的瀏覽過程喻作QQ社交記憶的探索歷程。通過QQ元素等場景映射,喚醒用戶的社交記憶,最終形成用戶專屬的社交形象。

          圖片

           

          三、風格設定

          基于活動的目標我們衍生出以下設計關鍵詞(見下圖),簡潔有品質是本次活動視覺風格的核心傳達目標。

          圖片

          1、色彩

          為凸顯回憶感知以及透傳QQ品牌。在色彩的選擇上我們使柔和的藍黃漸變色系,背景色系就像天空會跟隨活動節奏、故事內容而動態變化,利用色彩變化傳達時光回溯的氛圍感知。

          圖片

          2、質感

          考慮到整體的風格設定偏潔凈明快的感受,我們多以玻璃、半透明3s,啞光三類材質為主。選擇透光性強與色彩融合度高的材質搭配使用,讓畫面更具輕盈、簡約的品質感。

          圖片

           

          四、視覺表現

          1、信息傳達

          年終盤點活動與主題運營活動不同,繁冗的氛圍傳達并不等同清晰的信息傳達,在活動的設計上,我們希望一頁只講述一件事,弱化裝飾,突出主體內容。

          圖片

          2、品牌透傳

          場景內我們融合了QQ品牌調性的元素,如聊天aio、消息氣泡,QQ空間等,加強用戶代入感。

           

          圖片

          3、動效編排

          我們根據頁面場景的展示內容類型,進行動畫節奏上的編排。保持信息傳遞的效率,并在需要氛圍強化的環節增強動畫吸引力。營造靈動的內容瀏覽體驗,提升動畫張力。

          圖片

          在動畫的運動樣式上,我們提煉出映射QQ社交場景的動態設計語言。通過模擬聊天氣泡出現、新消息通知彈出、空間訪客踩一踩等社交場景中的動畫形式,透傳QQ品牌調性,增強動畫表現力。

          圖片

          圖片

           

          五、激發分享欲

          從設計層面,如何激發用戶的分享欲?在本次活動分享中用戶的專屬社交形象扮演著重要的角色,接下來我們將介紹影響社交形象品質的三大設計因素。

           

          圖片

          1、形象設定

          我們選用QQ作為社交形象主體,根據用戶不同的社交屬性去賦予其色彩、材質的變化。在初步的生成方案上,我們嘗試挖掘更多的組合可能性,從QQ圍巾、嘴巴等部件進行材質變化。但三維的部件設計、審核成本高且組合起來多種情況形象差異性小。

          圖片

          圖片

          為此我們降本提效精簡了生成邏輯,在鵝身上視覺強感知的場域進行差異化設計。

          圖片

          2、構成規則

          我們將社交關鍵詞分為三大階級并衍生出社交形象構成的梯度規則。從社交小白到社交天花板,不同強弱的社交屬性決定著鵝身的變化。例如低階的材質表現使用的是石膏、木紋,形容人們在社交上木訥、寡言少語,而高階的鵝身質感、色彩,圖案表現更加豐富。 

          圖片

          圖片

          3、隱藏款埋入

          在QQ形象設計上,我們根據不同的社交關鍵詞進行了不一樣的設計,包括樣式、材質、顏色等,這些不一樣的設計在隱藏款上尤為突出。

          圖片

          例如針對社交關鍵詞“一呼百應KOL“,此社交關鍵詞形容的是人氣高,是眾人的焦點,為了體現這種超高人氣,QQ形象通體采用透明材質,并在內部放置了很多不同的體現開心的黃臉表情。

          圖片

          圖片

          在隱藏款“自帶光環的主角”的設計上,我們希望傳遞出受人矚目的光感,結合我們的生活,光線經過玻璃后,通過不斷折射反射,能很好的傳遞出多彩和絢麗感覺,所以這款QQ形象通體采用了玻璃材質,強化和傳遞出受人矚目的主角光環。

          圖片

          圖片

          隱藏款之外,其他更多QQ形象我們也會根據社交關鍵詞進行不一樣的設計。

           圖片

          圖片

          圖片

           

          六、形象展示

          • 金屬鵝 Metal Q

          圖片

          • 玻璃鵝 Glass Q

          圖片

          • 樹脂鵝 Resin Q

          圖片

          圖片

          圖片

          圖片

           

          七、形象延展應用

          除此之外,我們在春節賀卡活動中還復用了部分鵝身形象,并為虎年設計了專屬的虎紋迷彩鵝。期待后續在運營活動中嘗試更多的個性化QQ形象,刷新IP,升華品牌。

          圖片

           

          結語

          在當今社會強調本我的趨勢下,活動千人千面的屬性越發重要。將經典的QQ形象與用戶社交特征相結合,傳遞具備獨特性、品質感的品牌視覺表現,更能拉近QQ與用戶的距離。我們相信在未來的年終盤點活動中,QQ會帶給大家更多的驚喜,敬請期待吧!

          圖片

           

          原文地址:騰訊ISUX

          作者:ISUX設計

          轉載請注明:學UI網》探秘|QQ社交形象年度盤點設計密碼

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          關于體驗管理的幾點思考

          seo達人


          圖片

          數據來源:《2021年中國互聯網行業體驗設計工具趨勢研究》

          但體驗是的一種主觀感受,是用戶在使用一個產品、系統或服務之前、使用期間和使用之后的全部感受。公司的品牌、網站、系統、產品、服務、營銷活動、線下門店等等各個環節的用戶觸點都會是用戶體驗的影響要素,面對如此復雜的情況,體驗管理的邊界是什么?內核又是什么?接下來我將結合自己開展體驗管理工作的相關經驗,談談我對于體驗管理幾方面的思考。

           

          一、如何理解體驗管理

          顧名思義,體驗管理即為對體驗的管理,既可以是用戶的體驗,也可以是商家的體驗、供應商的體驗、經銷商的體驗,合作伙伴的體驗,還可以是內部員工的體驗。但無論是哪類角色的體驗,都是一種主觀的情緒感受,都會受到多個環節、多種因素的影響。因此,對于一家公司來說,體驗的提升和優化也勢必涉及多個部門團隊的工作協同,需要從宏觀視角、從戰略視角對“整體”體驗進行管理,充分分析并把握用戶與公司產品或服務接觸的每一個觸點環節,聚合和分析全渠道、全流程的體驗數據,洞察用戶痛點、需求及偏好,并以全鏈路整體體驗提升為目標,通過各部門團隊的協同,不斷改善公司產品或服務的觸點體驗,從而為用戶提供系統性價值交付,為企業提供持續性增長動力。

           

          二、為什么要做體驗管理

          首先,從體驗提升的宏觀價值視角來說,提升用戶體驗是企業在流量紅利逐步消失、行業競爭日益加劇的宏觀背景下,繼降低成本、提升效率之后實現業務增長的共識性舉措。實施體驗管理有助于提升用戶滿意度、忠誠度;有助于提升品牌口碑、品牌影響力;有助于促進用戶增長、商業目標達成;有助于促進產品創新、營銷創新以及企業升級。

          其次,從體驗提升的工作開展痛點來看,現階段國內體驗管理仍處于刀耕火種期,雖然越來越多的公司紛紛入局,但多數只是停留在散點式、被動性的體驗需求研究、體驗問題收集及優化、用戶反饋及態度采集上,缺少對體驗的整體性管控能力,因此在開展體驗提升工作的過程中往往會遇到以下困境:

          1. 缺少統一的量化指標。各團隊對體驗的理解、當前的體驗水平、體驗影響的大小均不像轉化率、用戶量等業務指標那么清晰,所以團隊之間缺少統一的體驗語言,導致體驗提升工作的推進成本遠高于更明確的業務目標提升工作。

          2. 傳統體驗研究分析的周期長,時間跨度和體驗觸點的覆蓋范圍有限,導致體驗優化工作難以適應現有產品或服務的迭代更新節奏。

          3. 體驗分析與體驗優化有脫節現象,未形成完整的體驗提升進度跟蹤保障機制。

          4. 公司同事體驗意識參差不齊,缺少統一的體驗文化引導。導致先上線后優化的不良模式盛行,增加了用戶首試體驗受損的風險,增加了體驗挽回所需付出的成本。

          因此,開展體驗管理所能帶來的直觀可見的價值是能幫助我們解決以體驗提升為目標的各項工作的難點,提升各項工作的效率。同時,從體驗管理的長遠價值來看,開展體驗管理可以提升企業競爭力,促進整體商業目標達成。

           

          三、體驗管理的通用模型

          結合國內公司在體驗管理工作開展上的主要內容,大致可將體驗管理工作分為三大類:

          1. 數據采集為主的研究執行,即診斷用戶使用產品或服務全鏈路上的體驗現狀和問題,為體驗優化提供方向指引;

          2. 體驗優化為主的機制建設,在公司層面建立規范的流程或機制,保障體驗優化工作順利開展;

          3. 體驗管理工具或系統建設,結合公司體驗管理需求,依托現有體驗分析及優化的工作流程、機制,設計開發體驗管理工具或系統,提升體驗管理的系統化能力。

          圖片

          數據來源:《2021年中國互聯網行業體驗設計工具趨勢研究》

          綜合現有各公司所開展的體驗管理工作內容以及我們現有的工作實踐,我將體驗管理工作的具體內容按照覆蓋范圍分為三層結構:數據層、系統層和運營層。

          圖片

          圖1. 體驗監測管理體系

           

          每一層級上都有對應的工作目標和工作內容:

          數據層:建設體驗數據,量化體驗水平,追蹤體驗變化。

          圖片

          圖2. 體驗監測數據示例

          做體驗的監測管理,首先我們需要看到它,并且能及時的掌握它的現狀和變化情況,這樣我們才能針對現狀去分析判斷我們應該怎么提升它,改善它,才能針對變化情況來分析、判斷、衡量我們所做的提升和改善措施是否有效,才能不斷沉淀經驗方法,在體驗提升的臺階上逐級而上,而不是原地打轉。

          但正如前文所述,體驗是用戶的主觀情緒感受,無論是對單個用戶的情緒感受的測量方法,還是對整體用戶主觀情緒感受數據的收集技術都不是很成熟,所以,體驗數據不像運營數據或財務數據那么容易追蹤和衡量。

          在這樣的背景下,我們首先需要找到那些可以直接或間接反映用戶情緒感受的數據,構建收集渠道來收集可以反映用戶情緒感受的數據。

          那這類數據都有哪些呢?結合用戶體驗度量的數據維度來看,大概可以將其劃分為兩類:用戶自我報告式的主動反饋類數據和系統埋點收集的客觀行為類數據。

          自我報告式的主動反饋類數據主要有滿意度評價(CSAT)、推薦意愿(NPS)、客戶費力度(CES)等反映整體感受的數據,以及用戶通過客服或在線反饋等渠道針對特定問題的反饋數據。此類數據主要通過直接詢問用戶或用戶主動反饋的方式來采集。

          系統埋點收集的客觀行為類數據主要是用戶與產品或服務的交互過程數據,比如App的整體使用頻率,使用時長,App分享率等,以及重點功能或頁面的點擊率、轉化率、跳出率等。此類數據主要通過系統后臺自動記錄來采集。

          為了能更精細化的對體驗狀況進行分析,也可以增加一些體驗水平分析的輔助型數據,比如用戶的性別、年齡、會員等級等特征類數據。以便我們看到整體體驗水平有所變化時,能具體的分析出是哪個群體的變化導致。

          系統層:構建體驗管理系統,承載體驗數據,提效體驗運營。

          圖片

          圖3. 體驗監測管理系統界面截圖

          體驗監測管理體系的中間層重點在于系統的建設。這主要是因為:

          首先,體驗管理系統是體驗數據的承載系統。單獨一期的體驗數據采集因為缺少對比的基準,所以參考意義不大,我們需要長期的采集體驗數據,并進行不同時間的體驗水平對比,這樣才能及時有效的發現體驗水平的變化,找到需要重點提升體驗的用戶群體、產品模塊或服務環節。

          而長期的數據采集及分析需要耗費較大的人力成本,且工作重復性較高,數據的人工分析也容易出現失誤,因此,通過系統來完成數據的自動采集、數據的自動分析、數據的自動診斷,不僅能及時且長期的采集體驗數據,而且能有效的節省人力成本,減少人工計算的失誤。

          其次,體驗管理系統是體驗運營工作的主要輔助工具。體驗數據的監測分析診斷只是基礎,依據監測分析診斷的結果如何能有效的促進產品或服務體驗提升才是體驗管理的最終目的,圍繞用戶體驗提升所要做的運營工作還有很多,比如產品/服務體驗問題的優化跟蹤,團隊/公司體驗文化的建設等。為了能高效的完成各方面的體驗運營工作, 我們依然需要借助系統的能力。

          因此,體現管理系統的建設在體驗管理體系的構建工作中是非常重要的一部分內容。

          運營層:構建運營機制,分析體驗數據,管理體驗問題,維護體驗用戶,建設體驗文化

          圖片

          圖4. 體驗監測管理相關運營產出

          體驗運營主要是指圍繞用戶體驗所進行的人工干預工作的總稱。我們的日常運營工作主要包含體驗數據分析、體驗問題管理、體驗用戶維護和體驗文化建設四個方面。

          體驗數據分析主要是對體驗數據結果進行統計整理跟蹤以及綜合性的分析,比如結合主觀數據及客觀數據來綜合評估特定功能或服務的體驗情況;并及時將體驗數據分析結果同步給對應功能/服務的責任團隊,協助其分析體驗水平的變化。

          體驗問題管理主要是對體驗問題的分析和優化。體驗數據的監測可以讓我們更及時的發現體驗上的問題,但單純的發現問題僅僅是開始,我們需要聯合相應的責任團隊一起對問題進行分析優化,在這過程中經常需要我們通過快速的調研來驗證問題,評估問題的嚴重性,找到問題的解決方案,同時需要推動或協助責任團隊完成優化方案,跟進優化進度和效果。

          體驗用戶維護主要是對產品/服務典型用戶群體或社區的日常管理和活動組織。主要是為了能及時的獲取產品/服務方面的體驗情況,及時了解產品/服務創新方案的用戶態度評價,讓用戶更深入的參與到產品/服務的設計開發過程中,引導用戶為產品/服務的迭代創新貢獻優秀創意。

          體驗文化建設主要是通過體驗數據分析結果/體驗專項研究結果傳播,體驗問題協同機制構建,體驗活動組織,體驗考核機制創建等方式不斷培養各團隊及時關注體驗水平的意識,營造各團隊積極推動體驗優化的氛圍,激勵各團隊推行體驗優化/體驗創新的主動性。

           

          四、體驗管理的趨勢展望

          隨著越來越多的公司開始進入體驗管理的行列,勢必會促進體驗管理不斷的發展變化。結合對現有體驗管理工作現狀的觀察,我認為可以用三個關鍵詞來概括體驗管理將來可能的三個發展方向。

          精細。體驗涉及用戶與公司接觸的方方面面,時時刻刻,體驗管理也將圍繞用戶的全部場景,完整鏈路觸點,以及用戶的整個生命周期來進行更加精細化的數據采集、分析和優化,全方位的監測、診斷和管理。

          多元。從宏觀行業到微觀數據都將變得更多元。未來的體驗管理不僅僅只是用戶體驗部門的工作重點,也將作為抓手逐漸成為整個企業從上至下的重點工作方向。體驗管理不再只是互聯網企業的專屬,也將逐步滲透至各行業的企業公司。不同行業、不同企業的產品或服務類型多種多樣,用戶與產品或服務的交互觸點、場景也各不相同,為了滿足不同行業、不同企業的多樣化需求,體驗數據的采集渠道和場景也將結合多樣的觸點場景變得更多元,體驗數據的采集維度也將變得更豐富,分析數據的方式方法以及體驗管理工具的功能類型也將在不同行業/不同企業中呈現出個性化、多元化的趨勢。

          智能。技術的進步和發展也勢必會帶來體驗管理能力的不斷提升,體驗數據的采集、體驗水平的分析診斷、體驗問題的優化管理將借助新技術而變得更智能、更高效。體驗數據的采集將在用戶無意識中完成,且能兼顧體驗數據的多種維度,使體驗場景的還原更便捷,更真實;體驗水平的分析診斷將結合更多維的數據來進行綜合性的自動化診斷,并提供切實可行的優化方案,使體驗問題的暴露更準確,更人性;體驗問題的分發、進度跟蹤、效果評估等管理工作的自動化程度更高,使體驗優化的效率更高。

           

           

          轉載請注明:學UI網》關于體驗管理的幾點思考

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          B端后臺產品的設計細節-設計說明指南篇

          seo達人


          一、建立原子化組件思維

          1、什么是原子化組件思維?

          原子思維:原子最早是由英國化學家/物理學家約翰·道爾頓提出的,繼承古希臘原子論和牛頓微粒說,提出的原子論?;瘜W元素由不可分的微粒(原子)構成的,它在一切化學變化中是不可再分的最小單位。

          原子理論同理適用于我們的設計系統中:

          頁面是由原子(最小單位設計元素)、分子(基礎控件)、組織(基礎功能組件)、模版(業務定制組件)、頁面構成。

          原子:原子是最基本和最小顆粒度的單位,無法進一步細分的UI元素,在界面中以「元素」的形式存在,例如:顏色、文字、圖標、分割線等。

          分子:原子排列組合構成了分子,在界面中多以「設計控件」的形式存在,形成相對簡單的UI組件的原子的集合。例如:導航欄、標簽欄、搜索框、按鈕、彈窗等。

          組織:原子、分子排列組合形成界面離散部分的相對復雜的組件,在界面中多以「基礎組件」的形式存在,例如:內容卡片、表單頁面。

          模版:原子、分子、組織按照業務需求排列組合構成了模板,在界面中也稱為「業務組件」,例如:篩選列表。

          頁面:按照一定規則后排列組合而成的滿足業務需求且包含品牌屬性的一個完整「頁面」。

          圖片

          2、組件化的內核

          設計組件不是把UI元素堆積到一個地方,然后各處集中引用這么簡單。組件化的工作方式信奉獨立、完整、自由組合。

          目標就是盡可能把設計與開發中的元素獨立化,使它具備完整的局部功能,通過特定規則自由組合來構成整個產品。

          獨立:一個組件就是一個獨立的產品:在制定組件的過程中要考慮到組件應用中的各個場景,降低、拆解組件中的耦合度,同時把一個組件當作一個獨立產品來設計 考慮空狀態、極端情況、尺寸變化 盡可能靈活適應各種使用場景

          完整:一個完整組件構成包含三種屬性:

          A.響應狀態-包含組件庫中原子的大小類型、分子的響應和組合方式、多狀態的交互;

          B.行為狀態-組件中元素的與背景的組合方式、組件中不同組件拼合的層級關系、組件與用戶行為的交互;

          C .數據狀態-包含組件不同的狀態枚舉:如提交中、審核中、已結束狀態。

          自由:每個組件都是相互獨立的,組件間的組合方式靈活且多樣的。靈活多變的同時也要遵循統一的柵格尺寸與表達約束,最大程度上保證頁面呈現出一種有秩序的美。

           

          二、建立設計說明指南

          1、什么是設計說明指南?

          針對企業級產品反復出現的設計問題,設計模式給出一般性的解決方案,實現跨應用交互一致性的有效融合。減少了不必要的認知成本,提升交互確定性和設計的效率。

          考慮到需要適應各種獨特的業務場景,模式的規則具有一定的靈活性,萬變不離其宗,通過了解設計模式的構建邏輯,可以衍生出更具場景特性的解決方案。

          設計模式包含以下內容:

          原則:基于價值觀衍生出的一般設計技巧,包括如何高效組織信息、幫助建立用戶與界面的互動等原則性要求。

          全局規則:通過規范常見的互動行為,包括導航、數據錄入、數據展示、反饋、操作、幫助等,呈現組件元素的標準用法和彈性空間,并了解如何將他們組織在一起來創建良好的體驗。

          構圖模版:我們總結了表單、列表、數據可視化、詳情頁、工作臺、異常、結果、編輯器幾類頁面的典型解決方案,介紹每類頁面的設計目標、設計技巧以及典型頁面內容等,幫助設計師和產品經理可以快速開始構建界面。

          2、服務于誰

          A.設計師:交互設計時,整體流程框架或分支流程可快速復用。

          B.產品經理:原型設計時,可復制并套用現有交互模式進行原型繪制,或直接引用進行開發。

          C.研發人員:可作為標準交互流程的參照,統一相似流程的代碼設計方式。

          3、有什么內容

          前言:對這次建立設計說明指南的目的性說明;

          設計概覽:描述這次調整的范圍的維度;

          設計原則:基于哪些設計原則輸出設計內容;

          構圖模版:頁面的構圖模版、組合控件和組合范圍;

          全局規則:全局范圍出發,除了頁面構圖以外,涉及到共用組件,制定的規范;

          組件:基礎控件和組織控件,甚至涉及到業務定制控件(模版)。

          4、設計說明指南的輸出

          《GM Design》交互設計說明指南,涉及幾十個產品線的成百上千個的功能,業務體量和復雜度極大,為了讓整體SaaS產品具備簡潔高效的一致性交互體驗,設計說明指南是設計過程中問題解決的核心方法,也是構建整個平臺或框架所要遵循的基礎和標準。

          設計模式輔助設計者將業務引向實踐,并使設計更具有一般性、簡單性、一致性及穩定性。同時,設計者也可結合不同業務情境,實現模式在一般性和特殊性的銜接并作要素與結構的調整。

           

          最后

          最后,為大家提供一份詳細的GM Design交互設計文檔,里面包含設計概覽、設計原則、構圖模版、全局規則、組件等多類B端后臺交互設計內容。

          完整版交互設計說明文檔-體驗鏈接:https://lanhuapp.com/url/947cJ

          大家可以在公眾號后臺回復文檔,獲取訪問密碼。

          慢慢來比較快,希望對你有幫助!

          圖片


           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》B端后臺產品的設計細節-設計說明指南篇

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          想要優化好UI作品,這14個設計細節一定要檢查到位!

          seo達人


          圖片

           

          今天會跟大家分享一些被廣泛運用的界面設計規則,它們能快速使得你的界面設計更干凈、高效。

           

          1. 文案要易于理解

          用更容易讓用戶理解(說人話)的引導文案,提升使用體驗。

          (彩云注:下面2個案例中,左側的“購物車”和“庫存2”太過于術語化,右側的“僅剩2”和“加入購物車”更加貼近用戶的日常理解。大家平時工作的時候,也一定要注意界面中的文案,尤其是說明文字,控件文字等等,這個點經常容易被忽略。)

          圖片

           

          2. 垂直對齊易于掃視

          良好的對齊方式,可以增強內容的可讀性,讓用戶的視線更容易掃描。

          (彩云注:左側的“之”字形視動線比較難閱讀,且不夠專業;右側的垂直對齊增強了可讀性,也讓設計看起來更加統一,能夠快速的提升設計細節。)

          圖片

          3.給選項加圖標

          使用圖標、動畫作為標簽,有助于更輕松地理解內容,它使界面看起來更加理性和豐富,能瞬間抓住用戶的眼球。

          (彩云注:左側的導航相較于右邊,很難第一時間準確識別它的意思,增加圖標后不僅更快看清,視覺上也更加美觀。)

          圖片

           

          4. 大段內容要拆分

          大段的長句會讓內容變得難以閱讀。為了獲得好的體驗和UI,應該注意拆分內容,并使用項目符號突出關鍵點,利用拆分好的內容塊讓用戶更快抓住重點。特別是在“功能說明和條款條件”或任何聲明時,提煉要點有助于提升用戶體驗,這樣也不至于讓用戶直接忽略。

          (彩云注:左側的大段文字我想應該沒多少人會去閱讀,右邊的至少還能在短時間內快速看看幾個關鍵詞。)

          圖片

           

          5. 流程增加進度條

          進度條幫助用戶追蹤流程,它也能使查看上下步驟更加容易。線上購物,表單填寫,申請流程等場景使用這種格式能很好的簡化流程。

          (彩云注:左邊的表單UI不方便跟蹤進度和流程,右邊的表單把進度放在頂部能幫助用戶清楚的知道流程進度。)

          圖片

           

          6.錯誤提示要明確

          錯誤提示一定要明確,易于理解,方便用戶進行下一步的操作。如果用戶不理解界面上出現的錯誤,用戶就會感到很失望,可能會放棄接下來的流程。在UI設計時,在正確的地方用通俗的語言說明問題,以避免歧義,這一點非常重要。

          (彩云注:我常常遇到各種出錯,但出現的提示太過于術語化,也沒有提示在正確的地方讓我非??鄲?。)

          圖片

           

          7.按鈕要正確合理

          從菲茨定律(Fitt’s Law)中我們應該知道,目標區域的距離和外觀與所采取的行動成正比。因此,為了將注意力集中在轉化按鈕上,按鈕應該準確放置在合理位置上。此外,按鈕的大小應該易于點擊,避免用戶因嘗試點擊時不方便而流失。

          (彩云注:左側的按鈕不在正確的決策位置以及按鈕太小,右側的按鈕簡潔明了并且符合用戶的心理預期,能夠讓用戶更快決策并點擊。)

          圖片

           

          8. 用好色彩心理學

          顏色是UI中不可缺少的部分,它能影響用戶使用應用時的情緒。正確地使用顏色將使UI看起來更加豐富合理。

          (彩云注:左側的藍色按鈕顏色并不符合用戶對于刪除的心理預期,右側的紅色按鈕對用戶的心理預期有危險和警告,用紅色代表刪除能夠讓用戶集中注意力關注這一特殊的操作。)

          圖片

           

          9. 單列更易保持關注度

          用單列展示內容,能更好地幫助用戶掃描。當你的應用和網站上要展示大量信息時,將所有信息垂直對齊時,能更好的保持用戶關注度。

          圖片

           

          10. 優先社交媒體賬號登錄

          當用戶準備登錄或注冊你平臺的時候,把所有可用的社交媒體登錄盡量放在首位。這將避免用戶填寫表格時付出額外的認知負擔和時間消耗而流失。首先使用社交媒體賬號,能很好地增加點擊率。

          圖片

           

          11. 選擇狀態要清晰

          在用戶做選擇的時候,需要清晰地告訴用戶選中的到底是哪一個選項。模棱兩可的顏色會增加用戶的認知負擔。更少的顏色和清晰的選中狀態能讓用戶獲得更好的體驗。

          (彩云注:左側的問題在于選中狀態不清晰且選項的顏色過于豐富,右側的選中狀態清晰且選項顏色只有2種,選中和非選中,體驗會更好。)

          圖片

           

          12. 用留白分組

          如果想給信息分組,使用留白是最好的方式。加條線作為分組符號會在界面中增加了一個額外元素,空白能讓UI看起來更加干凈和優雅。用線分組的情況適用于類似Twitter、Medium之類的重內容平臺等場景。

          圖片

           

          13. 控件樣式保持一致

          保持設計的一致性,能夠降低功能復雜度并讓用戶更快決策,一致性設計讓用戶更快熟悉操作而不需要太多思考。(彩云注:左側的選項圓角不一致,會讓用戶思考為什么這里會有不同,而右側的一致性選項設計,能讓用戶忽略內容外的干擾。)

          圖片

           

          14. 搜索中的占位符要用好

          在搜索輸入欄添加適當的占位符,提示用戶可以在平臺上搜索和找到的內容,這樣可以提供用戶參考并帶來更好的用戶體驗。

          圖片

           

          總結

          以上這些就是在設計數字產品體驗時應該遵循的14個基本規則,這些點雖然基礎,但卻經常被人忽略,我在星球中幫大家看作品集時發現上面提到的這些點出現的是最多的,希望大家可以把這些知識運用到自己的設計中,提升UI產品體驗。

          原文:https://bootcamp.uxdesign.cc/dos-and-don-t-for-ui-design-part-2-8f56dcd66b4
          作者:Ayushi Verma
          譯者:彩云Sky
          本文翻譯已獲得作者的正式授權(授權截圖如下)

          圖片

          希望對大家有幫助,歡迎轉發分享~

          原文地址:彩云譯設計(公眾號)
          作者:彩云Sky
          轉載請注明:學UI網》想要優化好UI作品,這14個設計細節一定要檢查到位!

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

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

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

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          日歷

          鏈接

          個人資料

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

          存檔

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