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

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

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

          首頁

          在UI布局排版中,讓界面快速出彩的7個技巧

          seo達人

          一、優先考慮重要內容

          圖片

          優先考慮重要的內容,在頁面中保持重要的信息占比更大、更明顯。

          為了讓用戶能夠快速看到關鍵信息,可以通過滾動的交互方式和指導性的按鈕設計,幫助用戶找到他們想要的信息。

          圖片

          ?▲ 例如《紐約客》網站的布局設計,在中間位置優先展示最重要的資訊,突出重點,網站兩側的資訊展示相對弱化。

           

          二、保持合理的視覺層級

          圖片

          頁面中清晰的層級結構對用戶來說也很重要。通過打造明確的視覺層級結構,頁面內容的主次關系會更清晰和合理,方便用戶更容易理解頁面信息。

           

          圖片

          ▲ 在Netflix影片詳情頁的布局中,保持了清晰的視覺層級關系。跳到詳情頁后,我們首先會看到頁面頂部的預告片和大尺寸的白色高亮播放按鈕,然后是關于影片的介紹和其他功能。

           

          三、使用非對稱布局

          圖片

          對稱布局和非對稱布局在日常設計中都很常用。對稱的布局能夠讓頁面看起來更加統一、整潔,但也導致頁面效果缺少對比,效果單調。

          非對稱的布局剛好可以彌補這個缺點,在保證排版整齊的基礎上增加頁面的對比關系,讓頁面看起來更有吸引力。

          ▲ 例如在這個網站首頁中,左圖右文的非對稱布局設計讓整個頁面看起來更有對比性和沖擊力,快速吸引用戶的注意力。

           

          四、使用間距

          圖片

          通過間距,能夠將頁面中不同的版面和內容劃分出來,讓頁面的布局更豐富。

          同時,通過調整間距的大小能有效區分內容間的關聯程度。例如,同一組信息采用間距小的布局方式,讓內容的關聯更緊密。

          圖片

          ▲ 在Instacart頁面中,上下有兩種不同的布局方式,通過增加間距,讓頁面看起來更清晰。

           

          五、打破統一的布局

          圖片

          過于統一的布局方式會讓頁面看起來很單調,無法突出重點。

          如果想讓頁面中的某個內容吸引用戶的注意力,可以嘗試在打破一致的布局情況下,讓頁面看起來更有節奏。

          圖片

          ▲ 在Airbnb網站中,圖1、2和5采用了相同的尺寸,圖3和4打破了統一的布局,讓頁面看起來更有動態感。

           

          六、使用網格

          圖片

          網格系統是使用網格作為輔助,進行頁面設計的方式。通過使用網格系統,可以更準確地定義頁面的布局。

          圖片

          當然,網格不僅能用在頁面布局設計中,在其他類型的設計(海報、畫冊等)中也常用到,是非常值得設計師學習的系統。

           

          七、保持對比

          圖片

          在設計頁面的布局關系時,要盡可能做到圖文搭配,保證既要有文字、按鈕等元素,也要有一定量的圖片,讓頁面保持對比性。

          圖片

          ▲ 例如這個網站首頁中,左右兩部分采用了一致的布局方式,以圖片作為背景,文字和按鈕等元素與背景產生對比,提高頁面的沖擊力。

           

          最后

          通過這些實用的布局技巧,希望能夠幫助你設計構建出更好的界面布局~ 對界面中內容的劃分和信息的掌控帶來進一步的提升。

           

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

          作者:Clippp

          轉載請注明:學UI網》在UI布局排版中,讓界面快速出彩的7個技巧

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


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

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

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



          P了兩個圓,價值800萬?

          seo達人


          下面這兩個圓大家可能不熟悉,這個是萬事達的最新logo,就是由兩個圓組成,價值800萬。那為什么兩個圓形能夠價值這么多,今天跟大家聊聊,幾何在整個設計中的運用,怎么讓你的圖形更高級。

          圖片

          圖片來源于網絡,版權歸作者所有

           

          一、幾何簡史課 

          歐幾里得常被稱為“幾何之父”,因為他寫了一本叫《幾何學》的書,這是數學史上最有影響力的著作之一。

          圖片

          幾何圖案來源于幾何學,幾何學是數學中對形狀和線與面之間關系的研究。圖案被定義為“重復的裝飾設計”。

          在設計中,幾何圖案反復使用形狀和線條來創造引人注目的設計。幾何圖案非常適合用于設計,因為從本質上講,我們的眼睛自然會被它們吸引。通過將幾何圖案與合適的顏色相結合設計引人入勝的視覺內容。

          圖片

          世界內外的一切都可以通過數學來推斷和理解,這正是許多文化將幾何視為神圣的原因,從一開始就被人類直觀地使用和理解。

          因此,幾何形狀和圖案在藝術和設計中具有很大影響力。從伊斯蘭藝術到包豪斯運動、立體主義、裝飾藝術等等,幾何圖案一直并將繼續在設計中發揮關鍵作用。

          圖片

          我們可以將幾何設計用于從品牌到產品、插畫、網站、應用程序設計等等的任何設計中,下面帶大家看一些幾何圖案在不同設計環境中的運用案例。

           

          二、幾何在設計中的運用 

          1、平面設計

          圖片

          雜志封面設計結合了三角形和充滿活力的各種配色,創造出炫酷的圖案,色彩繽紛的效果。

          圖片

          平面設計師 Atul Charde 設計的長途汽車,展示了幾何圖案可以很好的吸引人的注意力。Charde 還結合了黃色、橙色、海軍藍和白色的配色,創造出一種正在忙碌行駛的感覺,很生動形象的體現了長涂汽車的概念,十分契合產品。

          圖片

          幾何設計也非常適用于包裝上面,用簡單的形狀組成復雜的圖案來包裝產品。

          圖片

          這瓶酒使用簡單的線條來創造一個有趣的幾何圖像。這是一個很基本的設計方法,但通過巧妙地結合顏色填充幾何形狀,設計感就出來了。一個復雜的圖案就是由一個簡單的圖形組成的。

          圖片

          圖片

          盧塞恩紐巴德俱樂部音樂會系列海報,用繪畫與幾何的結合,表現了音樂的非常規和自由特點。

          閃電形、星形、三角形表達音樂的激烈抑揚頓挫感;圓形、傳達音樂的平靜、緩和感;自由筆觸有序直線,傳達音樂的有序、綿長感。

           

          2、品牌

          圖片

          Nymble 健康套盒品牌視覺提取品牌首字母“N”與人奔跑時的姿態結合,雖然是簡單的幾何線條和點,卻非常有動感,簡潔而傳神。

          圖片

          圖片

          圖片

          品牌延展部分是對品牌標志更進一步的理解和演繹,沿用了標志中的點、線元素,通過對點與線的位置、距離、粗細、大小的調整,構建出一整套可變的網格圖案。

          圖片

          圖片

          涉谷時裝周2020-2022的視覺設計用圓形幾何化的視覺語言,將SFW2020組合成圖標,并拆分重組成為輔助圖形,運用到畫面整個體系中。從2020-2022,通過不同視覺展現不同的視覺風格,2022的工業鬼馬感、2021休閑時尚感、復古都市感。

          圖片

          圖片

          玻璃質感和幾何圖形的結合完美詮釋主題,體現宏大精致的美。元素簡潔,通過細膩的質感增加豐富的對比。

          圖片

          圖片

          這是一款國外的披薩品牌的logo設計,特別之處在于logo的名字和圖形看似分開,實則是用一個郵票作為一個整體。圖形的人物是一個由幾何組合,用黃金比例切割出年輕媽媽的樣子。

          圖片

          圖片

          圖片

          這是國外的一個茶飲品牌的包裝設計,插畫的人物服裝和植物元素是當地人的特點,設計師將這些具有豐富變化的民俗服裝用幾何圖形有規律的重新組合。

          通過將復雜的事物用幾何有規律的概括后,再通過合適的配色,呈現的整體設計感很強。同時在文字以及裝飾框上,也統一用了這種具有民俗風情的風格,在字體上也會用幾何作為流蘇一樣去代替字母一部分的筆畫。

           

          3、插畫

          圖片

          圖片

          簡單幾何元素拼綴出的人物、場景,色彩上深淺深的對比,圖形上方圓方對比增添了畫面的呼吸感和視覺沖擊力。

          圖片

          圖片

          這種風格的插畫區別于以往的插畫風格,整體是幾何體和不規則形狀組合而成,噪點的運用和顏色的搭配完美,夸張的手法,大膽的設計讓它脫穎而出。

          圖片

          無論是簡單的圖案還是復雜的圖案,幾何設計都可以完美地制作出引人注目的壁畫。

           

          4、網頁設計

          圖片

          圖片

          這個網頁運用極細的線條,規則的塊面,將界面的功能展示區域分明,簡約不失嚴謹,傳達出品牌的專業度。

          圖片

          B端設計的頁面采用圓角卡片,以及大規模幾何體使用,界面立體感和層級感比較突出,立體幾何插畫的表現效果很好可以在UI中運用。

          圖片

          配圖用三維幾何體,搭配很年輕化的色彩風格,顯得畫面感很強。整體色調很舒服,界面干凈整潔,很年輕。

          圖片

          圖片

          這組網頁設計首屏融入幾何元素包裹著主圖,靈動多變的幾何裝飾打破慣性的設計思維,創造出新奇的視覺效果。

          圖片

          圖片

          這個體育網頁頭部使用紅色和黃色,運用對比色,視覺沖擊力強,使用三角形和異形,簡單的幾何圖形,營造頁面的空間感。

          圖片

          圖片

          背景采用柔和的微漸變點綴淡淡幾何圖形,既不會喧賓奪主分散用戶的注意力,又可以避免純色背景的單調。

           

          5、UI設計

          圖片

          這個綠植商店頁面采用大圓角搭配圓潤的線性icon,用幾何拼接形式表現插畫,整體風格自然簡潔。

          圖片

          這個醫美產品的UI設計,按鈕和產品的背景沿用同類型的幾何圖形,類似超級符號的存在,加深品牌印象的同時,打破常規背景圖的形態,使頁面充滿生機活力,貼合醫美產品賦予肌膚青春活力的初衷。

          圖片

          從畫面感來看,有點像游戲或者娛樂產品風格的界面。背景用很多幾何元素符號,畫面感很活躍。

          圖片

          這組啟動頁設計,通過人物和幾何圖形穿插,突出人物主體,拉開主體和幾何形的層次感;并運用色彩疊加的方式,畫面更具青春、趣味和視覺沖擊力。

          圖片

          圖片

          這是一款體育運動場館預訂的產品,用幾何形狀表達不同的運動,簡約又生動,也與整體高級感匹配。

          圖片

          幾何插畫設計風格,頭部卡片像一個抽象的人物,整體風格偏年輕化,卡片和背景生動有趣不單調,顏色多彩充滿活力。

           

          三、最后 

          今天的分享就到這里,期待每天一個小知識點,可以給你的設計路上增加一點點能量。

           

          原文地址:我們的設計日記(公眾號)

          作者:叮當貓

          轉載請注明:學UI網》P了兩個圓,價值800萬?

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


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

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

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



          私貨來了|分享兩個寶藏作品源文件 !!【移動端UI】

          seo達人


          圖片

          先看看這套數據可視化的吧。這套文件里面的數據組建跟配色都非常的豐富,而且耐看,光是吸一吸里面的顏色,都會讓自己的稿子精致不少。

          圖片

          圖片

          圖片

           

          篇幅原因截圖就不一一展開了,這套素材規范嚴謹、組建豐富、色彩配套較多,層次分明,比較適合從事Web端、產品工具型、Saas后臺、偏向于B端的同學。

          親測用起來還是有效果的,推薦大家使用。

          圖片 

           

          接著給大家看看第二套素材,這套素材主要是移動端的APP設計,適合于從事C端、偏向于業務設計的同學。

          圖片

          整體風格很簡潔,顏色很高級,看著就很舒服。

          所以如果這套素材下載下來,直接拷貝圖層的顏色、陰影、還有風格化樣式,可以讓自己的稿子高級不少。

          圖片

          反正我特別喜歡這套素材里面的彌散投影,右鍵直接拷貝圖層樣式參數,就能讓我自己的稿子,一樣擁有這么高級的投影樣式啦。

          圖片

          圖片

          圖片

          案例很多,就不展開一一給大家看了,確實好用。


          原文地址:UI小學(公眾號)


          作者:素材干貨

          轉載請注明:學UI網》私貨來了|分享兩個寶藏作品源文件 !!【移動端UI】

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


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

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

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


          160種常用的配色方案,把設計調性拿捏得死死的

          seo達人



          一、高端

          圖片

          視覺調性高端的色彩,通常具有明度低、飽和度低、顏色數量少等特點,所以很多高端的設計都會以深色作為背景色,因為深色更顯低調、更具神秘感,所以給人的感覺更高貴。然后以亞金色、銀色、桔紅色、白色等作為輔助色。

          圖片

           

          二、科技

          圖片

          想要表現科技感,色彩的整體調性通常會偏冷色系,明暗對比要強,且通常會使用漸變色。比如以深藍色到藍色的漸變作為背景色,然后用高飽和度、高亮度的青色和紫色作為輔助色,這時這些輔助色就會非常的跳躍,具有一種發光的效果。

          圖片

           

          三、時尚

          圖片

          其實所有調性的配色都應該要盡量時尚一點,即使是想表現復古,也不能太土,所以這里所說的時尚特指偏向年輕、潮流的時尚。這種色彩通常具有飽和度高、明度適中、色相對比較大等特點。蔥爺這里概括了兩類,一類是以純色作為背景,這種色彩比較適合于品牌設計、網頁設計、畫冊設計等;一類是以漸變色作為背景,這種色彩比較適合于電商設計、廣告設計等。

          圖片

          圖片

           

          四、酷炫

          圖片

          酷炫是指那種視覺效果特別張揚、甚至是極具個性的色彩搭配,比如近幾年比較火的蒸汽波風格、酸性風格、賽博朋克風格、故障風格,其色彩就屬于酷炫類的。該類設計通常也是以深色作為背景,圖片元素會使用高飽和度且對比很強的漸變色,色彩相對較多。

          圖片

           

          五、好吃

          圖片

          即讓人感覺很有食欲的色彩搭配,這種色彩通常以暖色為主,比如紅色、橙色、黃色。飽和度較高、明度較低的組合方式通常用于餐飲行業;而飽和度較低、明度較高的色彩組合通常用于甜點、飲料等行業。

          圖片

           

          六、夏天

          圖片

          目前正值火熱的夏季,所以蔥爺專門整理了一些適合表現夏季的好看色彩,該類色彩通常會以藍色、青色、綠色這種冷色系最為主要顏色,然后以黃色或紅色、白色作為輔助色,這種色彩組合會給人清涼、快樂的感覺。

          圖片

           

          七、清新

          圖片

          小清新的視覺感受為輕松、柔和、淡雅,要達到這樣的效果,顏色的明度通常是比較高的,飽和度偏低,常用的顏色有淺青色、淺綠色、淺黃色、粉紅色等,在奶茶、女性護膚品的相關設計中比較常見。

          圖片

           

          八、快樂

          圖片

          快樂是張揚的、是活潑的,所以快樂的色彩飽和度較高、明度不會太低、色彩的種類會比較多,通常也是以暖色為主,但是會搭配冷色一起使用。黃色具有很強的快樂、陽光屬性,所以想要表達快樂,黃色通常是少不了的。

          圖片

           

          九、可愛

          圖片

          跟兒童、年輕女性相關的設計,通常需要表現出可愛的調性,這類色彩通常是用冷色和暖色相互組合,顏色的明度同樣不會太低,否則會有壓抑的感覺,另外飽和度也不要過高,飽和度稍低一點效果會更柔和一些。

          圖片

           

          十、健康

          圖片

          想到健康我們立馬就會想藍天白云、青山、綠色的草地和樹葉,還有黃色的小野花等等,所以藍色、綠色、青色、黃色、白色都是常用于表現健康的色彩,紅色也可以偶爾作為點綴色加進來。由于健康的調性也是要給人一種舒適、輕松的感覺,所以整體的顏色明度不要太低。

          圖片

           

          十一、運動

          圖片

          要想讓色彩動起來,對比一定要強,可以是色相對比、也可以是明度對比和飽和度對比。橙色和黃色是兩個很具活力的的顏色,所以常用于表現運動的設計里。

          圖片

           

          十二、科幻

          圖片

          這是一些科幻電影、機動游戲的海報設計常用的色彩搭配組合,給人的視覺感受是穩重而大氣,科技感和神秘感并存,所以背景色通常也比較暗,喜歡用青色和黃色這種比較亮的顏色作為點綴。

          圖片

           

          十三、喜慶

          圖片

          在設計節日海報或促銷海報時,通常需要表現出喜慶的調性,有些設計師會局限在大紅色、黃色、和橙色里,這樣搭配出來的色彩容易土,而想要解決這個問題,一方面可以加入冷色搭配使用,另一方面顏色的飽和度和亮度也不要過高。

          圖片

           

          十四、復古

          圖片

          這類色彩的特點是顏色的飽和度會相對低一點,而且大多數情況下,整體的明度通常也不會太高,常用類比色搭配和對比色搭配。

          圖片

           

          十五、中國風

          圖片

          具有中國風特色的顏色和色彩組合有很多,蔥爺這里僅列舉了8個組合。這類色彩同樣飽和度不會達到最高,有點復古和充滿文化氣息的感覺。胭脂(暗紅色)、緗色(中黃)、紺青(深藍色)、黛(褐色)等是中國風常用的顏色。

          圖片

           

          十六、夢幻

          圖片

          夢幻具有奇妙和神秘的感覺,好像在黑暗中找到了一點曙光,奇遇了驚喜一般,所以大多數情況下,背景色會使用從深色到亮色的漸變。顏色相對會比較豐富,而且以漸變色居多。

          圖片

           

          十七、女性

          圖片

          女性是溫柔的,是感性的,所以該類色彩組合通常為類比色,偶爾會用一點對比色作為點綴,以增加畫面的活潑氣息,顏色的明度和飽和度都不能太低,當然飽和度最好也不要過高,粉色、紫色是常用于表現女性的色彩。

          圖片

           

          十八、優雅

          圖片

          優雅可以理解為低調、高級、溫和、安靜,所以這類色彩的對比通常不會太強,飽和度也會比較低,整體的色彩調性會偏中性,常用卡其色、麻色,還有單色組合及類比色組合。

          圖片

           

          十九、經典色彩組合

          圖片

          除了以上十八大調性,蔥爺還給大家推薦一些經典的配色,很難把它們具體歸為哪一類,但是我們在做很多設計時,用上這種配色總能得到不錯的效果,比如紅黃黑、紅白藍、黃綠黑、等等,在很多平面海報設計中經常能看到。

          圖片

           

           

          圖片

          以上所列舉的色彩組合,矩形色塊為背景色,圓形色塊為畫面中圖片元素或文字使用的顏色。根據需要可以把其中的某些純色轉變為單色漸變,或者也可以把某些單色漸變轉化為純色。另外,在不包含黑白灰的色彩組合里,仍可以根據需要自行加入黑白灰,比如用于填充文字的顏色。
          當然,能體現以上這些調性的顏色還有很多,大家可以自行補充,建立起自己的色庫。 
           
           

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

          作者:蔥爺

          轉載請注明:學UI網》160種常用的配色方案,把設計調性拿捏得死死的

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


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

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

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



          不會畫圖標,這些源文件拿去用吧!

          seo達人

          正文

          圖標設計對于UI設計師來說屬于非常基礎的技能要求,甚至很多入門級設計師都會畫,只是畫得不一定規范,或者缺少創意和質感。不過也有一些剛入行的新人設計師,圖標設計的能力還比較薄弱,在項目中效率比較低。

          因此圖標素材成為了提高工作效率的途徑,為了幫助這部分同學獲得更多圖標資源,黑馬哥為大家整理了十余個優質的圖標素材庫,希望可以帶給大家更多幫助。

           

          1. 善用圖標庫

          我們可以運用圖標素材庫的資源來提高我們的工作效率,但是不適宜過度依賴,僅限于入行前期的經驗過度。

          針對已經具備一定經驗的設計師來說,不適合過度使用素材解決工作需求,可以將圖標素材庫作為靈感來源。參考別人的風格和技法表現形式,以此來創作出屬于具備自己思考的作品。

          圖片

           

          2. 圖標素材庫推薦

          為了方便初入行業的同學掌握更多資源,為大家整理了如下圖標設計網站,大家在使用的時候自行閱讀相關平臺的規則說明。

          2.1 Flaticon

          Flaticon 擁有超過 780 萬多個矢量圖標和貼紙等素材,提供 PNG、SVG、EPS、PSD 和 CSS 等格式。該圖標素材庫包含界面圖標、動效圖標、標志和貼紙等,作品的質量還是比較高的,可以滿足很多設計場景的需求。

          圖片圖片

          2.2 Noun Project

          Noun Project 提供了超過 300 萬個藝術品質的免費圖標,可以下載 PNG 或者 SVG 等文件以便于編輯。

          圖片

          2.3 ICONS8

          ICONS8 對于一些設計師來說比較熟悉,提供了幾十款樣式的免費圖標素材,還有設計工具和插件的推薦等。除了圖標素材以外,還有插畫素材和一些不錯的照片素材,種類豐富且質量都還不錯,值得沒事的時候逛一逛。

          圖片

          2.4 Iconfinder

          Iconfinder 擁有圖標、插圖、3D 插圖、貼紙等素材,里面提供了非常多的圖標素材,還可以通過內置的色彩編輯器進行調整。只需要簡單的操作就可以對圖標和插圖進行重新著色,下載 SVG、PNG 格式或者復制參數等。

          圖片

          2.5 IconPark

          IconPark 圖標庫已被字節眾多產品線使用,擁有 2600+ 基礎圖標,29 種圖標分類,為你的設計提供更多的選擇。

          圖片

          2.6 Freepik

          Freepik 提供的素材不只是圖標,還有字體、插圖、漫畫、海報、樣機、標志等等內容,種類比較豐富。圖標的分類也比較豐富,素材資源眾多,可以滿足我們多樣化的設計需求。

          圖片

          2.7 Iconfont

          Iconfont 對于大家來說非常熟悉了,相信很多設計師都去下載過圖標素材,是由阿里媽媽 MUX 傾力打造的矢量圖標管理和交流平臺。設計師將圖標上傳到 iconfont 平臺,用戶可以自定義下載多種格式的 icon,平臺也可將圖標轉換為字體,便于前端工程師自由調整與調用。

          圖片

          2.8 Ionicons

          Ionicons 提供了完全開源的圖標設計素材,用于 Web、iOS、Android 和桌面應用程序,支持 SVG 和代碼文件下載。

          圖片

          2.9 Flat Icon Design

          來自日本設計師團隊創辦的提供免費圖標素材下載的網站,和別的圖標素材網站不同,該網站收錄了眾多扁平設計風格的圖標,帶給各位設計師更多樣化的選擇。

          圖片

          2.10 Fontello

          圖標字體生成器,將你的圖標拖進網站自動生成。網站也提供了眾多圖標可以下載。圖標大小可以自動調節,然后批量選擇好一次性下載,非常方便實用的一個網站。

          圖片

          2.11 Logobook

          Logobook 提供了很多黑白的創意圖形,可以作為我們設計靈感的參考來源。通過對基礎圖形的創意靈感,探索出圖標設計的想法,是一個靈感來源不錯的平臺之一。

          圖片

          2.12 Iconsfeed

          Iconsfeed 展示了很多的應用圖標設計案例,分類也是非常的豐富,可以根據自己的需求尋找對應的設計靈感。

          圖片

           

          小結

          為大家選擇了 12 個圖標素材網站,大家使用時記得仔細閱讀各平臺的條款說明,本分享僅為參考。

          3. 溫馨提示

          通過圖標素材庫雖然可以讓我們偷懶一些,但是并非長久之計,一旦遇到更高要求的設計需求時,過度依賴素材容易讓我們提前步入瓶頸期。要掌握圖標設計的規范、風格趨勢、表現技法、深入質感的方向等等,只有具備優秀的圖標設計能力,才能在項目中隨意發揮。

          圖片

          4. 圖標設計能力提升

          圖標設計入門很簡單,但是從“會畫”到“畫好”之間卻存在一定的差距。圖標設計的能力屬于動手能力的提升,沒有捷徑可走,唯有掌握方法并反復磨練。

          4.1 臨摹起步

          臨摹是圖標設計訓練的起步,大量的臨摹可以提高軟件操作的熟練度和造型設計的把控,也能不斷提高簡化圖形的思路。臨摹的量不能太低,臨摹幾個幾十個是沒有作用的,起碼也得上百個起步,只有量變才能引起質變。

          圖片

          4.2 拆解圖標素材

          從運用素材到拆解素材,是依賴素材到探索技法的轉變。拆解圖標素材的造型結構、規范參數、表現技法、配色關系、細節和一些比例關系等,掌握并還原素材的能力,這樣才能不斷掌握各類圖標風格的設計能力。

          圖片

          4.3 圖標案例分析

          具備技法層面的能力是基礎,培養靈感需要積累大量案例并分析總結。體驗線上的各類產品,分析圖標設計的風格趨勢,并形成經驗總結,只有不斷體驗和總結才能把控圖標設計的運用趨勢。

          圖片

          4.4 強化日常輸出

          除了完成項目需求以外,日常的探索和磨練也是至關重要的,只有經歷過千錘百煉之后才能隨心所欲??吹絻炐愕淖髌芬パ芯坎⑥D換成自己的作品,掌握技法并形成自己獨特的理解。定期輸出作品是為了不斷強化自己的動手能力,也是持續激活腦細胞的過程,讓我們的靈感源源不斷的成長。

          圖片

           有人帶好進步 

          如果你通過自學無法更快的提升自己圖標設計的能力,專業能力依然處于入門級或者初級階段,那就找黑馬哥帶一下吧!有人帶進步更快,才能在短時間內從入門級進階到高級以上能力。

          圖片

          黑馬哥會帶你分析設計思路、拆解技術難點和掌握設計原則,通過案例實戰的形式讓你更快的掌握。再配合日常作業的一對一指導,發現你作品中的問題并逐個修改,達到較高質量的輸出。

          圖片

          也會指點工作項目中的設計,讓你在工作中更快的提高效率和發揮更高的價值,實現專業能力的落地和職場路徑的晉升。

          圖片

           

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

          作者:黑馬青年

          轉載請注明:學UI網》不會畫圖標,這些源文件拿去用吧!

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


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

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

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



          這回做網頁不可能沒思路了!

          seo達人

          一、圖片類

          圖片類的網頁頭圖是非常常見的,比如像全屏圖片類的:

          圖片

          圖片

          當然,這種全屏圖片也是可以增加一些設計感的, 像下面這個國外攝影網站:

          圖片

          看起來就非常的高級!

          除了全屏圖片的方式,還有半屏的,比如像下面這種:

          圖片

          圖片

          這種基本都是一半圖片,一半文字排版,很多都用在知識類網站,看起來相對中規中矩一下。

          圖片類型的頭圖還有一些圖片拼接型的,比如像下面這種,三個圖片拼接在一起:

          圖片

          或者還有這種不規則拼接:

          圖片

          圖片類的網頁頭圖還是比較常見的,上面這些形式,大家都可以多多參考!

           

          二、插畫類

          插畫類的頭圖就會比較有設計感了,比如像這樣充滿全屏的,沉浸感十足:

          圖片

          圖片

          還有這種一半插畫,一半文字排版的:

          圖片

          圖片

          當然,隨著3d的崛起,3d插畫也漸漸成為了一種網頁頭圖的設計風格,很有沖擊力:

          圖片

          如果你的網頁使用用戶年齡比較低,需要一定的親和力,不妨嘗試一下插圖的設計方式。

           

          三、圖形類

          圖形類的頭圖,如果做的好,可以非常有設計感,比如一些nft類平臺:

          圖片

          圖片

          再比如這種:

          圖片

          還有一些比較常見的形式,就是圖形加人物,讓人物從圖形里破出:

          圖片

          圖片

          這些都是圖形的一些用法,大家可以多多嘗試!

           

          四、排版類

          除了上面這些類別,還有一種就是信息排版類類,大部分都是文字信息內容:

          圖片

          圖片

          圖片

          相對來說會比較素一點點,但是如果排版排的好看,依然可以出來好看的效果,大家也可以多多嘗試!

           


           

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

          作者:菜心

          轉載請注明:學UI網》這回做網頁不可能沒思路了!

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


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

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

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



          數據工程在騰訊CDC的演進

          seo達人

          一、問題分析

          不同人對數據的需求是不一樣的,或者說,不同同學對同一份數據的不同指標組有不同的價值認可。

          1.我們的交互同學更多地會參考大盤的“用戶習慣”,使用某個問卷題型的比例來作為設計方案的數據支撐;

          2.開發同學更多地會關注這個數據引發地一些性能(問題),架構指標等;

          3.產品同學會非常關心某個上線項目的入口流量,轉化率相關指標;

          4.運營同學關注的方面更為通用,除了大家都關注的北極星和護欄指標,他們更會關心用戶在使用上的一些點位問題,單個/單批用戶的運營策略轉換問題。

          雖然上面只提到4個籠統的數據場景,但是其實我們由此產生的數據圖表、SQL模板甚至是需求單已經有很多,于是我們從規范和流程上看到了一些問題:

          1.我們要如何快速找到我們指標對應的底層數據?當時一個關于「活躍用戶」在團隊版中的表現的下推分析,后面還加上了登錄渠道的多維分析,我們甚至開了一場會去校對口徑 ;

          2.關于口徑,我們如何確定什么數據是對的呢?不同的數據開發同學開發的報表相差很大;

          3.開發同學有非常美好的想象力,一句超凡脫俗的SQL不僅在當前的架構下得不出結果,甚至會拖垮其他依賴的組件。

          讓用戶簡單地找到正確的數據,需要把數據按照層級順序擺放在合適的位置并且登記在冊,在當時的時間點下,開始構建數據業務的數據倉庫當然是最好的選擇;我們在數倉開始之初時反思,為什么口徑、數據、校對總是不能被一次敲定呢?后來我們發現,我們做這個需求的過程:從口徑的描述、SQL的開發執行到出庫展示整個過程沒有一個地方是可以被review的。而對復雜數據量的支持,其實就是架構該升級了,單點的ES無法支持多場景的adhoc。

           

          二、數倉基建與維度建模

          在做這個事之前,我問組里的同學:“我們有什么數據能夠支持我們做數據分析?”,清一色的回答:“ES里的后端Event日志,前端上報的Pageview和埋點,業務DB中的表”。確實我們早期就有比較統一的基于事件流的日志格式和較為完備的前端埋點組件,但是我們還是沒法回答我們擁有的數據如何支持我們完成某些需求的問題。只有我們把我們擁有的數據的具體能力和表現形式放出來,我們才能真正知道我們擁有的是什么,數據才能真正地從數據存儲變成數據資產。

          1、明確數據表

          圖片

          上圖顯然就是我們數倉初期ODS到DWD的一層規劃,這里我們更希望引入產品同學來對齊我們現有的數據資產,以便在后續數據需求的溝通上能夠明確哪些數據能為我們所用,我們有哪些底層數據需要再去補齊。明細表一般存在于流式數據中,帶有時間屬性,一般用于一段時間內的指標計算。

          同理,我們把存在業務DB中的數據平移到數倉中,這些數據表本身經過了不錯的數據建模,我們將我們擁有的表保留退化維度同步到數倉,我們就得到了DIM層(塊)。維度表一般不帶有時間屬性,用于關聯做維度分析。

          2、業務總線矩陣構建

          把動態的明細數據和靜態的維度數據相互交叉,就得到了我我們數倉的底層應用「業務總線矩陣」。在這個笛卡爾坐標系里的每一個點或者一條線都有它的業務意義。比如我們通過交叉「登錄明細」 和「團隊信息」,我們就能得到「團隊登錄」的明細;通過交叉「登錄明細」、「團隊信息」和「用戶登錄渠道」(2維度1明細),我們可以得到「分渠道的團隊登錄」明細,這是一種維度細分統計的構建;通過交叉「登錄明細」、「團隊信息」和「提交答卷明細」(1維度2明細),我們可以得到「團隊版登錄且答題」明細,這是行為組合(細分)。

          至此,我們能夠清楚地認知數據可能會在哪個位置發揮什么作用,下一步要解決的是我們該怎么找到我們的數據這個問題。

          3、元數據管理

          為了解決“我們有什么數據”這個問題,我們決定接管數據的入口,把開發過程中生成的數據表按照數據的生命周期命名打上標簽。

          圖片

          問卷的業務數據庫里有百余張表,其中大約有近4成為維度表,需要拆分成明細的點位或者日志會隨著業務發展主鍵膨脹,業務總線矩陣也會主鍵變成一張大網,失去可檢索性。事實上,我們對數據的需求是有描述性的,比如想看“這周問卷的新增明細”,我們并非記住一串冰冷的文字,我們更希望能把「1周」,「問卷」轉換成描述條件作為我們元數據的檢索入口。 我們支持了Superset從表comment、字段comment中檢索的需求,把想要的關鍵字按照關鍵字檢索匹配到正確的數倉入口。

          4、數據血緣

          在我們接管了數據產生的入口后,我們把用戶調用數據資產的記錄同樣采集了起來?;谝惶譴ow code配置化調度任務,我們在為開發同學提供分區篩選、數據量評估、sql執行、執行結果質量校驗和下游寫入的能力的同時,我們更在配置化的Spark啟動入口處植入了血緣上報,當一個任務被成功執行計算后,我們采集了數據的流向和數據流動比例。

          圖片

          有了數據血緣后,在一份數據出現分歧時,他的數據量和執行計劃都是可以被review的,從數據讀入和寫出的量級波動情況可以相對容易地追溯到原因,但是目前還沒有做成波動歸因。

          到這里,我們的數據開發鏈路的不確定性只剩下了口徑確認和變更。我們通過將指標組(一般是單指標多維度)命名,分配給數據開發同學,確定產品負責人和開發負責人。這個順便解決了我們之前無法追溯報表錯誤不知道該找哪位同學來看的問題。開發完成后掛靠在某個具體的數倉表上,實現數據需求到數據開發到底層計算的全鏈路記錄,當數據出現問題或需要修改時,則整個鏈條上的負責同學都會有感知,確保發起的修改能夠被所有相關的(特別是下游的)數據同學review到。

          圖片

          5、數據架構

          規范的事情暫時能跑了,在只有我一個人力的情況下繼續大力度地做進一步數據治理可能并不是當下最急需的,在場景分析中提到的問題,我們還有關于開發最重要的一個問題——當下的數據架構需要升級。為了回答這最后一個問題,我們希望把昂貴的ES儲存費用轉投到能面向更大型分析場景的數據架構上。

          在之前,部門內所有的分析都有ES或者ELK套件承擔,從20年開始性能和錢包都陸續見到了瓶頸。目前部門數據平臺內走的是以流式分發為主的Lambda架構,由下游需求決定數據是否從實時層沉降到離線層。維度數據會存在離線層,事實明細數據會廣泛地存在于實時層,這是基于下游有時延要求高,維度要求低的場景,只需要做簡單的指標聚合,附帶退化維度寫出即可。

          圖片

          和Lambda架構不同,我們的低時延分析需求更多地由近實時分析層承擔,針對不同需求,我們嘗試過很多不同的組件,根據不同的使用場景,比如全文查找、強聚合、上下文分析等等,我們會選擇不同的組件?;诓煌慕M件,我們在上層有去嘗試做不同的應用實踐。

           

          三、應用實踐

          1、機器學習

          圖片

          在機器學習方面,騰訊問卷有基于用戶答題的行為,構建用戶答題的時間序列,得到一個評估用戶答題認真度/可信度的評估模型,目前這個工具已經上線到樣本庫填答的紅包發放鑒別能力中,提供給投放者對回答可信度和總體回答質量做相應參考。

          在最早期我們通過ES去查找單份答卷用戶在答題過程中的所有用戶行為埋點數據來構建序列數據進行預測,將預測結果寫入DB;在近一年中,我們把查詢數據源經過計算清洗后寫入按問卷和用戶為索引的ClickHouse數據源中,同時將服務與線上服務解耦,使用kafka來進行通信;最后配置了消費監控和寫入監控,使這個服務成為一個單獨維護的組件。以犧牲少許的實時性為代價大幅提升了預測速度和可用性。

          2、實時風控

          基于實時層的數據聚合分發能力,我們在問卷系統中逐步搭建了一套對問卷維度進行風控的系統。在最早期的設計中,實時層基于小時間段窗口觸發計算,從明細數據流讀取計算到寫入下游系統之間的誤差能夠控制在秒級,支持了下游規則引擎的實時特征數據檢索。

          在架構上,風控模型走的是全實時數倉鏈路,從Kafka明細中讀出前端上報信息和后端收集答卷的日志,在Flink中做實時的多窗口聚合寫入到下游的數據組件。在前期選型中,業務側希望能夠具有實時調用和短時間指標回溯的能力,同時希望系統組件能夠相對輕,能從云上購買,最后我們選定了Kafka作為業務側實時接收窗口聚合結果的組件,PostgreSQL作為小時間段的回溯組件來構建線上的風控分析。

          3、AB實驗

          目前,我們已經在SaaS平臺內對文案顯示、用戶邏輯等多方面做了很多次AB測試,通過pv上報的曝光和event埋點的轉化分析,能夠實時構建單個用戶的轉化行為;相同地,我們會對實驗時間范圍內的數據使用ClickHouse構建用戶RBM,分析不同用戶在不同實驗命中的表現情況。

          圖片

           

          總結

          通過補齊一些基本的數據架構和數據規范,目前我們在數據驅動的實踐上已經走出了一條自己的路。隨著用戶調研類組件的發展、用戶分析需求的增加,其分析能力也會隨之增強,越來越多的數據能力正在沉淀成底層功能加入到SaaS服務側。

           

          原文地址:騰訊CDC體驗設計

          作者: 騰訊CDC-erien

          轉載請注明:學UI網》數據工程在騰訊CDC的演進

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


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

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

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



          數字化浪潮下,設計師如何驅動技術類SaaS產品的升級與創新?

          seo達人


          一、應用/軟件研發就是單純的敲代碼?

          在我們傳統認知里,應用/軟件研發似乎就是開發者在黑色屏幕前敲代碼。但隨著敏捷研發DevOps理念的發展,現在的應用研發,轉變為了圍繞devops的協作工作流,涉及多樣化的工具和不同人員的協作。研發體驗的核心要素,也從“架構邏輯“向”流程和協作“發展

          圖片

          阿里巴巴應用研發平臺EMAS正是在此背景下誕生的產品。面向全端場景(移動App、H5應用、小程序、Web應用、PC應用等),基于廣泛的云原生技術(Backend as a Service、Serverless、DevOps、低代碼等),為企業、開發者提供應用研發運營管理服務。

          綜上,EMAS做為幫助企業/開發者進行應用研發的技術類SaaS產品,也面臨了全新的機遇與挑戰。

           

          二、設計師如何在技術類產品中破局?

          面對復雜的技術類產品,由于技術的高門檻及業務的復雜性,很多時候設計師都是被動的接受需求。但我們也在思考,設計師如何在技術類產品中破局,如何發揮更大的價值。

          因此,我們嘗試站在更高的全局視角而不是設計的本位視角,主動發現問題提出設計策略,實現設計執行到設計驅動的突破。

          全局視角的主動洞察

          懷著讓設計發揮更大價值的初心,我們深入業務主動邀約產品關鍵角色深入溝通,了解產品歷史背景、技術邏輯及痛點,并發起產品的易用性測試、體驗走查及競品分析等動作,站在全局視角從產品側、用戶側和體驗側多個角度進行深入洞察,形成全面的“產品體檢報告”總結舊版EMAS所存在的問題:

          圖片

          1.產品側洞察——子產品無合力、相互割裂缺乏串聯

          EMAS圍繞應用全生命周期包含12款子產品,卻是各個子產品的拼接,功能獨立零散,未形成一站式研發體驗。各個子產品也是以獨立垂直工具視角建設,缺乏用戶及客戶業務視角。

          2.用戶側洞察——產品價值/能力感知弱、沒有攻占開發者心智

          多數用戶并沒有完全理解產品的價值和能力,EMAS沒有攻占開發者心智。

          3.體驗側洞察——產品易用性差、滿意度低

          通過用戶調研的量表評分,易用性及滿意度評分低,雖然用戶對產品功能能力認可,但對產品使用體驗滿意度差。

           

          三、設計驅動產品創新升級

          基于以上分析,我們與關鍵決策人積極溝通,匯報關鍵問題及設計策略,驅動產品的升級創新,進行EMAS3.0 一站式應用研發平臺的打造。通過咬合3個業務關鍵問題,制定出以下的設計策略:

          圖片

           

          〇 策略一:打造一站式研發體驗

          打造一站式、平臺化研發流程體驗,為客戶提供完整價值閉環。通過一站式獨立控制臺建設,進行構建-測試-發布-運維-運營全鏈路打通串聯。

          1.應用全生命周期協同流程梳理:

          舊版的EMAS是各個子產品的拼接,功能獨立零散,未形成一站式的研發體驗。經數據分析,產品的交叉使用率也非常的低。因此,設計首先從應用全生命周期角度,梳理了不同角色的協作流、任務流,并串聯之前子產品沒有打通的數據流,進行構建-測試-發布-運維-運營全鏈路打通串聯。

          圖片

          2.用戶視角的產品架構重構

          并且在舊版的EMAS中,各個子產品是以垂直工具的視角進行建設,每個子產品的架構邏輯都不同,也沒有形成合理的聯動。進一步,設計驅動以用戶視角進行產品的架構重構,以”項目“作為統一頂層邏輯,并兼容技術架構,進行圍繞應用的的管理,形成一站式應用研發全周期流程。

          圖片

          3.一站式獨立控制臺建設

          在產品形態上,形成了以下結構的一站式獨立的Studio框架,讓用戶能夠清晰、流暢的產品體系中進行應用構建。

          圖片

          4.一站式全景產品架構

          最終,EMAS3.0一站式應用研發平臺實現編碼-構建-測試-發布-運維-運營全鏈路的打通串聯。應用阿里云的Real3D能力,打造一站式產品全景3D互動場景,圍繞DevOps協作流串聯各個子產品,形成一站式應用平臺。

          通過流程化研發指引幫助新手開發者快速開啟應用研發流程,也能幫助團隊不同角色成員進行項目全局管理和關鍵指標監控

          圖片

           

          〇 策略二:品牌建設與產品價值傳遞

          通過品牌建設與開發者心智構建,強化產品價值/能力透傳

          1.增強產品價值/能力透傳設計

          舊版的EMAS試用體驗差,且在首頁、功能初始頁等場景也缺乏產品能力的有效展示與使用引導。因此,我們在多個場域進行產品信息的有效展示及引導,行產品價值/能力透傳的核心場域的典型場景建設,幫助用戶快速感知產品價值。

          圖片

          2.品牌建設,建立用戶心智

          研究競品會發現:大部分競品缺少獨特的品牌語言——用戶很難區分彼此,無法激發用戶對產品的興趣 EMAS希望提供什么樣的形象與感受,現有的視覺設計語言能否讓用戶產生所預設的共鳴?因此差異化的牌語言,能體現EMAS獨有的品牌價值,在用戶心智建立準確的品牌形象。

          首先,我們基于“卡普費雷品牌識別棱鏡”從品牌定位&品牌表現的維度來挖掘產品形象,在個性、文化、形象、關系、體現、外貌6個緯度對品牌進行定位

          圖片

          明確了“Make smart app”這一產品Slogan,相應確定了產品“智能、高效、敏捷、靈動”的視覺語義,并從從個層面定義Smart,從各設計元素中挖掘smart的特性,來傳達品牌。

          圖片

          通過品牌logo的三角圖形元素貫穿運用到整個產品的 布局、插畫等元素,增加符號化元素的透出率,提升品牌的感知。

          圖片
          圖片

          產品形象采用3D Pictogram配上動效,通過材質和光影的變化,更豐富傳達各子產品的特點,體感更強。

          圖片

           

          〇 策略三:易用性改進提升研發效能

          舊版EMAS經過用戶調研的量表評分,產品易用性為6.8分,未達到優秀標準,在整體研發易操作性及易學性等方面存在20+體驗問題。

          圖片

          因此,我們基進行了深入的易用性度量和測試,挖掘出20+體驗問題,除了問題的單點解決外,我們也形成了系統化的解決方案,形成了“一鍵接入”、”流水線編排““跨產品引導”、”場景化開發指引“等易用性策略和范式。最終形成了完善的一站式應用研發設計體系。

          圖片

           

          四、技術類SaaS產品設計方法

          通過以上項目的體系化設計的最佳實踐,我們逐漸總結出一套技術類SaaS產品創新設計方法:基于“產品/技術能力”、“產品價值傳遞”、“使用體驗”及“ARR”四個產品關鍵要素的抽取和分析,明確了“連貫度”、“價值感”、“易用性”、“轉化率”四大開發者體驗原則,進而形成一系列體驗設計要素,指導設計師有章可循的去進行技術類產品的思考和設計工作。

          圖片

          設計師是人與科技間的鏈接者,在數字化變革的浪潮中發揮著重要的作用,通過對用戶、產品、體驗的深度洞察,讓科技逐步普惠化、民主化。

           

          原文地址: 阿里云設計中心(公眾號)

          作者: 阿里云設計中心

          轉載請注明:學UI網》數字化浪潮下,設計師如何驅動技術類SaaS產品的升級與創新?

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

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

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

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

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



          效率必備!這15個圖像處理網站你收藏了嗎?

          seo達人



          一、Squoosh

          網站鏈接:https://squoosh.app/editor

          圖片

          圖片

          Squoosh 是谷歌推出的一款在線圖像壓縮工具,可點擊選擇或直接往里面拖圖片,在左下方可選擇想要生成的圖片格式,右下方選擇圖片質量,再下載即可。

           

          二、Bejson

          網站鏈接:https://www.bejson.com/ui/compress_img/

          圖片

          非常全面的一個工具類網站,不但可以壓縮圖片還可以在線加水印、轉化格式、裁剪等。

           

          三、iLoveIMG

          網站鏈接:https://www.iloveimg.com/zh-cn

          圖片

          國外的一款工具網站可以提供圖片壓縮、裁剪、轉換文件,以及調整文件的大小等。還可以通過幾個點擊來制作GIF動圖!這些都是免費的。支持壓縮JPG, PNG,SVG或GIF等格式圖片。

           

          四、TinyPNG

          網站鏈接:https://tinypng.com/

          圖片

          之前老叫它“熊貓吃竹子”壓縮站,一個專門處理png格式的圖片壓縮網站非常好用,不過免費用戶單張圖片不能超過5m 單次不能超過20張。

           

          五、圖好快

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

          圖片

          圖好快在線壓縮網站,可以有損壓縮手動控制圖片的壓縮質量,部分功能是收費的,普通用戶每天可掃描登錄免費試用一次。

           

          六、Smallpdf

          網站鏈接:https://smallpdf.com/compress-pdf

          圖片

          圖片

          國外專門處理PDF在線壓縮、編輯的網站。

           

          七、Optimizilla

          網站鏈接:https://imagecompressor.com/zh/

          圖片

          國外JPEG、GIF、PNG格式圖片壓縮站。

           

          八、Ezgif

          網站鏈接:https://ezgif.com/

          圖片

          Ezgif.com 是一個簡單的在線 GIF 制作工具和用于基本動畫 GIF 編輯的工具集。在這里,您可以創建、調整大小、裁剪、反轉、優化和對 GIF 應用一些效果。

           

          九、ilovepdf

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

          圖片

          在線處理PDF工具站。

           

          十、易轉換

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

          圖片

          免費好用的文件轉換工具。

           

          十一、Aconvert

          網站鏈接:https://www.aconvert.com/cn/image/

          圖片

          Aconvert.com是一個寶藏工具站,可以在線轉換各類PDF,文檔,電子書,圖像,圖標,視頻,音頻等格式和壓縮文件,非常方便。

           

          十二、bigjpg

          網站鏈接:https://bigjpg.com/

          圖片

          通過AI算法可以在線放大圖片,提升圖片質量。你可以選擇在線上傳處理(較慢)或者下載客戶端。

           

          十三、removeby

          網站鏈接:https://www.remove.bg/zh/upload

          圖片

          自動摳圖神器,上傳圖片一鍵摳圖。

           

          十四、搞定摳圖

          網站鏈接:https://koutu.gaoding.com/

          圖片

          搞定設計出品的AI智能口摳圖工具,還有好多好玩的可以去探索。

           

          十五、圖象

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

          圖片

          圖象是一個聚焦國內外可視化創意的社區,里面的作品質量都非常不錯,不管是工作中找靈感、還是上傳作品宣傳個人IP都是一個不錯的選擇。

           

          原文地址:小六可視化設計(公眾號)

          作者:Mr小六

          轉載請注明:學UI網》效率必備!這15個圖像處理網站你收藏了嗎?

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

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

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

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

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



          內容創作平臺的解析與分享

          seo達人


          圖片

           

          定義

          其實內容創作平臺嚴格意義上來講,算是B端產品的運營管理類型的產品(如果不清楚運營管理類型的產品建議查看我之前文章 ),它主要依附于大型的C端產品,幫助這些產品去連接更多有價值的內容

          B端設計指南 – 產品類型

          在內容管理型產品當中,主要是作為平臺方,提供給在平臺當中創作的人們進行使用
          舉一個例子,我在 Youtube 上傳了一個視頻,我想要了解我這個視頻用戶的真實反饋,以及對于自己的作品進行標簽、標題上的優化,這樣,我便可以打開 Youtube Studio 進行查看

          而目前這類內容創作平臺,就是提供給這些內容創作者進行使用,因此這類型的產品主要分為兩類:

          • 視頻:Youtube、Bilibili、抖音、快手、西瓜視頻…
          • 文字:微信公眾號、頭條號、知乎、站酷、語雀…

          內容創作平臺與CMS較為類似,CMS是 Content Management System 的縮寫,意思為“網站內容管理系統”, 用來管理網站后臺,編輯網站前臺

          比如我們會經常聽到的 WordPress 就是一個非常典型的 CMS  產品,CMS大多數需要你自行搭建,而上方提到的內容創作平臺,則是別人已經提供好了對應的基礎功能,你只需要使用即可(這個概念與 SaaS 有一些些雷同)

          圖片

          而內容創作平臺更加垂類一些,主要針對的就是 作者投遞的管理平臺

           

          業務

          嚴格意義上來說,內容創作平臺只會有一個角色,也就是內容創作者,只是隨著平臺的不斷擴大,后續會有很多運營等相關職位,比如 微信公眾號,它本身只支持創作者進入,隨著平臺規模不斷擴大,逐漸演變成 三類固定角色 提供給用戶進行綁定

          當然內容創作平臺的整體設計,一定要與之前平臺固有風格保持一直,這樣才能夠有統一的風格

          圖片

          圖片

           

          頁面

          在整個內容創作平臺當中,會有很多非常典型的頁面,作為設計師,我們就來看看典型頁面如何下手

           

          1、內容編輯頁

          在內容創作平臺當中,必須要提供的功能便是內容上傳,因為無論是文章、又或是視頻,都需要創作者進行上傳、編輯
          因此作為設計師,我們首先應該關注的便是這個內容編輯頁的使用體驗

          比如文章類的產品中,我們需要去編輯內容排版,那就一定會用到富文本編輯器。富文本編輯器目前會分為兩個流派,一類就是傳統的 頂部編輯器 ,一類是 Block 編輯器

          頂部編輯器:其實這個我不知道專業的術語,根據外形隨意起的名字

          Block 編輯器:畢竟我是深度 Notion+飛書的用戶,如果對這個感興趣,可以去到文末留言,我們之后單獨出一篇文章來講

          圖片

          不過目前,內容創作平臺的產品都是按照基本的 富文本頂部編輯器的方式來進行,Block 更多只在筆記軟件當中出現

          圖片

          這里分享一些開源的富文本編輯器,很多B端產品可以讓前端直接使用

          https://www.wangeditor.com/

          https://summernote.org/

          https://dhtmlx.com/docs/products/dhtmlxRichText/

          再比如視頻類的產品,就主要圍繞 上傳視頻、設置封面、標題、等內容進行展開,其實功能上都大同小異

          圖片

          因此你會發現,內容編輯部分,大家的功能都會比較趨同(因為無論是 視頻還是文字媒介,因為前臺系統對于內容的要求都基本一致,因此如果想要了解前后臺系統的邏輯關系,其實可以從基礎的內容創作平臺入手去做分析)

           

          2、數據查看頁

          數據查看頁在內容創作平臺非常重要,因為絕大多數內容創作者都會非常關心自己的內容數據情況,可以通過數據,來為自己的內容方向進行合理的規劃
          可以把數據查看頁比作是一個小型的 數據分析 產品,區別的是 內容創作平臺 的數據查看,是已經提供了默認的分析維度與指標,你只能通過篩選去查看數據之間的關系,這里就不再贅述,給大家看看不同產品的數據查看頁,了解它們的設計方式

          圖片

          圖片

          圖片

           

          3、其他頁面

          當然這類產品還會涉及到比如 常見話題、熱門話題、素材庫 等等…  完整的圖片內容我就打包放在圖庫平臺上,大家可以進入查看

          花瓣:www.huaban.com/user/youthce

          語雀:www.yuque.com/youthce/pic/

          圖片

           

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

          作者:CE青年

          轉載請注明:學UI網》內容創作平臺的解析與分享

          藍藍設計建立了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国产综合