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


          1、菲茨定

          圖片

          選中目標所需時間與移動距離長短和目標面積大小有關。(與距離負相關,與面積正相關)

           

          現實中的應

          圖片

          在商場中尋找洗手間取決于標志的大小及步行的距離。為了滿足這兩個標準,標志設計得更大、更容易接近。

           

          設計應用

          圖片

          ▲ 左側頁面的CTA按鈕很小,沒有突出顯示,與表單的其他元素基本上沒有區分;右側頁面CTA按鈕尺寸很大,能讓用戶清晰識別。

           

          2、??硕?/strong>

          圖片

          決策所需要花費的時間隨著選擇的數量和復雜性增加而增加。

           

          現實中的應

          圖片

          與餐廳相比,快餐店的菜單選項有限。因此顧客點餐速度更快,門店提供的服務也更快。

           

          設計應用

          圖片

          ▲ 在Whatsapp上轉發消息時,會在“最近聊天”列表上方看到“經常聯系”的3個好友。這對用戶來說是一種簡單的交互,幫助用戶節省操作時間。

           

          3、共域定律

          圖片

          被一個顯而易見的邊框包圍起來的多個元素,被視為一個群組。(從屬于格式塔理論)

           

          現實中的應用

          圖片

          在服裝店中,衣服按照類型被分到不同的架子上來展示,即使對這家服裝店一無所知,顧客也會將一個貨架內的商品關聯成相似的東西。

           

          設計應用

          圖片

          ▲ 過濾器被封閉在產品頁面之外的單獨區域中,因此可以清楚地識別左右兩部分的差異。

           

          4、雅各布定律

          圖片

          用戶將大部分時間花在別人家的網站(產品)上,而不是你的。這意味著他們希望你的網站(產品)跟別人的有相同的使用方式。

           

          現實中的應用

          圖片

          假設家中的陽臺是一扇推拉門,我們可能希望酒店的陽臺門也以同樣的方式操作。因此如果酒店有一個滑動門,我們可能會下意識地先去推門。

           

          設計應用

          圖片

          ▲ 以上是國外知名的電商網站導航欄設計,這幾個網站導航欄中顯示的信息及其結構都非常相似:左側是品牌標志,中間為搜索欄,右側為其他選項(購物車/個人賬戶)。

           

          5、系列位置效應

          圖片

          用戶更容易記住系列中出現的第一項(首因效應)和最后一項(近因效應)。

           

          現實中的應用

          圖片

          我們通常更容易記住某個電話號碼的前4位或后3位,這條法則也是銀行卡號被分成4組數字的原因。

           

          設計應用

          圖片

          ▲ 在亞馬遜主頁上,網站的第一部分總是顯示最重要的內容:導航包含logo、搜索和其他重要功能;輪播圖通過圖形設計吸引用戶的目光,引導新的交易或優惠。

           

          6、馮·雷斯托夫效應

          圖片

          又稱隔離效應。當存在多個相似物體時,與眾不同的物體最容易被記住。

           

          現實中的應用

          圖片

          在商場購物時,相較于普通裝飾的門店,我們更有可能記住或將注意力轉移到具有霓虹燈效果的門店上。

           

          設計應用

          圖片

          ▲ App上有新消息時,會在圖標上用紅點顯示,這樣的提示更清晰和突出,從而吸引用戶的注意力,引導用戶點擊并查看消息。

           

          7、審美可用性效應

          圖片

          用戶通常認為漂亮的設計更易用。

           

          現實中的應用

          圖片

          當參觀汽車展廳時,我們通常會對汽車精美的展示感到驚嘆,并立即對這個品牌產生積極的印象。

           

          設計應用

          圖片

          ▲ 在愛彼迎上,我們住在陌生人的房子里,因此建立雙方的信任是必要的。當訪問像愛彼迎這樣干凈簡潔的網站時,我們會下意識地信任這個產品,也確保了用戶對品牌的信任。

           

          8、峰終定律

          圖片

          人們評論體驗優劣,大多基于峰值和結束時的感受,而不是所有環節的平均值。

           

          現實中的應用

          圖片

          在足球比賽中,整場的觀看體驗將根據比賽結束(誰獲勝)和比賽高潮(誰進球最多/比賽中最激動人心的時刻)來判斷。

           

          設計應用

          圖片

          ▲ 在夜晚非常饑餓的時候,我們使用訂餐App選擇食物時,卻被告知付款失敗。這時候App界面設計的再好看也無關緊要,訂餐失敗就是從這次體驗中收獲的結果。

           

          參考:uxplanet.org/laws-of-ux-outside-the-screens-d44298c85d94

           

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

          作者:Clippp

          轉載請注明:學UI網》用戶體驗設計法則應該怎么用?來看看這些應用原理!

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

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

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

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

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



          2022年,B端設計的趨勢有哪些?

          seo達人

          視覺趨勢

          1. 3D設計風格

          雖然 3D化 的視覺風格早已到來,但是在B端市場上,3D風格在此之前依舊表現的十分克制。

          隨著 C4D、Blender 這些 3D 建模軟件的不斷普及,再加上互聯網上關于 3D 建模教程的增多,你會發現 3D 風格的視覺表現,是一個 B端視覺設計師 的基本要求。

          而3D風格用在B端軟件當中,會有兩個使用場景:

           

          圖標

          因為在B端產品當中,圖標本身就是非常難以去表現,比如“物聯網,大數據”。

          許多的抽象詞匯,很難通過一個具象的事物進行表達,而在企業官網當中,在視覺表現上的要求又十分的高。因此你會發現,在視覺風格上的選擇,往往只有 3D 圖標 + 插畫 這一條路。

          圖片

          并且 3D 圖標的使用場景不會太過于局限,也可以用于產品的工作臺、運營營銷工具箱 等頁面,因此 3D 圖標的出現,它的應用場景也會相比之前 要更加的廣闊。

          圖片

           

          可視化大屏

          大屏設計 也在不斷的“內卷”,因為傳統的 2D 可視化大屏 所搭建出來的大屏已經滿足不了企業的野心, 像DataV 騰訊云圖 ,大家都在朝著 3D風格 炫酷的方向進行延展,因此也就會導致 3D 的視覺風格需求 激增,而 3D 建模仿佛就是大勢所趨。

          圖片

           

          2.新擬態

          雖然新擬態是在前兩年的產物。這個設計風格背后,遭到了很多設計師的質疑與排擠。

          但是隨著這個風格的不斷成熟,感覺它在B端視覺領域(特指的是 官網 ),是非常受到歡迎的,因為整體的風格,與官網的設計形式趨同。

          同時作為B端產品的官網,其實是更需要新擬態這種風格。因為電腦場景下鼠標光標對頁面進行 Hover 操作 給出的真實反饋,而使用了新擬態的官網按鈕,給你的反饋非常真實。

          這里安利一下騰訊云的首頁官網,大家就會發現在設計風格上,大量的采取了新擬態元素,并且配合 3D 風格的圖標,以及毛玻璃材質的設計,讓它的設計瞬間加分不少。

          圖片

           

          3.開源的設計系統

          在去年,設計系統迎來了一波發展的高峰期,隨著字節、騰訊,三大設計系統(Arco Design、TDesign、Semi Design)的開源,其實是給我們很多B端設計初學者,有了更加完整仔細的B端入門教程。

          比如 Arco Design 的組件用法 https://arco.design/docs/spec/link

          圖片

          就清晰的講清楚了每一個組件的使用方式,以及注意事項,仔細閱讀這里面的內容,其實就是B端設計的入門學習。

          而未來,國內的環境,開源的系統也會越來越多,大家可以針對這幾大類不同的設計系統,進行對比,或許會有一番收獲。

           

          產品趨勢

          超級app

          這里的 超級app 可能和大家潛意識里的 支付寶、微信 這些軟件不太一樣。

          在B端行業,隨著疫情的不斷擴散、再加上了兩年時間的發展,很多B端產品的功能架構都出現了一個現象,產品的功能開始變得非常擁擠。因為B端軟件的核心價值其實就是靠著一個又一個功能去累積,也就意味著隨著B端產品的發展,功能模塊在不斷的累積,導致在設計層面,這樣的現象變得更加嚴峻。

          你會發現左側的導航菜單已經完全沒有辦法裝下這些導航內容,而這一現象也反映在很多產品當中,比如我了解的 飛書管理后臺、薪人薪事 等等諸多B端產品,它們在整個導航內容上,已經增加到一級導航 15+  、二級導航 40+ ,這無疑會開始對設計師的能力造成巨大考驗。

          圖片

          面對這一情況,許多導航菜單都將會迎來前所未有的挑戰,最近也在深入研究導航菜單過多時的解決辦法,發現了一些新的 導航菜單 設計方法,有機會咱們重新梳理一下 導航菜單 的內容,將B端設計指南 文章進行更新。

          圖片

           

          低代碼定制化

          低代碼一直是我關注的一個領域,先給不明白低代碼的同學簡單科普一下。

          低代碼,一種快速開發應用的軟件,將通用、可重復利用的代碼形成組件化的模塊,通過圖形化的界面來拖拽組件并形成應用。低代碼能夠實現只寫少量代碼或不寫代碼,類似用“樂高積木”的方式來開發。

          在國外有很多著名的低代碼成功案例。Outsystems(國外非常出名的低代碼平臺)幫助施耐德電氣在20個月內推出了60款應用程序,開發過程加速了兩倍,僅在第一年就節省了650人天的工作量;在2012年即將推出Model S之際,特斯拉放棄了SAP的ERP產品(可以思考一下為什么),改用低代碼開發平臺Mendix,用25個人四個月時間自建ERP系統。

          去年,低代碼平臺,也有很多新產品面世,其中就包含:

          圖片

          因此你會發現,其實低代碼就是在解決一件事,圍繞著某一個業務場景,通過平臺的持續完善優化。

          讓所有的功能都能圍繞這個業務展開,其中包括:權限、時間軸、流程、表單、公式等等,能夠解決很多特殊的業務場景。

          而低代碼會涉及到設計思路上的轉變,以及低代碼編輯器的出現,如何去設計如此復雜的配置流程,如何能夠讓用戶能夠快速上手,如果你能夠有比較完整的思路,這些都會成為我們設計的新機會。

           

          行業細分

          隨著互聯網市場的不斷發展,用戶會越來越關注產品在自己行業的應用,比如CRM,其實只是一個籠統的稱呼,現在CRM市場又會分為 SCRM、運營CRM,等諸多產品。

          PaaS類的平臺也出現了 負責從虛擬主機和數據庫層面入手的 iPaaS 以及 從應用和數據層面入手的 aPaaS。

          即使是大家經常使用的 釘釘、企微、飛書,它們也在各自的領域有所擅長。

          圖片

          因為B端產品,在底層邏輯上是不能允許趨同的產品出現,如果你和別人的產品一樣,其實是沒有辦法在目前的市場上立足。

          因此你會發現,雖然產品形式都會比較相同,但是B端市場十分廣闊,大家都在去尋找自己產品的差異化。

          當然市場是瞬息萬變的,這里也只是簡單聊聊我自己的看法,希望對你有所幫助。最近拖更確實比較厲害,準備之后幾天給大家抽些書,可以多留意留意公眾號的文章。

           

          原文鏈接:CE青年(公眾號)

          作者:CE青年

          轉載請注明:學UI網》2022年,B端設計的趨勢有哪些?

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

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

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

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

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



          如何做出高級感的單字母LOGO?

          seo達人


           

          圖片

           

          朋友們晚上好,我又來了!又到了夜深人靜的時刻,都餓了嗎,哈哈哈~給大家看這個圖片的初衷并不是想激起大家的食欲,相信大家都知道上面這個圖形就是餓了么的品牌標志。一個小寫字母e,通過傾斜變化和切割,形成了一個吞噬食物的圖形感,可以說灰常的簡約精致。嗯?到底想干啥,不著急,我們再看幾張圖。 
          圖片 
           
          Timi~啊,多么親切可愛的聲音,我已經好久沒有聽到了,十分懷念,但是這不重要,我們看一下騰訊游戲的 logo,以靈感火花為設計創意出發點,用一個個放射幾何圖形組合成了字母 T,讓這個 logo 擁有了無限可能。
          圖片 
           
          這個標志大家一定不陌生,WPS 的軟件大家每天都在用,可以看到它通過線段的不斷穿插形成了一個造型優美的字母 W,既是一本打開的書和筆又是一個象征職場的衣領。
          圖片 
          你懷念 18 年的那個夏天嗎,有紙短情長,有體面,有帶你去浪漫的土耳其,還有起風了……是的,抖音這幾年的火爆為我們帶來了無數經典的回憶和感動……扯遠了,設計師沒有感情,我們看一下抖音的 logo,故障風的表現形式營造了抖動的立體感字母 D,同時也是結合了音符的造型,兼具了平面圖形簡潔和立體圖形的美感。 
           
           
          圖片 
           
          啊,這不是我們吃飯的家伙么……Adobe 的 logo 大家再熟悉不過了,我們看一下它的結構,將一個極簡的字母 A 融入到了一個正方形里面,彌補了 A 的上部空缺,整體更加大氣穩重。 
           
           
          圖片
          特斯拉近幾年也是頗受年輕人的喜愛,我身邊的很多朋友都入手了,推背感恐怖如斯!看一下它的 logo,由字母 T 變形而來,造型尖銳,且融入了方向盤等創意元素,與特斯拉主營的電動汽車產品相吻合。 
           
           
          圖片
          確認過眼神,是我死去的青春。如今再看到這個 logo,滿腦子只有它的設計創意,沒錯,通過正負形的方式將 Z 字母融入到了星星里面??粗@個負形 Z,有沒有想起你曾經的年少無知和情竇初開?在哭了,在哭了……
          行了,青春也回憶了,生活也復盤了,咱們也就不藏著掖著了,今天我們探討的主題就是讓廣大同學們頭疼難受的單字母 logo!當然了,主要是安利一些它常見的表現手法。 
           
           
          單字母 logo 在表現的過程中還是比較困難的,因為他不像多個字母可以有多種的組合變化,想想看,兩個人生一個孩子還是比較容易的,通過兩者的友好交融或者其他的各種各樣的姿勢都可以完成,但是你一個人想要生一個孩子,那還是十分困難的。所以,如何把一個簡簡單單的字母做出差異化、符號化,同時兼顧識別性,是很多朋友十分困擾的問題。那到底如何做好單字母的 logo?
          我們回過頭來再看一下前面的幾張圖,其實已經給到了一些答案。  
           
           
          圖片
          當然肯定還有其他很多種辦法,這里列舉的六種是我認為最常用最出效果,也最適合初學者上手的方法。當然,這些方法都是可以互相結合使用的。
           
          需要注意的是,識別性永遠是字母標志的首位的條件,我們在設計圖形的時候要首先抓好字母的特征,保證它的識別性,然后再進行設計手法的選擇。
           
          行了,方法給到胃了,注意事項也明確了,下面就可以開吃了……我們用這幾個方法分別品嘗一下,看看究竟味道如何!
            
           

          圖片

          所謂幾何圖形的應用,就是字面的意思,利用幾何圖形的規則性和延展性不斷地進行重復排列和大小對比,這種方式做出來的圖形往往更具精致感和圖形感,我們多看一些案例就可以摸索到其中的規律。 
           
           
          圖片 
           
          OK,其實方法有很多,首先第一個案例我們用一個比較快捷的方法,就是網格繪制大法!先繪制出統一角度的網格,然后用【形狀生成工具】或【實時上色工具】在里面進行繪制,這個方法的好處就是它會幫你統一好角度,角度統一了也就自帶了規則性,我們用這個方法做一下 E 字母。
          圖片 
           
          是不是很方便快捷,又很容易出效果呢,這個角度不一定非得是 60 度,可以根據你的喜好來定,需要注意的是繪制好后不要容易滿足,最好再進行二次創作,這樣才不容易撞車,做出更多有趣的創意,總之,多嘗試一定沒錯。 
           
          圖片
           
           
          接下來我們再玩點兒好玩的,嘗試用一些不規則的圖形來拼接排列成新的字母圖形,話不多說,看一下下面的案例。
          圖片 
           
           
          是不是打開了新世界的大門,這特么竟然是五角星變來的?其實五角星也好,六角形也好,都是借助了他們特有的角度和邊來進行組合,最終我們的目的還是要達到字母的識別性,大家可以用這個方法自己嘗試摸索一下。
          圖片
          小結:我們在進行幾何圖形排列的時候切記,不一定非得是用矩形、圓形這些正正方方的圖形,像三角形、橢圓形、梯形等各種圖形都可以大膽的進行嘗試摸索,最后呈現的結果一定不要太復雜,用最簡單的方式來詮釋。
           
           
           
           

          圖片

           

           

          線條是個好東西??!它們交叉在一起會產生千千萬萬的變化!無論是什么類型的 logo 這個方法都很受用,我們來看一下單字母的線條穿插都有哪些特點。
          圖片 
           
          可以看到大部分的案例也都是基于比較規則的幾何圖形來做出的,都是比較簡潔干凈的呈現,可見想要做出高級感,就不能過于復雜!我們在設計的時候首先注意提取字母的識別性,其他的事情,插就完事!來吧,我們先做一個 X 找找感覺。 
           
          圖片 
          大家注意到雖然我在過程中有用到內部的雙線結構,但是也只是提取了需要的部分,最后并沒有保留過多的內部線條,這樣會干凈耐看很多。
          圖片
          ok,非常耐斯,我們再玩稍微難一點的,上面的 X 是先畫出字母的結構然后進行設計,下面我們試一下先堆積幾何圖形,然后再用線穿插出字母的結構。 
           
          圖片 
           
          怎么樣,是不是相當的神奇!這特么也可以?沒有什么不可以,只要你試的夠多……這個方法雖然不容易做,但是卻能挖掘出線的更多可能性。
          圖片
          小結:無論是先從字母的結構出發,還是從圖形出發來挖掘結構,都建立在規則的圖形和字母識別性之上。 
            
           
           
          圖片 
           
          為什么是立體效果平面化處理呢?因為單純的立體 logo 會偏單調一些,且多數需要添加漸變來呈現,但是很多同學又玩不好,就容易變得很 low,所以這個方法就是在平面圖形的基礎上,做出立體效果的感覺。
          圖片 
           
          看完這些案例,是不是能 get 到一些了呢?不多說了,我們案例走起,這里也是介紹兩種思路。首先第一個思路就是先畫出立體圖形的平面結構圖,然后通過刪減線段和提取結構面的形式來得到字母的識別性,ok,我們先用 H 試一下。 
           
          圖片 
           
          可以看到當我們畫出立體圓柱的時候,中間部分似乎就已經形成了一個 H 的造型,這個時候我們再進行創作的時候,自然就簡單很多,所以根據字母的特點選擇合適的立體造型,也是十分的關鍵。
          圖片 
           
          好的,第一個思路就是這樣,下面我們看一下第二個思路!先畫出平面的圖形,然后在內部尋找立體的可能性!啥意思呢,我們來看一下案例。
          圖片 
           
          明白了吧,先畫出字母的平面圖形,在它的結構內部或者負空間部分進行立體的造型創意,這里是為你打開了一扇創意之門!當然你也可以嘗試其他的造型。
          圖片
          小結:我們可以先畫出立體圖形,然后去提取字母的識別,也可以先畫出字母的平面圖形,再去創造立體圖形,都可以,但是盡量做得簡約一些,巧妙一些,揚立體之長,避立體之短! 
           
           

          圖片

          Buff 這個詞真不是白用的,假如你是一個菜狗,有了 Buff 你就可以在野區各路橫著走。同樣的,無論你做的東西是什么狗屎,加入了外框后,會掩蓋很多味道,也會增添很多味道……當然了,狗屎也分三六九等,你不能做的太辣眼了,不然啥 Buff 也拯救不了你…… 
           
          圖片  
           
           
          這里我們接著介紹兩種利用外框 Buff 來設計的思路。首先第一個就是先畫好字母的造型,然后加入外框并與之進行呼應連接,我們來看一下設計過程。
          圖片 
           
           
          這個方法也是各類 logo 設計中都比較常用的,如果你的圖形不夠穩定,又或者比較單一,可以試試加入一個外框,需要注意的是我們最好讓圖形與外框能有所呼應,這樣往往才會更加的舒適耐看。
          圖片 
           
           
          ok,接著介紹第二個方法,就是先畫出外框,然后在里面進行圖形的繪制!我們看一下下面案例。
          圖片
          這個方法的優勢就在于我們先給到了外框,相當于這個字母是含著金鑰匙誕生的,天生自帶穩定性,這誰受得了!當然這個方法也最好要與外框進行呼應一下,比如該拉圓角的部分和適當突破出來的部分,所以這個方法告訴我們,就算你是個富二代,自己不努力,也只能是個有錢的廢物?。ㄠ??好像大家都挺愿意做個有錢的廢物的…)
          圖片
          小結:做 logo 就和品人生一樣,如果你出身普通,那就通過自己的努力給自己的人生套上 Buff!如果你生來優秀,也請猥瑣發育,好好利用自己的資源。成功沒有好辦法,努力是唯一的捷徑!
           
           
           
           

          圖片

          什么叫結構的變形替換呢,通俗一些講,就是把羊頭換成狗頭,把豬尾巴換成龍尾巴…這么講好像有些暴力,其實就是利用字母的正形部分,結合行業屬性進行創意結合。
          圖片 
           
          這個方法非常好用,但也容易用得過度,很多同學在做的時候容易做的復雜,比如結合一條龍,你把龍須龍爪龍鱗統統都畫出來了,那不扯淡么,我們只需要提取結合的物體的基本造型即可,龍就是龍頭,鯨魚就是尾巴。
          我們在設計之前最好先把一個大體的思路和想法畫出草圖,然后再進行上機操作。第一個案例我們做一個 Z 字母結合鳳凰的創意,看一下設計過程。 
           
          圖片 
           
          這個構成方式主要就是拼你的結構!想要做的精致一些,線條必須流暢,注意看頭部與 Z 字母結合的部分,都要處理的非常絲滑~當然如果你覺得造型還是有點死板,也可以加入漸變,讓整體更生動靈活。
          圖片
          那有的同學可能會講,我草圖畫不好,或者說字母畫的非常的丑,結合啥也不好看,那咋辦呢,這里再給大家講一個比較快捷的思路,就是用字庫的結構進行二次創作!
          尤其是一些手寫字庫,它往往具有更多變靈活的結構,相信大家的電腦里一定裝了很多亂七八糟千奇百怪的字庫,平時不用,這個時候就可以用起來了!
          圖片 
           
          怎么樣,有的時候并不一定只能融入一個元素,在不影響識別性的前提下,利用每一處的結構,都能產生不同的感覺,當然了,你不能瞎結合,都需要和行業相關才行!
          圖片
          小結:我們在進行創意結合的時候,首先要進行大量的思維擴散,畢竟創意不是憑空出來的,然后要簡化創意元素,和字母的整體調性搭配起來,才能做出更整體精致的圖形!
           
           
           
           

          圖片

          正負形就不用過多介紹了吧,是最出效果也是最好玩的一個創意表達方式,因為基本上每個字母都有屬于自己的負空間,而這些負空間,就是你達到創意高 c 的入口…… 
           
          圖片 
           
           
          其實找到負形并創意結合并不難,難得是如何做的高級,所以又回到了我們前面的一些方法,幾何化、規則化,都是不錯的選擇,ok,我們用 Q 字母來嘗試結合一下小魚的造型。
          圖片 
           
          這個方法就是在幾何圖形的基礎上進行字母的結構識別和創意設計,但也是比較難的,因為有時候不一定你就能搞出來你想要的那個創意,這個時候就不要強行進入了,適當放棄,柳暗花明又一村,換個創意,又是一條好漢。
          圖片 
           
          那還有一種方法就是先畫出字母的結構,然后利用負形部分就行結合,我們試一下 F。
          圖片 
           
          這個方法就相對簡單一些,但也盡量將字母做得秩序規整,整體才不會太亂。另外上面這兩種方法最后都加入了一個眼睛,也就是點睛之筆,這樣會更生動傳神,畢竟畫魚點睛和畫鳥點睛都是歷史上著名的經典橋段。
          圖片 
           
          小結:每個字母合適的負空間都基本上是固定的,做的多了就找到規律了!
           
          看完這么多案例,有沒有勾起你的創作欲望,覺得我又行了呢?其實單字母 logo 的應用范圍還是很廣泛的,市面上很多品牌尤其大型企業往往都喜歡這類的設計形式,因為它會讓受眾群體很容易的對品牌名稱進行聯想,形成品牌符號的記憶性。
          比如麥當勞的 M、李寧的 L、餓了么的 e,甚至是超人的 S,當你腦子里現有它們的名字時,再看到圖形就會不自覺地對它們進行連接,形成品牌記憶。
          好了,出了這么多個案例,我累了,你也累了,希望下次再遇到單字母困境的時候,可以想起今晚我們一起度過的種種片刻,最后國際慣例,合個影,我們結束。 
          圖片 
           

           
          作者:告白天
           
          轉載請注明:學UI網》如何做出高級感的單字母LOGO?


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

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

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

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

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



          Behance首頁推薦的作品集為什么這么高級?我們能從中學到什么?

          seo達人


          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          一次作品展示,想要視覺效果更高級,需要通過各種細節綜合打磨。那么在今天推薦的這份作品中,我認為打磨比較好的細節以及我們可以從學習的主要有以下幾點:

          1. 高級投影
          2. 投影的延展運用
          3. 留白藝術
          4. 合適的展示角度
          5. 強設計感配圖

          在我近期幫星友看的作品集中,發現很多人的作品本來還不錯的,結果被糟糕的展示給減分了,很是可惜。我給不少人提的建議之一是先提升自己的審美,但他們遇到的問題是不知道看啥,判斷不了哪些才是好的作品,以及怎么用到自己作品中去。這些問題不知你是否也有遇到?如果有同樣的困擾,今天的文章一定要看完了,因為全是干貨。

          所以我在星球中利用審美打卡,每天幫大家搜集一些比較好的展示方式作為參考,同時提升審美,一舉兩得。這組Behance高級作品就是在打卡中給大家做的分享。接下來,我將逐個分析這幾個細節部分,方便用到咱們自己的作品集中。

           

          1、高級投影  

          投影的本質就是給畫面打造空間感,并突出界面內容,對于這一點我后面也會做一些延展,可能會有一些觀點你沒聽過的。在看作品集的過程中我有發現很多人不注意投影的運用,但它其實是非常重要的作品加分手段。

           

          1)投影要干凈輕盈

          投影在取色的時候,可以選擇與背景顏色相近的顏色,然后略微加深一些,不要用純黑色來做投影,會顯臟。投影的顏色永遠都需要結合環境的顏色,就想象成界面中有一個太陽光打過來,會反射周圍的環境色,所以帶有環境色的投影會顯得更自然。

          比如下面這個界面展示就是把背景色和投影顏色調整為品牌橙色的色相,只是把飽和度降低到了很淺的程度,看起來就很舒服。

          圖片

          再比如我之前做的一個banner,右邊的卡片堆疊的效果,疊起來的投影層就是用到了藍色的投影,看起來就會顯得非常干凈。

          圖片

          圖片

          另外,要注意投影的距離不要太小顯得不自然,顏色太深會顯臟。

          圖片

           

          2)投影要針對特定的顏色進行微調

          使用不同的投影透明度取決于產生投影物體的顏色。對于較暗的物體,投影需要做得更強,而對于較亮的物體,投影應該是更淺一些。

          如果不注意這一點的話,假設兩個投影都具有相同的不透明度,那么較亮物體的投影會在較暗物體的投影旁邊看起來更暗。

          比如下面的按鈕投影透明度,投影透明度都是50%透明度時,白色按鈕看起來會比藍色的更深,可能要降低到30%左右才顯得比較一致。

          圖片

          3)投影要符合現實規律

          高級投影應該要結合現實規律,做到近實遠虛。

          圖片

          上面這張圖的投影就是有些問題的,更遠的投影反而顯得更深,其實應該要改的更淺一些才好。

          做到這一點有2個小技巧:

          • 1)如果在PS中設置投影的話,可以通過調整PS的投影等高線。

          圖片

          如果是在sketch和figma中做投影的話,也可以疊加多層投影來做,大家可以嘗試下。

          • 2)在做展示的時候,彌散的范圍建議在6倍左右會比較舒服,當然這個也更要根據你選的投影顏色和透明度綜合來調整。

          圖片

           

          2、投影延展  

          前面提到,投影在做展示的時候,其作用就是打造空間感,圍繞這一點我們也可以做些延展。

           

          1)增加簡單圖形

          在作品下面增加簡單圖形,既不干擾作品,又能通過穿插增加空間感。

          圖片

           

          2)增加插畫元素

          用一些品牌插畫,元素,甚至圖標給作品增加穿插,增加空間感。

          圖片

           

          3)增加3D元素

          給作品增加簡單3D元素,比如球、三角之類的元素。

          圖片

          來自Behance,審美打卡

           

          圖片

          我曾經做的界面包裝

           

          4)改變材質

          把界面做成毛玻璃效果,再做穿插,進一步增強空間感

          圖片

          圖片

          來自behance,星球審美打卡

           

          5)深色界面

          有人問,如果界面本身就是深色的怎么辦?其實也是基于空間感的原理,給畫面增加一些元素,與背景拉開關系就好。比如下面這樣

          圖片

          來自behance,星球審美打卡

           

          圖片

          來自dribbble,星球審美打卡

           

          圖片

          來自dribbble,星球審美打卡

           

          3、大量留白  

          想要提升作品的逼格,使用大量的留白是非常好的技巧。但在給星友溝通作品集的時候,得到一個奇怪的說法,說是要把作品限定在多少頁以內才更好。

          我覺得這有的本末倒置了,作品要多放精華內容沒錯,但不是以頁數來體現的,展示的時候還是以提升逼格為主,不要影響作品本身的視覺效果。每一頁PPT,重點展示一件作品就足夠了,物以稀為貴,像一些大牌奢侈品就特別喜歡大留白。

          圖片

          Apple手機官網截圖

           

          圖片

          香奈兒官網截圖

           

          舉一個反例,下面是某位星友的作品,其實這樣的網頁展示,一個頁面單獨整理在一頁是最好的。當然前提是每一頁的設計差別較大,如果太類似的話,放一頁就夠了。如果網頁比較長的話,可以按分屏來展示。

          圖片

          星友作品截圖

           

          就像開頭的作品那樣調整下,逼格立馬就能上來。

          圖片

           

          4、展示角度  

          作品在做展示的時候,不論是自己設計還是用樣機,有一個標準就是一定不能讓人看不清細節,不能做了角度變化之后丟失細節。

          像開頭的作品展示,都是用了一些相對沒那么夸張的角度,這樣做的一個好處是能看到細節,即使是想帶一些角度,增強設計感的話,也一定要以能看到細節為標準。比如像下面這樣就可以了。

          圖片

          我也給大家舉一些反例,比如像下面這位同學的展示角度就比較奇怪,其實像這種內容較多的界面,擺正就可以了,不然細節全都看不清。

          圖片

          星友作品截圖

           

          5、高質量配圖  

          一個作品中的配圖其實非常關鍵,甚至配圖能直接把你糟糕的設計拯救過來。但遺憾的時候,很多人在展示的過程中不大重視自己的配圖,我在跟星友交流過程中會發現大家對于配圖存在一個誤區,就是覺得配圖一定要是真實的,有些人甚至覺得作品里呈現的一定是要去線上截圖。

          我想說,如果這樣做會把你坑得很慘。原因有以下2點:

          1. 線上的圖存在非常多不可控因素,所帶來的視覺效果不一定代表你真實的視覺設計能力
          2. 審美是設計師的核心能力,如果你放一堆審美不在線的圖,那別人有理由懷疑你的審美是有問題的。

          既然配圖這種重要,那怎么做好配圖這個事呢?有幾個小技巧:

           

          1)符合調性

          配圖要符合產品的調性,像開頭的作品中,黑白干凈是它的關鍵調性,那么選的圖也是這個范的。

          圖片

           

          2)真實可信

          盡量讓配圖看起來真實,別偷懶用重復的圖,包括圖中用到的數據也盡量真實。像下面這位星友的作品展示就有內容重復的問題,稍微花點時間就可以優化好了。

          圖片

          星友作品截圖

           

          3)加強設計感

          在放界面展示圖的時候,界面中放的圖盡量多一些設計感,體現你的審美。

          圖片

          關于高質量配圖我之前也有專門寫文章《如何選到設計感強的配圖,我總結了這7個實用方法》,文章中也分享了很多我自己收藏的高質量配圖,大家有需要的也可以去閱讀下載。

           

          總結  

          最后總結下,今天主要是從作品展示的角度,給大家介紹了如何利用好投影、投影原理延展、留白、角度、配圖等方面給自己的作品展示加分。

          這些技巧操作起來很簡單,但又非常有效,具備很強的實用性。彩云希望大家把這些常用技巧真正用到自己的作品集中去,提升逼格,找到自己理想的工作!

           

          原文地址:彩云譯設計(公眾號)

          作者:彩云Sky

          轉載請注明:學UI網》Behance首頁推薦的作品集為什么這么高級?我們能從中學到什么?

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

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

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

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

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



          12種超級好用的-免費漸變神器

          seo達人

          01  Cool Backgrounds

          網站鏈接:https://coolbackgrounds.io/

          網站介紹:Cool Background 是由5個開源生成器整理組成的彩色漸變圖像集合在一起的工具集,內置5種不同的背景風格,每一種風格還提供了簡單的參數配置。非常的炫酷美觀。

          低模三角形

          粒子

          CSS漸變

          階梯漸變

          圖片

          使用方式:左側選擇不規則形狀、圖形、漸變背景、圖片等,右側可以選擇不同的色彩組合,選擇適合自己的色彩風格后,點擊下載即可。

           

           

          02 180種漸變背景

          網站鏈接:https://www.fengtupic.com/colortool

          網站介紹:內含180種漸變配色方案,特別好看美觀,適合各種場景模式下的背景使用。

          使用方式:選擇適合自己場景的漸變色,可拷貝css格式,也可下載png格式。

           

           

          03 Pigment

          網站鏈接:https://pigment.shapefactory.co/

          網站介紹:可通過改變飽和度、色溫和色系改變配色方案,還可通過查看場景效果觀察此配色方案呈現效果。

          網站截圖

          飽和度  亮度 顏色

          選中和更多

          使用方式:左側可以選擇不同的飽和度和亮度,選擇其他色調,右側放大可查看場景配色效果。

           

           

          04 ColorSpace

          網站鏈接:https://mycolor.space/

          網站介紹:Color Space 是一款非常實用的漸變生成器,我們只需要選擇一個顏色,就可以快速生成20-30種不同風格的配色方案。同時還提供了梯度和三色漸變選項,可以快速生成配色并查看 CSS 代碼。

          網站截圖

          輸入顏色代碼或選擇顏色

          生成方案

          更多與修改

          CSS代碼模式

          三色漸變

          使用方式:上面輸入色值,自動出來漸變方案,還可左右滑動選擇適合自己的搭配方案

           

           

          05 Adobe Color

          網站鏈接:https://color.adobe.com/zh/create/color-wheel

          網站介紹:可自由選擇色環上不同的顏色值,依照類比、單色、三原色、補色等不同搭配模式進行搭配,下面展示一系列色值。同時可將看到的好的圖片色紙上傳上來,自動配比色值,同時,還能查看背景色與文字的對比度檢測,非常適合網站多色搭配。

          色輪

          輔助工具

          使用方式:滑動多tab滑塊,選擇色環顏色做不同類型搭配;利用協助工具查看文字與背景的對比檢測。

           

           

          06 BrandColors

          網站鏈接:https://brandcolors.net/

          網站介紹:這個網站是基于最大的官方品牌顏色做整理,包含了眾多品牌顏色官網的配色方案,可作為網站或者品牌配色的借鑒。

          顏色方案

          選中后復制下載

          使用方式:選擇好相關品牌的色彩調性,可查看色值,可復制色值,也可以下載相關色值,超級方便。

           

           

          07 Color Leap

          網站鏈接:https://colorleap.app/home

          網站介紹:一鍵生成復古風圖片色調分離,可以選擇年代搜索過去180種配色方案。

          年份選擇

          年份列表

          代表圖片和查看顏色

          查看顏色和查看圖片

          使用方式:選擇年代,選擇圖片風格的配色方案,查看顏色,復制相關色調即可。

           

           

          08 ColorBox

          網站鏈接:https://www.colorbox.io/

          網站介紹:ColorBox 是選擇一個顏色,會生成一個顏色系列的顏色工具??梢詭椭覀冚p松地創建非常炫酷的色彩集,配色頁面還有大量的個性化選項,滿足我們的任何需求。

          網站截圖

          飽和

          使用方式:左側可以添加不同的顏色分類值,右側調整搭配的顏色系列和同色系和補色系不同選擇,曲線直觀展示出色調和飽和度的變化幅度。

           

           

          09 Eggradients

          網站鏈接:https://www.eggradients.com/

          網站介紹:Eggradients 是一款收錄了最新設計趨勢漸變色彩的配色網站,以雞蛋的形式展現,支持一鍵復制。

          預選顏色

          漸變調色板

          使用方式:選擇適合自己設計場景的配色方案,復制即可。

           

           

          10 CoolHue 2.0

          網站鏈接:https://webkul.github.io/coolhue/sketch-plugin/

          網站介紹:CoolHue 2.0是一款免費的 Sketch 漸變配色插件和收集工具。

          使用方式:在sketch下載插件,直接點擊插件,選擇相關配色。

           

           

          11 Free Mesh Gradient Collection

          網站鏈接:https://www.ls.graphics/meshgradients

          網站介紹:包含100多個免費的漸變色合集,支持 Sketch、PNG、AI、JPG、EPS 等多種格式下載。

          網站截圖

          翻譯截圖

          漸變截圖

          使用方式:可選擇ai、eps、jpg、png格式,選擇好看的漸變色下載即可。

           

           

          12 Grabient

          網站鏈接:https://www.grabient.com/

          網站介紹:Grabient 一個非常漂亮且實用的漸變網站,支持 CSS 樣式代碼復制、360度漸變旋轉、自由增加或刪除漸變顏色等功能。

          網站截圖

          調整角度

          調整顏色

          漸變比例

          使用方式:選擇適合自己風格的配色方案,點開調整漸變梯度,下載即可。

           

          最后感謝大家的欣賞和學UI網干貨小組和學UI網解答團的辛苦整理;

          后續仍然會給大家持續帶來 #學UI網干貨分享(其中包括在線配色網站、在線工具、插件等)

          謝謝大家的持續關注!~

           

          轉載請注明:學UI網》12種超級好用的-免費漸變神器

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

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

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

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

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



          交互設計:如何做到品質?

          seo達人

          01 怎樣算是品質?

          首先,探討這個問題,意義何在?

          筆者認為,有兩點意義。

          首先,作為用戶,我們可以用到好用的產品;其次,作為從業者,我們可以找到學習的榜樣。

          明確了意義,我們再回到問題本身:怎樣算是品質?如何判斷?

          個人認為,和周到一樣,是否擁有高品質,也是用戶的主觀感受說了算。

          在涉及體驗細節的小需求上,避免所有的不周到,就是周到。

          這是關于周到與否的判斷,相對比較容易。但是關于品質與否的判斷,筆者沒有找到這么簡單的判斷邏輯。所以我們嘗試換一種方法。

          豆瓣的高分電影,比如《千與千尋》、《美麗人生》和《肖申克的救贖》,它們肯定存在不同之處,但同時也有一些共同特點(主人公都面臨極大困境,但都心懷希望和目標,通過各種努力走出了困境)。

          高分電影如此,高品質的交互設計,也是如此。

          這一大段,就嘗試去探索這些共同的特點,以便去發現、或者去驗證,那些在交互設計方面擁有高品質的產品。

          1 看著簡單

          之前在《以不變應萬變:淺析信息架構》這篇中提過,只有簡單,才能讓用戶馬上找到掌控感、進而感覺良好。

          高品質的交互設計,一定是要讓用戶感覺良好的,所以看起來一定是簡單的。

           

          2 用著順

          個人觀點,互聯網產品有兩類較為特殊的初級用戶,一類是零經驗的三歲小孩,一類是智能手機之前沒怎么接觸過互聯網的老人。

          一般情況下,大家習慣把用戶分成三類:初級用戶、中級用戶和高級用戶。其中初級用戶的使用經驗最少。

          高品質的交互設計,會讓初級用戶很容易上手。稍加練習之后,初級用戶也會像中高級用戶一樣,用起來很順。

          iPhone 的交互設計是很優秀的,所以三歲小孩也能很快上手操作。

          小孩的心智比較純粹,沒有受到社會大染缸的污染。用手機時他們會根據自己有限的生活經驗去積極嘗試操作。

          老人和小孩則有點相反,部分老人可能思維比較固化,好奇心、積極性等方面都不如小孩,所以老人在用手機時可能會有點畏手畏腳。

          微信作為一款交互設計十分優秀的產品,如今擁有智能手機的老人基本都在用。有的可能是自己學會的,有的可能是子女教會的。整體而言,筆者觀察周圍的老人,用微信用的還比較順暢。

           

          02 交互設計:如何做到品質?

          個人覺得,交互設計的高品質,是感性、理性和實踐的完美融合。

          曾經有人問巴菲特的合伙人查理·芒格,如果只能用一個詞兒來形容你的成功,會是什么?芒格回答說,是“理性”。

          老子曾經說過:“人生于世,有情有智。有情,故人倫諧和而相溫相暖;有智,故明理通達而理事不亂。情者,智之附也;智者,情之主也。以情統智,則人昏庸而事顛倒;以智統情,則人聰慧而事合度”。

          簡·奧斯汀的小說《理智與情感》,雖然寫的是小鎮的戀愛與瑣事,但背后折射出來的洞見——“要有真情感,更要用理智控制情感”,與老子的觀點也是不謀而合。

          做人做事,需要理性和感性。做交互設計,也是如此。

          芒格、老子和簡·奧斯汀,在強調做事業和做人方面,都是理性在先、感性在后。

          做交互設計,就是在做用戶體驗,核心是用戶的主觀感受。所以筆者認為,此時是感性在先、理性在后。

          交互設計里的感性,有兩層意思。

          第一層是微觀層面,主要是性格上的敏銳度,比如我們平常聽到的性格敏感、心思細膩等;第二層是宏觀層面,也就是品位

          量變引起質變。微觀上積累的多,才會帶來品位的提升。

          交互設計里的理性,其標志是做出正確的決策。

          那怎樣判斷決策是否正確?

          個人觀點,有兩塊“試金石”可擔此重任。

          第一塊“試金石”是來自最優競品的檢驗,第二塊“試金石”是自我檢驗。

          最優競品是一塊很好的“試金石”。如果能和最優競品一決高下或者“三足鼎立”,說明品質很不錯;如果和最優競品差距太大,則說明沒有達到高品質。

          然而現狀則是,市面上的最優競品,也就是交互設計方面達到高品質的產品,為數不多。這就意味著很多領域的產品是不存在最優競品的,此其一。

          其二,與其被動的等待最優競品的檢驗,不如主動成為最優競品。要做到這一點,則需要第二塊“試金石”,也即優秀的自我檢驗能力。這個優秀的自我檢驗能力,其實也基本等同于做出高品質交互設計的能力。

          實踐就是一個反復試錯、反復打磨、反復驗證感性和理性的過程。

          1 培養語感

          大家都學過英語,所以應該也都聽說過“語感”這個詞兒。

          英語語感好的人,會有這個優勢:較少依賴語法,同時較少犯語法錯誤。

          就像游泳一樣,熟練了以后,身體已經對動作形成很深記憶,完成動作就幾乎不依賴大腦思考,同時也不會犯錯。

          在語文里,“語感”被提起的次數就少了很多。大家每天都在用中文,甚至每天都在聽說讀寫。對中文都很熟練,好像大家的語感都差不多。

          但實際上,和英語一樣,語文方面的語感,也存在一定差距。看看百度百科對“語感”的解釋就知道了。

          語感,是比較直接、迅速地感悟語言文字的能力,是語文水平的重要組成部分。它是對語言文字分析、理解、體會、吸收全過程的高度濃縮。語感是一種經驗色彩很濃的能力,其中牽涉到學習經驗、生活經驗、心理經驗、情感經驗,包含著理解能力、判斷能力、聯想能力等諸多因素。

          這個解釋包含了四個經驗、三個能力。每個經驗、每個能力的獲得都需要一定量的練習。不同的人,底子不同,練習的量存在不同,所以語文方面的語感必然存在不同。

          像語感里提到的心理經驗、情感經驗,在不同的語言里是相通的,且和交互設計里的主觀感受存在相通之處。所以,在筆者看來,一定程度上,作為母語的語文,其語感是英語語感的基礎,也是交互設計語感的基礎。

          啥是交互設計的語感?

          和語文的語感類似,交互設計的語感,就是比較直接、迅速地感知交互設計優劣的能力,是交互設計水平的重要組成部分。

          這個語感,和喬布斯口中“科技和人文的十字路口”中的“人文”,以及媒體和從業人員口中的“人文素養”,也有相通和相似之處。

          蘋果的設備之所以在交互設計方面擁有高品質,和喬布斯早年深受嬉皮士文化、民謠和搖滾歌手 Bob Dylan、禪文化、日式美學、字體設計等人文藝術方面的熏陶密切相關。

          上世紀 90 年代,張小龍在開發 Foxmail 時,想必作為程序員的他并沒有太多交互設計方面的經驗,彼時這方面的理論和著作也少,張小龍更多是憑感覺在做。但是 Foxmail 就做到了交互設計方面的高品質并且產品廣受歡迎,想必張小龍的語感也是極佳。而據網絡資料顯示,張小龍本人喜歡閱讀、電影和 Michael Jackson 的音樂,也有比較深厚的人文素養。

          所以,在筆者看來,交互設計語感的內核,或者廣義的交互設計語感,就是語文的語感,或者更進一步,是人文和藝術的語感。

          狹義的交互設計語感,則是直接、迅速感知交互設計優劣的能力。

          冰凍三尺,非一日之寒。一個廣義語感,一個狹義語感,加起來基本等同于先天基因和人生經驗之和。

          聽起來有點定型的感覺。那這倆語感,還能培養嗎?當然可以。咋培養?

          個人觀點,廣義的語感和狹義的語感需要同時培養。廣義的語感是內核。正所謂水漲船高,這個內核越好,狹義的語感也會越好。

           

          先說廣義的語感,即人文和藝術方面的素養。個人認為,主要受性格和練習影響。性格則主要受遺傳基因和童年經歷影響。

          天生內向的人,通常內心會更加細膩。這種細膩,對于日后建立豐富的精神世界和情感世界,是一種優勢。

          所謂禍兮,福之所依。有些人的優勢,則是建立在童年不愉快的經歷上。

           

          比如美劇《千謊百計》里測謊公司的莉亞,童年時期暴力的父親經常毆打她,使她學會了迅速判斷別人的心情。莉亞沒有受過任何專業訓練,但是童年不幸的遭遇使她在識別微表情方面異常敏銳,最終被萊特曼博士力邀加入了團隊。

          性格有優勢的話,自然是加分項。沒有優勢的話,也可以通過后天的練習來彌補。

          這個后天的練習,在筆者看來,非常重要的一點,是來自書影音的熏陶。

          簡單說說書影音。

          首先,一定要看一些文學性強的作品,感受“思無邪”之美。因為這些是人類內心深處共同的精神家園。個人的理解,文學性強,是指滿含人間煙火味、但無半點名利心的作品,比如《詩經》、《草房子》、《城南舊事》等。

          其次,一定要看一些思想性強的作品,感受大道的至簡之美。因為這些對于理性、對于探索事物的本質非常有益。具體的作品,可以參考《道德經》、《巴菲特致股東的信》等。

          最后,影視劇要多看,書更要多讀。原因如下。

           

          影視作品在刺激我們視覺和聽覺的同時,留給我們思考和想象的空間,通常都沒有文字留給我們的多,此其一;

          其二,影視作品里的語言基本以對話為主,而小說等書籍中除了對話,還有很多關于環境、人物、心理、情感以及哲理等的描寫。

          基于這兩點,雖然有些人可能天生就是視覺動物,但閱讀始終是無法替代的,在培養語感方面也發揮著更為重要和基礎的作用。

          整體而言,如果目標是高品質的交互設計,在書影音的選擇上面,筆者就建議大家去選一些經典的作品。具體而言,豆瓣評分和豆瓣 Top 250 榜單會是不錯的參考。

          再說下狹義的語感,即對交互設計的感知能力。

          這個完全是后天訓練出來的。如果這方面的語感不夠好,則進步空間很大。主要方式就是多用交互設計方面高品質的產品。

          舉個例子,可能我們很多人用的第一臺電腦都是 Windows 系統,后來一部分人改用了 Mac。Mac 用久了,就再也用不慣 Windows。這就是語感提高的典型例子。

          我們常用的一些產品,比如微信、iOS、快手等,在交互設計方面都擁有很高的品質。

          這些日常使用的產品,客觀上也在潛移默化的提升我們的語感。最終的結果,也會對整個行業的交互設計提出更高的要求。

          這里筆者再向大家推薦一個涉及網頁端和后臺管理、編輯的產品,交互設計方面很優秀,那就是博客搭建平臺 SquareSpace。筆者自己的工作室網站 SnowDesign.Me 就是基于這個平臺搭建的。

           

          2 理性思考

          交互設計要做到高品質,就要求從信息架構到交互設計,大大小小的無數細節,其決策幾乎全部是正確的。這是一個很高的要求,背后必須要有理性思考的支撐。

          現實情況是,很多團隊做不到這一點。

          然而,交互設計,從構思、到設計、到優化、到討論、到修改,每一個環節我們都有理性思考,那又為什么做不到高品質?

          在筆者看來,這些理性思考還存在進步空間。只有優秀的理性思考,才能設計出優秀的交互設計。

          個人觀點,優秀的理性思考,通常是一種獨立思考,主要有 3 個維度,分別是:邏輯、全面、權重。

          以微信為例,如果換個團隊,有可能會把朋友圈作為一級 tab 單獨拿出來。因為大家使用朋友圈的頻率很高,這樣少點一下會更方便。這在邏輯上完全沒問題。

          但微信團隊的考慮,個人推測,至少有這 3 點:

          1. 微信堅持只有 4 個 tab;

          2. 朋友圈是個插件功能,可拆卸,作為一級 tab 不合適;

          3. 少點一下,更方便。

          這里面權重最高的是第 1 條,權重最低的是第 3 條。綜合來看,微信是不會把朋友圈單獨作為一級 tab 的。

           

          這個例子很有意思,筆者覺著它在一定程度上反映了我們很多人存在的不足。

          我們很多從業者,在進行理性思考的時候,邏輯方面基本沒問題。但是在全面和權重這兩點上,可能會做的不到位。這就導致我們無法做出正確的決策。這樣的細節一多,必然導致我們無法做出高品質的交互設計。

          所以,要想在理性思考方面達到優秀,就需要同時做到這三點:邏輯準確、考慮全面、權重正確。這還只是一個細節的決策,所有細節的決策,都要如此。加起來會是一個龐大的工程。

           

          這里再順便強調一下“全面”。

          這個全面,一定要去抓、并抓到事物的本質和核心。

          所謂大道至簡,本質一般都不復雜。一個可供參考的數字是,本質通常只有 1-2 個點,影響本質的因素通常有 4 個左右的點。再具體的,可以參考一篇舊文:《找到本質需求:聊聊內容分類》。

           

          還有一個影響因素,就是社會壓力。

          很多時候,我們不愿去獨立思考,而是直接參考別人的設計。一來省事兒,二來也容易找到歸屬感和安全感。而獨立思考,可能會把我們帶入到一種驀然回首“空無一人”的“孤獨”狀態。

          但是樸素的辯證法告訴過我們,凡事都有兩面。選擇了白天,就會失去黑夜。所以,關于社會壓力的問題,本質上可能是一個選擇題,同時也包含了每個人對孤獨、安全感等話題的理解和接納程度,此處就不深入討論了。

           

          3 反復實踐

          先說理性思考這塊兒。

          因為互聯網產品總是會更新,所以不管是新人還是老人,只要目標是高品質的交互設計,總會碰到很多未知的或超越經驗范疇的問題。

          面對新問題,很少有人能在第一版的初步想法上就做出正確的決策,也就是做到邏輯、全面和權重的完美無誤。人類大腦中的想法,通常都是先有后優。選定一個方案通常都需要有多個方案的比較和權衡,優化選中的方案也包含了無數細節的調優。

          Foxmail、QQ 郵箱和微信的交互設計都很優秀,為張小龍提供了大量成功經驗。即便如此,微信上新功能的時候,張小龍也還要通過反復試用不同的版本來找到那個正確的版本,更別說我們這些沒有多少成功經驗的普通大眾了。

          不管是選定方案的大決策,還是細節調優的小決策,要想變成正確的決策,都需要大量的實踐。這個實踐既包含理性思考的支撐,也包含了感性語感的檢驗。

           

          因為語感就類似品位,也會影響到交互設計的品質。

          如前所述,交互設計的語感,既包含人文藝術這個廣義的語感,也包含感知交互設計這個狹義的語感。

          培養廣義的語感,需要經年累月的實踐,少則一二十年,多則一生的時間。如果想要一直保持那個狀態,就需要一直實踐。重點在于優秀文化的熏陶以及自己的吸收,還有自己不斷的觀察與思考。

           

          培養狹義的語感,也需要大量的實踐。重點就是日常多用交互設計優秀的產品。

          類似游泳需要讓身體而非大腦記住動作,我們需要讓控制感性而非理性的那部分大腦,記住并習慣于用過的所有優秀產品。

          如果廣義語感和狹義語感都很棒,當體驗到品質不高的交互設計時,很有可能,馬上就會產生不太舒服的感覺;而當體驗到高品質的交互設計時,極有可能,也會很快產生諸如開心、滿足之類的積極情緒。

           

          結語

          交互設計,如果看著簡單、用著順,則基本為高品質。

          一邊培養人文藝術方面的廣義語感,一邊培養感知交互設計方面的狹義語感;

          理性思考要在邏輯、全面和權重這三方面都做到盡善盡美,全面這塊一定要抓到事物的本質和核心;

          第一版方案做不到高品質是正常和普遍的,做出錯誤的決策也是難免的,最重要的是在培養語感和理性思考方面反復實踐,直到打磨出高品質的交互設計為止。

          以上三點,可以幫助我們做出高品質的交互設計。

          最后,借喬布斯的一句話來結束本文。

          你要熟悉人類在各領域的優秀成果,嘗試將之融入你在做的事情里。

           

          原文地址:SnowDesignStudio(公眾號)

          作者:Leeo

          轉載請注明:學UI網》交互設計:如何做到品質?

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

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

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

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

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



          UI設計、交互設計、UI交互設計的聯系和區別是什么?

          seo達人


          三者關系圖:

          Image title

          從上圖來看,似乎UI交互設計還真是UI設計和交互設計的結合。不過具體區別如何,還是讓我們來看看三者的對比吧!

           

          1. UI交互設計vs UI設計vs交互設計對比之概念

          Image title

           

          UI設計

          UI設計或稱界面設計(英文UserInterface Design, 縮寫為UID),它是指對軟件的人機交互、操作邏輯、界面美觀的整體設計。UI設計主要分為實體UI和虛擬UI兩種,互聯網行業常見的UI設計是虛擬UI,UI即User Interface(用戶界面)的簡稱。

           

          交互設計

          交互設計(英文Interaction Design, 縮寫IXD),它主要指的是兩個或多個個體之間交流和互動方式的設計,以達成某種設計產品的目的。交互設計的目標一般從“可用性”和”用戶體驗“兩個層面出發,以幫助解決用戶需求。

           

          UI交互設計

          其實小編從多方查找資料發現,UI交互設計這個術語是非常模糊的。在小編不斷對比整理下,終于得出了它的基本概念。從廣義上來說,UI設計是可以包含交互設計的,在這樣的情況下。簡單來說,把交互設計的理念體現在UI界面上,就是UI交互設計。

          從設計重心方面來看,UI設計的重心是色彩和視覺,以界面美觀設計為主,主要考慮產品看起來怎么樣。而交互設計則是以用戶為中心進行人機互動部分的設計,主要考慮產品用起來怎么樣。而UI交互設計則需要兼顧UI與交互兩個方面進行設計,將交互的理念體現在UI界面上。

           

          2. UI交互設計vs UI設計vs交互設計對比之工作人群

          Image title

          UI設計相關人群:

          UI設計師,界面設計師,網頁設計師。

           

          交互設計相關人群:

          UX設計師,交互設計師,UE設計師,產品經理,網頁設計師,產品經理。

           

          UI交互設計相關人群:

          UI設計師,界面設計師,交互設計師,網頁設計師,UX設計師,產品經理。

          從相關的工作人群來看,不同的設計工作類型,涉及的人群也盡不相同。UI設計的相關人群主要是工作中包涵該部分的人,除了專業的UI設計師,界面設計師,網頁設計師等也是它的工作人群。而交互設計涉及的人群更廣,交互設計師、UX設計師自然不在話下。另外,需要表達設計想法的產品經理運營人員也是其中一員。最后,UI交互設計所涉及的范圍比兩者稍廣,包含了UI設計人群和大部分交互設計人群。

           

          3. UI交互設計vs UI設計vs交互設計對比之例子

          UI設計案例:

          Image title

          如上圖所示,UI設計主要在于通過對用戶界面的色彩,布局,文字排版等方面進行設計,以保證整體界面的美觀。

           

          UI交互設計案例:

          Image title

          小編這邊選取了一個簡單的UI交互作為案例,這個交互的效果是通過點擊UI界面中按鈕出現不同的圖片。這種將交互體現在UI界面上的設計,就是UI交互設計。UI交互設計包含了各式各樣的交互效果,如下列刷新、進度條、圖片輪播等,小編就不再一一例舉了。

           

          交互設計案例:

          Image title

          而這種以人機互動為目的,注重用戶體驗的設計則稱為交互設計。

          從以上的案例不難看出,UI設計主要以界面美觀為主,以靜態的方式呈現居多(也有以動圖動畫形進行呈現)。交互方式是靜態的。UI交互設計是在UI的基礎上進行交互設計,以偏動態的形式存在。交互設計則以用戶體驗為主,以動態的形式存在。

           

          4. UI交互設計vs UI設計vs交互設計對比之工具

          UI設計工具:

          PS(Photoshop):適用于界面設計,圖標設計,手繪等。

          AI (Illustration):適合創建徽標、圖標、草圖、排版和其他矢量圖。

          Sketch:適合圖標、界面設計,支持多文件分層,切片等插件。

          Image title

          交互設計工具

          Axure:老牌原型設計工具,適用于制作中高保真交互原型。

          Mockplus:適合創建快速交互原型,簡單高效,同時支持團隊協作。

          摹客:適合一鍵切圖,生成智能標注,生成圖層代碼,交互演示,設計協作。

          Image title

           

          UI交互設計工具:

          PS,AI,Sketch,Mockplus、摹客原型設計工具。

          Image title

          從使用的工具來看,UI設計主要以圖形、圖標、界面設計工具為主;交互設計主要以原型設計,交互設計工具為主;而UI交互設計則囊括了前兩者使用的所有工具。

          看完本文后,小編相信大家對UI交互設計,UI設計,交互設計三者的關系已經有所了解了。簡單來說:UI是為了好看,交互設計是為了好用,UI交互設計就是好看又好用。如果想從事UI交互設計相關的工作,小編建議不妨在了解它們的基本定義后,開始學習一些技能知識,著手開始練習設計。這樣可以幫助大家在UI交互設計的路上快速成長!

           

          原文地址:慕客

          作者:慕客產品協作設計

           轉載請注明:學UI網》UI設計、交互設計、UI交互設計的聯系和區別是什么?

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

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

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

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

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




          數據可視化圖表設計指南:圓環圖

          seo達人



          3種圓環圖樣式 

          標準圓環圖

          圖片

          圖表中間空心的部分用來展示數據的總數,用圓環的弧長和顏色表示不同數據的占比,圖表旁邊有圖例用來解釋說明。

           

          布爾圓環圖

          圖片

          布爾圓環圖就像是給圓環圖做了布爾運算,只表示正負兩個值

          比如想重點突出完成率,就使用綠色圓環來表示68%的完成率,圓環其他部分為灰色,同理想重點突出反彈率,就使用紅色圓環來表示83%的反彈率,圓環其他部分為灰色。

          圓環中心部分用來顯示相關數值的百分比和標簽。此外布爾圓環圖不需要額外添加圖例。

           

          標簽圓環圖

          圖片

          直接在對應的圓環上加入標簽比使用圖例更容易理解。在屏幕空間允許的情況下,可以直接在圓環上添加「名稱+所占比例+數量」的標簽形式。

           

          圓環圖交互狀態分析 

          懸停狀態

          圖片

          在標準圓環圖中,鼠標懸停在圓環圖上時,跳出分段名稱+百分比+數量值的彈窗。在標簽圓環圖中,懸停的圓環部分突出顯示,其余部分淡出處理。

           

          點選狀態

          圖片

          圖表段可以是交互式的,點擊對應的分段時,右側的圖例也會同步高亮顯示。

           

          焦點狀態

          圖片

          焦點狀態和上面提到的懸停狀態類似,唯一的區別在于,焦點狀態選中分段后有一個放大+描邊的圓環效果,突出展示數據。

           

          空狀態

          圖片

          當沒有可用的數據時,應該在圖表上表明這一點,并給出提示引導用戶去點擊。

           

          錯誤狀態

          圖片

          獲取數據時偶爾會出現發生錯誤的情況。發生這種情況時,向用戶提供有用的、可操作的解釋,說明發生錯誤的原因并告訴用戶可以采取哪些措施來解決問題。

           

          圓環圖使用指南 

          使用分類顏色

          圖片

          保持圓環圖每部分顏色都使用醒目的顏色且具有對比性。在圓環圖中不建議使用同色系顏色來顯示數據,同色系顏色常用在直方圖中。

           

          最多使用五個分段

          圖片

          當圓環圖包含多個數據分段時,圖標會變得難以理解,為保證圖標的清晰,盡可能將分段控制在 2-3 段,不要超過5段。如果數據過多,可以考慮使用柱狀圖、條形圖等其他形式的圖表。

           

          保證數據準確

          圖片

          圓環圖的所有分段加起來的數值應該始終為 100%,沒有有多段數據占比過小,可以一起匯總到“其他”分段中。

           

          按順序排列數據

          圖片

          圓環圖的份分段應從12點位置開始按最大值排序,然后按順時針方向依次按大小排列每個數值。右側的圖例頁應該從上到下保持一致的排序。

           

          不要將時間分段

          圖片

          時間是一個順序變量,不能用作圓環圖中的類別。例如每個季度的時間是相同的,但是每個季度訪客卻不一樣,使用圓環圖會給用戶造成一定的困擾。如果以時間作為基本單位,可以使用直方圖、條形圖等圖表。

           


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

          作者:Clippp

          轉載請注明:學UI網》數據可視化圖表設計指南:圓環圖

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

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

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

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

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



          echarts折線圖背景漸變以及常用配置項

          前端達人

          
          
          1. let myChart = this.$echarts.init(document.getElementById('plant-charts'));
          2. // 繪制圖表
          3. myChart.setOption({
          4. tooltip: {
          5. formatter: '{c}' //設置單位
          6. },
          7. //圖例樣式
          8. legend: {
          9. data: ['寬帶情況', '數據量'],
          10. textStyle: {//圖例文字的樣式
          11. color: '#fff',
          12. fontSize: 12,
          13. padding: [0, 20, 0, 0]
          14. }
          15. },
          16. grid: { //設置圖標距離父級div的間距
          17. top: "10",
          18. left: "0",
          19. right: "15",
          20. bottom: "10",
          21. containLabel: true
          22. },
          23. xAxis: {
          24. type: 'category',
          25. boundaryGap: false,
          26. data: ['2015','2016','2017','2018','2019','2020','2021'],
          27. axisLabel: {
          28. interval: '0', //類目軸(category)中用數值表示顯示間隔,0為顯示所有,1為隔一個顯示一個,以此類推
          29. textStyle: { //文字樣式
          30. color: '#62799C',
          31. fontSize: '12'
          32. },
          33. },
          34. axisTick: { //y軸刻度線不顯示
          35. show: false
          36. },
          37. },
          38. yAxis: {
          39. type: 'value',
          40. //show: false,
          41. axisLabel: {
          42. textStyle: { //文字樣式
          43. color: '#62799C',
          44. fontSize: '12'
          45. },
          46. },
          47. // 控制網格線
          48. splitLine: {
          49. // 改變軸線顏色
          50. lineStyle: {
          51. color: '#2a2a2d'
          52. }
          53. },
          54. axisTick: { //y軸刻度線
          55. show: false
          56. },
          57. },
          58. series: [{
          59. data: [5000,6000,7000,4400,3200,4500,6800],
          60. type: 'line',
          61. itemStyle: {
          62. normal: {
          63. color: 'rgba(62,139,222,1)'//線顏色
          64. }
          65. },
          66. areaStyle: {
          67. normal: {
          68. color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{ //折線圖顏色漸變
          69. offset: 0,
          70. color: 'rgba(62,139,222,0.6)'
          71. }, {
          72. offset: 1,
          73. color: 'rgba(62,139,222,0.01)'
          74. }])
          75. }
          76. },
          77. }]
          78. });

          echarts圖例(legend)顯示設置位置,樣式,內容(百分比,水平,豎直顯示,icon樣式)

          前端達人

             

           

          //圖例
              legend: {undefined
                  icon: "circle",
                  //icon形狀  類型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none,
                  itemWidth: 10,  // 設置icon寬度
                  itemHeight: 10, // 設置icon高度
                  itemGap: 40, // 設置間距
                  // top: '5%',//豎直位置
                  // left: 'center',//水平位置
                  x: 50,//水平位置
                  y: 200,//豎直位置
                  orient: "vertical",//設置顯示順序,默認水平(水平,豎直)
                   textStyle: {undefined
                      color: "#000"
                   },//文本樣式
                   // 使用回調函數(設置文本顯示內容,例如 加百分號)
                    formatter: function(name) {undefined
                      var data = option.series[0].data;
                      var total = 0;
                      var tarValue;
                      for (var i = 0, l = data.length; i < l; i++) {undefined
                        total += data[i].value;
                        if (data[i].name == name) {undefined
                          tarValue = data[i].value;
                        }
                      }
                      var p = ((tarValue / total) * 100).toFixed(2);
                      return name + " " + " " + p + "%";
                    },
              },


          日歷

          鏈接

          個人資料

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

          存檔

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