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

          首頁

          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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          關于設計的小插件,我只保留了這3個

          seo達人



          1、SimilarWeb – 網站流量來源和排名

          圖片可以看到一個網站的基本數據,比如瀏覽量,訪客都來自世界的哪里?-都是通過什么途徑訪問的該網站等等

          圖片

          圖片

          以上是我用B站來舉例,可以看到一些基本信息,點擊下面的按鈕可以跳轉到新頁面用以查看很多的信息:圖片圖片

          最關鍵的來了,最下面可以查看與該網站相似的網站,這條對設計師非常有幫助,很多設計師做網頁設計的時候不會找競品,這功能簡直是福音?。?

          圖片

          另外還有一點,比如你要去面試一個公司,很多人不知道面試說什么,你就可以用這個小插件來看看你要面試公司的網站數據情況,然后再結合你自己的設計作品鏈接起來,顯擺你對他們公司客戶群的了解,這樣面試時候就可以做到侃侃而談不失尷尬。

           

          2、Nimbus 截幕 & 屏幕錄像機

          圖片

          功能非常多,各種模式的截圖都有:

          圖片

           

          3、也就是萬人推薦的Muzli 2 – Stay Inspired

          圖片

          圖片

          設計師必備的主頁,每次打開都可以看到很多新鮮的設計資訊。

          圖片

          你甚至可以直接搜索顏色,然后會出來很多設計作品。還可以搜索關鍵詞,比如你搜索dasboard

          圖片

          有條件的可以打開chrome檢查看看自己是不是都安裝了,如果你還有不錯的插件推薦,可以在下面留言。

           

          原文地址:追波范兒(公眾號)

          作者:terechen

          轉載請注明:學UI網》關于設計的小插件,我只保留了這3個

          藍藍設計建立了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個維度

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

          結語

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

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

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

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


          藍藍設計建立了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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          axios 封裝,API接口統一管理,支持動態API!

          前端達人

          分享一個自己封裝的 axios 網絡請求

          主要的功能及其優點:

          將所有的接口放在一個文件夾中管理(api.js)。并且可以支持動態接口,就是 api.js 文件中定義的接口可以使用 :xx 占位,根據需要動態的改變。動態接口用法模仿的是vue的動態路由,如果你不熟悉動態路由可以看看我的這篇文章:Vue路由傳參詳解(params 與 query)

          1.封裝請求:

          1. 首先在 src 目錄下創建 http 目錄。繼續在 http 目錄中創建 api.js 文件與 index.js 文件。
          2. 然后再 main.js 文件中導入 http 目錄下的 index.js 文件。將請求注冊為全局組件。
          3. 將下面封裝所需代碼代碼粘到對應的文件夾

          2.基本使用:

          //示例:獲取用戶列表 getUsers() { const { data } = await this.$http({ url: 'users' //這里的 users 就是 api.js 中定義的“屬性名” }) }, 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          3.動態接口的使用:

          //示例:刪除用戶 deleteUser() { const { data } = await this.$http({ method: 'delete', //動態接口寫法模仿的是vue的動態路由 //這里 params 攜帶的是動態參數,其中 “屬性名” 需要與 api 接口中的 :id 對應 //也就是需要保證攜帶參數的 key 與 api 接口中的 :xx 一致 url: { // 這里的 name 值就是 api.js 接口中的 “屬性名” name: 'usersEdit', params: { id: userinfo.id, }, }, }) }, 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16

          4.不足:

          封裝的請求只能這樣使用 this.$http() 。不能 this.$http.get() 或 this.$http.delete()

          由于我感覺使用 this.$http() 這種就夠了,所以沒做其他的封裝處理

          如果你有更好的想法可以隨時聯系我

          如下是封裝所需代碼:

          • api.js 管理所有的接口
          // 如下接口地址根據自身項目定義 const API = { // base接口 baseURL: 'http://127.0.0.1:8888/api/private/v1/', // 用戶 users: '/users', // “修改”與“刪除”用戶接口(動態接口) usersEdit: '/users/:id', } export default API 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • index.js 邏輯代碼
          // 這里請求封裝的主要邏輯,你可以分析并將他優化,如果有更好的封裝方法歡迎聯系我Q:2356924146 import axios from 'axios' import API from './api.js' const instance = axios.create({ baseURL: API.baseURL, timeout: '8000', method: 'GET' }) // 請求攔截器 instance.interceptors.request.use( config => { // 此處編寫請求攔截代碼,一般用于加載彈窗,或者每個請求都需要攜帶的token console.log('正在請求...') // 請求攜帶的token config.headers.Authorization = sessionStorage.getItem('token') return config }, err => { console.log('請求失敗', err) } ) // 響應攔截器 instance.interceptors.response.use( res => { console.log('響應成功') //該返回對象會綁定到響應對象中 return res }, err => { console.log('響應失敗', err) } ) //options 接收 {method, url, params/data} export default function(options = {}) { return instance({ method: options.method, url: (function() { const URL = options.url if (typeof URL === 'object') { //拿到動態 url let DynamicURL = API[URL.name] //將 DynamicURL 中對應的 key 進行替換 for (const key of Object.keys(URL.params)) { DynamicURL = DynamicURL.replace(':' + key, URL.params[key]) } return DynamicURL } else { return API[URL] } })(), //獲取查詢字符串參數 params: options.params, //獲取請求體字符串參數 data: options.data }) } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32
          • 33
          • 34
          • 35
          • 36
          • 37
          • 38
          • 39
          • 40
          • 41
          • 42
          • 43
          • 44
          • 45
          • 46
          • 47
          • 48
          • 49
          • 50
          • 51
          • 52
          • 53
          • 54
          • 55
          • 56
          • 57
          • 58
          • 59
          • 60
          • 61
          • 62
          • 63
          • 64
          • main.js 將請求注冊為全局組件
          import Vue from 'vue' // 會自動導入 http 目錄中的 index.js 文件 import http from './http' Vue.prototype.$http = http
          

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

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

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

          elementui導出數據為xlsx、excel表格

          前端達人

          我這里為了同學們好理解,把所有元素都寫到一個頁面。

          1.第一步安裝插件

          
          
          1. npm install file-saver
          2. npm install xlsx

          2.第二步在mian.js中設置全局

          
          
          1. // vue中導出excel表格模板
          2. import FileSaver from 'file-saver'
          3. import XLSX from 'xlsx'
          4. Vue.prototype.$FileSaver = FileSaver; //設置全局
          5. Vue.prototype.$XLSX = XLSX; //設置全局

          3.第三步使用 

          
          
          1. <template>
          2. <div class="daochu">
          3. <el-button @click="o" type="success" round>導出</el-button>
          4. <el-table
          5. id="ou"
          6. :data="tableData"
          7. style="width: 100%"
          8. :default-sort="{ prop: 'date', order: 'descending' }"
          9. >
          10. <el-table-column prop="date" label="日期" sortable width="180">
          11. </el-table-column>
          12. <el-table-column prop="name" label="姓名" sortable width="180">
          13. </el-table-column>
          14. <el-table-column prop="address" label="地址" :formatter="formatter">
          15. </el-table-column>
          16. </el-table>
          17. </div>
          18. </template>
          19. <script>
          20. export default {
          21. data() {
          22. return {
          23. tableData: [
          24. {
          25. date: "2016-05-02",
          26. name: "王小虎",
          27. address: "上海市普陀區金沙江路 1518 弄",
          28. },
          29. {
          30. date: "2016-05-04",
          31. name: "王小虎",
          32. address: "上海市普陀區金沙江路 1517 弄",
          33. }
          34. ],
          35. };
          36. },
          37. methods:{
          38. o() {
          39. let tables = document.getElementById("ou");
          40. let table_book = this.$XLSX.utils.table_to_book(tables);
          41. var table_write = this.$XLSX.write(table_book, {
          42. bookType: "xlsx",
          43. bookSST: true,
          44. type: "array",
          45. });
          46. try {
          47. this.$FileSaver.saveAs(
          48. new Blob([table_write], { type: "application/octet-stream" }),
          49. "sheetjs.xlsx"
          50. );
          51. } catch (e) {
          52. if (typeof console !== "undefined") console.log(e, table_write);
          53. }
          54. return table_write;
          55. },
          56. }
          57. }
          58. </script>

          可以看到已經導出 

          實際工作中導出按鈕單獨抽離出去做到可以復用才是比較合理的




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

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

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

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



          國外大佬總結的這20條B端圖表設計原則,簡直太實用了!

          資深UI設計者

          最近幾年以來,大家能看到B端設計趨勢已經越來越火熱,在B端設計中關于圖表的設計算是為數不多的視覺發揮點了。那么怎樣才能做好圖表設計,讓設計出來的圖表高大上,符合業務需求,讓業務方和總監對你贊不絕口,本文就必須看完和收藏了,因為實在是太實用!

          彩云之前也在我的公眾號上分享過一篇關于數據可視化的干貨,《如何做好數據可視化設計,國外大神給出了十條實用建議》,今天的這篇算是更加系統和完善了。


          應用設計越來越依賴數據驅動,對高質量的數據可視化需求也越來越高。然而我們身邊卻充斥著令人困惑和誤導的數據圖表,但我們其實可以通過遵循一些簡單的規則來改變這個情況。


          1. 選擇一個正確的圖表可視化類型


          選擇錯誤的圖表類型,或默認為最常見的數據可視化類型,可能會讓用戶感到困惑或導致對數據的誤解。根據用戶希望看到的內容,可以用多種方式表示相同的數據集。盡量做到每一次做數據可視化時都能從數據集類型分析和用戶訪談開始。 


          2. 根據正負值使用正確的繪圖方向


          當使用水平條時,在基線的左側繪制負值,在右側繪制正值。不要在基線的同一側繪制負值和正值。 


          3. 條形圖總是以0基線開始


          刪數據起點會導致曲解。在下面的例子中,看左邊的圖表可以很快的得出結論,值B比D大3倍多,而實際上,兩者的差異要小得多。從0開始可以確保用戶獲得更準確的數據表示。


          4. 折線圖應該要清晰體現y軸上的趨勢變化


          對于折線圖,總是限制y軸比例從0開始可能會使圖表幾乎平坦。由于折線圖的主要目標是表示趨勢,因此根據給定時期的數據集調整比例并保持直線占據y軸范圍的三分之二是很重要的。 


          5. 使用折線圖時要考慮時間連貫性


          折線圖是由線連接的“標記”組成,通常用于可視化時間間隔內的數據趨勢。這有助于說明數值是如何隨時間變化的,并且對于較短的時間間隔非常有效,但當數據更新不頻繁時,這可能會導致混淆。 

          例如: 使用折線圖來代表年度收入,如果數據是每月更新的,則每個月在圖表中會生成一個個孤立的標記點。用戶可能會假設連接“標記”的線代表實際值,而在特定時間實際的收入數字是未知的,所以可能會產生誤會。在這種情況下,使用垂直條形圖可能是一個更好的選擇。 


          6. 不把折線圖強行”平滑“


          平滑的折線圖可能在視覺上很好看,但它們錯誤地反映了背后的實際數據,而且過粗的線會模糊真正的“標記”位置。 


          7. 避免使用比例不同的雙軸折線圖


          通常,為了節省可視化空間,當有兩個具有相同度量但大小不同的數據系列時,可能傾向于使用雙軸圖。但這些圖表不僅難以閱讀,而且它們還以完全誤導的方式代表了兩個數據系列之間的比較。大多數用戶不會密切關注比例,只是瀏覽圖表,然后就得出了錯誤的結論。 


          8. 限制餅圖中顯示的切片數量


          餅狀圖是最流行的也是經常被誤用的圖表之一。在大多數情況下,條形圖是更好的選擇。但如果你決定做一個餅狀圖,有2個比較好的建議:

          1)不要超過5-7片,保持簡單

          2)可以將額外的最小段分組到“其他”切片 


          9. 在圖表上直接標注


          如果沒有適當的標簽,無論你的圖表有多好,它都不會有意義。直接在圖表上標注對所有用戶都非常有幫助。查閱圖例需要時間和精力來理清數據和對應的部分。 


          10. 不要在切片上貼數據


          將數據放在切片上可能會導致多個問題,在可讀性問題上和窄切片上都會有挑戰。相反,添加黑色標簽能清晰的鏈接到每個部分。 


          11. 保持餅圖切片秩序以提升閱讀效率


          在確定餅片秩序時,有幾種常用的方法:

          1)將最大的切片放在12點的位置,然后將下一片切片順時針降序排列

          2)把最大的切片放在12點的位置,第二大的放在順時針相鄰位置,第三大的放在11點的位置,其余的切片按順時針降序排列 


          12. 避免隨機排列


          同樣的建議也適用于其他許多圖表。不要默認采用字母排序,將最大的數值放在頂部(對于水平條形圖)或左側(對于垂直條形圖),以確保最重要的數值占據最突出的空間,減少眼球運動和閱讀圖表所需的時間。 


          13. 窄的餅圖是難閱讀的


          餅圖通常不是最容易閱讀的圖,因為比較相似的值非常困難。當我們把中間部分去掉,創建一個圓圈圖表時,我們騰出了空間來顯示額外的信息,但這樣犧牲了清晰度,極端情況下,圖表就會變得毫無用處。 


          14. 視覺效果不要搶了數據風頭


          不必要的造型不僅會分散注意力,還可能導致對數據的誤解和用戶的錯誤印象。你應該避免:

          1)3D元素,明暗面

          2)陰影、漸變和其他扭曲的多彩色

          3)斑馬圖案,過多的網格線

          4)過度裝飾,斜體,粗體或襯線字體 


          15. 選擇與數據性質相匹配的調色板


          顏色是有效的數據可視化的組成部分,在設計時考慮以下3種顏色類型:一個定性調色板最適合顯示分類變量。為確保易用性,所分配的顏色應該是不同的。連續調色板最適合需要按特定順序放置的數字變量。使用色相或亮度或兩者的組合,可以創建一個連續的顏色集。

          發散調色板是兩個連續調色板的組合,中間有一個中心值(通常為0)。通常不同的調色板將傳達積極和消極的價值。確保顏色也與“消極”和“積極”表現的概念相匹配。 

          看看一個方便的工具- [ColorBrewer]https://colorbrewer2.org/#type=sequential&scheme=BuGn&n=3,它可以幫助你生成各種調色板。 


          16. 設計的可訪問性


          根據美國國家眼科研究所(National Eye Institute)的數據,大約每12人中就有1人是色盲。你的圖表只有在廣泛的受眾可以訪問時才會成功。

          1)在調色板中使用不同的飽和度和亮度

          2)把現有配色去色然后檢查對比度和可讀性。 


          17. 關注易讀性


          確保排版能夠準確傳達信息,幫助用戶專注于數據,而不是分散用戶的注意力。

          1)選擇易讀的字體,避免襯線和裝飾過度的字體

          2)避免使用斜體、粗體和全部大寫

          3)確保與背景有高對比度

          4)不要旋轉文字

           

          18. 使用水平條形圖代替旋轉標簽


          這個簡單的技巧將確保用戶能夠更有效地閱讀圖表,而不會扭傷他們的脖子。 


          19. 事先選擇合適的圖表庫


          如果你的任務是在web和移動項目中添加交互式圖表,你應該問的第一個問題是我們將使用什么圖表庫?現代圖表庫包含了許多前面提到的交互和規則?;谝讯x庫的設計將確保易于實現,并能提供大量交互想法。 


          20. 做成動態圖表


          幫助用戶通過改變參數,可視化數據進行探索。然后得出結論,最大化價值和洞察力。在下面的示例中,你可以看到IOS Health應用使用了各種數據表示的組合。 



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

          文章來源:ui中國   作者:彩云Sky 

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

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

          藍藍設計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產品也是如此,通過投影來區分內容,他們的卡片外面都增加了投影加強頁面深度??傊?,投影是非常好的一種增強頁面層次和細節的一種手法,大家運用時候定好場景和規則。

          八、行業趨勢

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

          最后

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


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

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

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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