<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設計者

          這些天遇到了些問題,在進行視覺設計的時候,老是覺得自己設計上差點意思,總覺的哪里不太滿意。

          也不是不好看,就是覺得還能夠設計得更加深入些,不管是從板式、字體、圖形、顏色等方面。

          為了找到解決的辦法,我不斷的去欣賞別人的作品,從站酷到behance,從behance到各類獲獎作品。

          嗯...為什么別人能夠有這么新穎的設計想法?我總結來幾點大家。

          借用大師的元素

          這是世界三大平面設計之一岡特·蘭堡的作品。

          這是不是會給你一些靈感?我第一眼感覺這有點熟悉,似乎在別人的作品中運用過這種版式、元素。

          在這版設計中,與岡特·蘭堡的作品相似之處就有:黃底黑字的橫條和藍色調的背景,再結合一些設計圖形,就能產生出一種新穎的設計風格。

          就是在大師的視覺中提取元素靈感進行轉化,運用在我們的設計中會有不一樣的視覺體驗。

          我們接著看他的其他作品。

          這張作品就能給我很不錯的靈感,把想要突出的地方用強烈的對比手法進行設計。或者將想要突出的元素進行特殊化處理。

          類似于這樣的作品。

          當靈感有限的時候,我們就可以靜下心來分析一下其他大師的作品,認真觀察大師的作品,有哪些地方是可以提取靈感出來。

          再結合自己的設計讓其提高升華,讓自己的作品耳目一新,使作品獲得新生。

          保持這種發掘思維去分析作品,久而久之你就會有源源不斷的靈感浮現腦海里。

          嘗試做出差異化

          你走你的陽關道,我過我的獨木橋,反其道而行,雖然在國內市場不太友好,但是嘗試一下走獨木橋的感覺,是否會帶給你不一樣的反饋。

          特立獨行的視覺,做出差異化會給人們一種新穎的視覺觀感,就會吸引用戶,就比如喬布斯手下的蘋果產品,打破了當時對電子產品的認知,且對細節的把控極致到位。

          人們其實都有視覺疲勞,長時間的保持這種風格,難免會讓人覺得平庸,突然出現的新穎視覺或想法,就能夠打破這種局面。

          好比這個官網,首頁第一屏在我們印象中就是一個banner,在我們做網站的時候就認為第一屏就是應該放個banner在那里!

          我們就好像思維固化了,第一屏就非得是個banner嗎?我們可以根據企業的屬性進行判斷,我們是否還有更優的方案,盡可能的賦予設計靈魂。

          類似于這樣的首頁是否就是反其道而行呢?與同行就拉開差別了呢?自己品牌更加深入人心呢?

          比如一個正常的首頁,在開始設計時,最頂部的是導航欄,導航欄中最左邊是一個logo,其次在右邊是產品介紹等等...

          我們有沒有想過為什么會這么布局?我們可以反問自己:這種布局是最合適的嗎?最好看的嗎?還有沒有更加合適的方式?

          這種方式把logo放中間突出品牌就挺不錯的。還有一些把導航欄折疊起來的。

          剛開始我們是這樣布局的,這就很普通沒有做出差異化。

          我們是不是可以把文案進行精細處理,提取重要的詞句,把他們放大,要有視覺沖擊力,重要的元素再次放大!

          這樣布局方式就新穎很多,突出了主要文案,加強了視覺沖擊,又加深了品牌印象。

          擴大搜索范圍

          沒有新穎的想法往往是自己的思路、思維還沒有打開,開始進行視覺設計的時候:選擇這類行業自己認為還不錯的視覺方向,開始進行視覺輸出。

          那就錯了,假如開始設計APP,只找一些APP的視覺稿那肯定是不夠的,風格就比較單一,你的視覺參考都不夠豐富,怎么能夠做出讓人眼前一亮的風格!

          我們不妨跳出圈子出來觀察!

          可以去看別人品牌設計的、數字藝術設計的、圖形設計的、包裝設計的、服裝設計的甚至產品設計的都可以。有可能是某一個小地方讓你有所啟發。

          大量的看,覺得很好的視覺就思考:我們的視覺是這樣的會不會更好!

          就比如這張視覺稿,色彩很艷麗,顏色跨度很大,有黑色的粗線,如果把這風格運用在APP視覺上會是怎樣的效果?

          看到一張足夠吸引你的視覺稿,就想想如何轉化到工作中去,那可能就會有不一樣的視覺風格。

          所以在設定風格時,

          不局限于同行。

          不局限于風格。

          打開搜索范圍,讓頭腦風暴更猛一些。

          總結

          做設計不是完成任務,所思考的是多方面的,好的設計是得花很多心思的;得保持冷靜,讓自己放松,著急或者有壓力的心境下你的思緒是亂的,根本就做不了設計。

          所以有時候做設計得臉皮厚一些。

          再者平時的審美積累是非常重要的,這個就相當于你的底子,有底子往上爬的速度也會快一些。

          做到這些你就離大師不遠了!

          最后,設計是永無止境的探索!加油共勉。


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系。 



          作者:橙汁    來源:站酷





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



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

          這幾個知識點終于解決了我配色的一大難題!

          資深UI設計者

          1.亮色與重色的比例

          我們在設定界面風格的時候,少不了顏色的配比,但顏色一定是講究平衡的,其中一個最重要的平衡就是明暗的平衡,如果你的界面全屏都是很亮的顏色,那就會導致非常的刺眼,比如像瑞文同學的這個顏色設定:


          就是過于明亮了,其實當我們的顏色過于明亮時,最常用的一種方式就是,直接用黑色去壓住亮色,像下面這組圖標的做法一樣,減少亮部顏色,直接增加黑色:



          這樣就不會那么刺眼了,當我們明白了底層原理之后,再去優化配色,我們看前后的變化:


          這樣就會比之前舒服很多,當然,也可以試試頭圖變成黑色,按鈕變成綠色,把重色面積繼續加大,但不管哪一種,都會比之前全是亮色要好很多!

          2.這個改動可愛了太多

          小A同學是一個非常有潛力的同學,但是最開始交上來的吉祥物作業,也不是很理想,效果如下:


          話不多說,我們就改動一個點,五官緊湊,看看前后效果對比:



          可愛的程度完全不在一個檔次,我們再看看小A同學后面的延展效果:


          比之前強了很多很多倍,就是因為一個五官緊湊。

          3.對顏色的敏銳度

          我們在做練習的時候,很重要的一個鍛煉點就是視覺敏銳度,能夠敏銳的發現哪里不舒服,這個真的很重要。

          而視覺敏銳度里面就有一個維度是顏色,比如我們在看下面一兜糖同學做的質感圖標作業:


          我們應該快速的看出,第一個圖標顏色不是很和諧,沒有后面兩個那么舒服,主要是那個藍色有點臟,我們看優化后的三個圖標:


          就比之前要統一舒服很多。

          當我們的練習達到一定量時,敏銳度自然就會提高很多,所以一定要多去練習,把敏銳度這一塊提高上來。

          4.綠色好難配?。?/strong>

          這是潘子同學的疑惑點:



          他感覺綠色好難啊,第一次交上來的作業如下:


          先不說造型問題,就光說顏色,就有點單薄,也有點太亮了,還有就是顏色比較正。

          其實我們在配綠色的時候,只要把綠色加一點藍色,或者加一點黃色就會讓顏色好看很多。



          后來潘子同學把顏色進行了優化:



          這樣就比之前還要多了。

          還有包括檸檬同學用的綠色:


          也是比較好看的。

          這回再用綠色的時候,大家清楚怎么好看了吧!

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

          作者:菜心輕量文    來源:站酷


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

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

          再也不怕做排行等級類的需求了!

          資深UI設計者

          大家平時多的界面應該都是常規類型的居多,應該很少會接觸到游戲類型的界面設計吧?哈哈。今天就給大家分享一個游戲類型的排行榜界面,看看是怎么做。和咱平時的又有什么不同呢?

          先來看看效果:

          確實和普通頁面還是有很大差異的哈,可以發現所有的模塊更風格化,也蘊含了光影細節在里面。

          這樣一張界面細節很多,我們今天主要講講1、2、3名的頭像框怎么做出等級差異。

          1. 明確風格

          首先我們就要先明確游戲風格的界面和普通界面有什么不同,特點有哪些,造型、光影、質感等等。

          明確了才能動手去執行。

          2. 等級差異

          大家平時應該也會遇到很多排行類的需求,需要做出等級感。那是如果如何表現等級差異的呢?我主要是從以下三個點去推進,分享給大家:

          2.1顏色

          ·主色:

          首先就是三個等級的顏色差異

          比如第一名最尊貴,我們就可以選用和背景色對比最強烈的金色去表現。

          金色本身也帶有尊貴感。

          第二名和第三名的顏色就可以選用背景的類似色或者同類色比如紫色和藍色,讓它們在視覺上天然的弱化下去一個等級。

          ·微漸變:

          采用微漸變的形式,讓顏色更豐富,不會顯得很平,同時靠顏色的變化也能表現出輕微的質感。

          2.2復雜度

          第二點就是復雜度了。

          這個很好理解,就是越重要的,在造型上就會有越多的細節和層次。第一名層次細節非常豐富,第三名就簡簡單單的,從造型上表現出等級差異感。

          2.3大小

          比較常規的一個方法就是大小差異了,第一名最大,二三名一樣大就可以了。

          3.細節精致度

          明白了原理,怎么把細節做到位也是很重要的,我們拿第一名框的造型舉例,說說是怎么做出復雜度這么高的造型的。

          3.1 重復

          先有一個基礎圓,然后我們重復幾個。這一步很簡單,很多同學都會做。但也有很多同學到這就做不下去了。重點要學會后面怎么做。

          3.2 圓的對比

          全是相同的圓就會顯得很重復,沒有細節。我們可以調整圓線段的不同粗細、形式去增加細節。

          把他們組合到一起看看。

          有點那味了,有些同學做到這一步就不知道該怎么繼續了,可能會繼續加圓,這肯定是不行的。

          3.3 豐富基礎形

          如果我們繼續加圓圈可能又會變得重復了,這是因為我們的基礎形單一,所以我們要加入別的基礎性在畫面里去。

          為了方便理解,我們加入一個比較直觀的形狀正方形看看:

          正方形組合又組成很多三角形,造型一下就豐富了很多!所以基礎形狀的多樣性是我們豐富造型很重要的一個點哦。

          本案例就加入了其它相對更復雜一些的基礎形,效果會更細膩一些,但道理是相同的。

          4. 加入點綴和光影

          因為是游戲風格的,加上一點外發光更有感覺,再加上一些星星點綴,可以進一步提升豐富度。

          看下頁面效果:

          等級差異明顯,造型精致,整體還是比較滿意的。


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

          作者:菜心輕量文    來源:站酷


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

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

          不知道怎么繼續優化?那是你沒看這幾點!

          資深UI設計者

          01 顏色掉層次了

          很多時候,我們會發現,我們加的質感有點平,比如像下面這種:



          很明顯,這種地方就有點平:



          原因就是因為“顏色掉層次了”,我們只需要在他的中間再加一層顏色,就可以讓它的質感飽滿起來。

          具體步驟就是,我們可以先給它加一些“形狀”然后進行羽化:



          我們可以看下前后對比,這樣就不會那么平了:



          一旦發現質感有點平,就可以用這種“顏色掉層次”的思維去嘗試優化!

          02 顏色要透

          這是一位同學做的質感臨摹練習:



          顏色有點太悶了,不夠透徹,我們先來把顏色弄的透一點,我用圓形來表示,首先我們的顏色不能太重,弄個小漸變:



          這是我們的一個基礎,如果感覺明暗對比不夠,可以再適當加強對比:



          然后加一點反光,這是非常靈魂的一個步驟:



          然后再加一點左上角的高光:



          這時候我們再來加中間的暗部形狀,我們看原版的有一個很大的問題,就是中間的暗部愛心和背景有點糊在一起了:



          就是因為兩層都是暗色,所以沒有區分開,所以這也是為什么我們把背景色調亮的一個原因,我們把中間的形狀加上去:



          然后再來個內陰影和邊緣光:



          大功告成,我們再來對比下前后的質感:



          是不是好了很多。

          03 不重要的顏色千萬不能高飽和

          有時候我們會覺得自己的設計有點主次不分,這種感覺往往和顏色有關。

          下面兩個圓形,你會覺得那個更吸引你的眼球:



          對,沒錯,肯定是第一個,因為第一個顏色的飽和度比較高,顏色比較純,所以更加吸引眼球。

          那我們看下面跟米同學的啟動圖標作業:



          感覺所有顏色有點糊在一起,甚至感覺背景比形象還要吸引眼球,就是因為背景的顏色飽和度太高了!

          當跟米把背景的顏色飽和度降低時,我們再看下效果:



          我們可以很清晰的把視線聚焦在吉祥物的身上。

          所以我們在做視覺的時候,一定要注意,你的重點是什么,注意飽和度對比、明暗對比,千萬不要本末倒置!

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

          作者:菜心輕量文    來源:站酷


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

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

          整理原創寫系列欣賞之-QQ游戲中心體驗升級

          資深UI設計者

          一、改版背景
          QQ游戲中心是手Q用戶觸達游戲的重要場景,每天有海量用戶來此進行游戲相關的互動操作,隨著產品的功能迭代,體驗的逐步更新,用戶對QQ游戲中心也有著更多更強的訴求。
          在2022年的研究報告《游戲中心核心價值及機會點定性研究》中發現用戶在游戲中心內最為關心的是領取福利,通過在游戲中心獲得游戲相關的禮品道具幫助提升游戲體驗。同時用戶對游戲有著較強的社交感、成就感、沉浸感訴求。
          隨著產品目標的調整,游戲中心的功能也逐漸豐富化,除開領福利和找游戲,用戶可以在此消費游戲內容、購買游戲道具、以及使用游戲相關功能等,用戶觸達游戲的方式變得更加多元,用戶的粘黏性也進一步提升,產品依勢也需要打造更好的產品游戲氛圍感品牌印象來建立用戶口碑、提升轉化。
          同時,以“生機”為設計理念的QQ,也進行了體驗上的版本迭代,游戲中心作為QQ內的重要業務,也將跟隨緊隨其后完成體驗的更迭,提升用戶體驗、延續QQ品牌基因。


          二、制定設計策略
          對用戶、產品、設計的訴求進行整合后,梳理出本次改版的基本設計思路——在提升產品用戶體驗的基礎上,以品牌符號強化產品的記憶點,一方面從產品體驗上給用戶帶來更順暢體驗,同時以品牌圖形強化游戲感和沉浸感,提升用戶心中的品牌印象。
          優化基礎體驗:跟隨手Q“生機”設計理念和界面風格,統一UI界面樣式 ;重構內容消費的信息容器,提升內容消費效率;提升設計效率,以及打造更高效團隊合作方式。
          打造品牌記憶點:通過品牌基因的植入、游戲氛圍感的增強,讓產品更具辨識度,同時加強產品的游戲屬性,強化用戶的沉浸感。

          游戲中心改版總覽圖

          三、解決問題
          3.1 基礎體驗優化
          游戲中心本次改版在體驗上的優化聚焦在3方面:


          ① 煥新界面
          隨著產品功能的擴充和迭代,游戲中心的界面風格開始趨于參差,同時伴隨QQ設計規范——Q語言的更新,游戲中心的首要任務即完成界面風格的統一。


          · 統一風格


          以往的游戲中心,采用更為豐富多彩的設計語言,導致從手Q進到游戲中心較為強烈的割裂感。而本次改版中延續手Q的簡約透氣的風格表現,通過色彩樣式、組件、圓角等設計要素將界面進行規范統一,保證體驗的一致性。

          · 求同存異


          在首頁、游戲、攻略這3個場景,界面的風格向手Q設計語言靠攏,色調以手Q藍為主,以相對簡潔的界面風格保證內容傳遞的高效性。
          同時根據業務訴求,也保持了游戲中心自有特色——在福利和商城tab兩個主場景下強化游戲氛圍感:采用3D圖形和多彩圖標、界面主色調使用情緒更高的橙黃色,讓整體感知更符合產品的特質。


          除開界面風格,圖標的設計也融入了游戲中心的特色——保持基礎型與手Q圖標一致外,同時將一些圖標通過游戲化語義表達出來,使其更具趣味性和游戲感。



          ②重構容器


          · 優化內容消費體驗


          內容卡片結構化
          游戲中心的消費內容來源豐富,包含問答站、小世界、頻道等多處內容源,給用戶帶來海量內容的同時,也導致了信息容器的冗雜,增加用戶的認知負擔、降低瀏覽效率。
          在前期和產品的梳理中,發現游戲中心的feed類型可以分為4大類,總計有21種樣式。為解決用戶的瀏覽體驗問題,對feeds結構進行了結構化整理,以流式布局將所有樣式整合為6個部分,基于不同消費內容去排列組合feed類型,簡化產品邏輯,同時用戶更聚焦內容閱讀。

          · 提升游戲分發效率


          游戲tab作為游戲分發的主要場景,改版前主要以橫向列表容器去承載游戲信息,用戶探索新游的效率較低,同時雷同化的結構,容易瀏覽疲勞。
          針對以上情況,在頁面設計上豐富了承載容器的樣式,采用高效率的游戲圖標排列或者游戲合集卡片,提高了瀏覽效率,也讓用戶更容易命中自己鐘愛的游戲類型,不同的容器類型組合也讓整個瀏覽更有節奏,減少疲勞感。


          ③提升設計效率
          游戲中心在以往產品功能的快速迭代中,由于規范和組件的不完善以及和開發同學協作模式的不確定性,讓產品界面的實現往往不盡滿意,無論是開發效率還是還原程度都受到一定的影響,最終導致用戶體驗的不完滿,所以本次的改版,提升設計的效率也是體驗提升的重要一環


          · 統一設計規范


          界面的基礎樣式和控件,和手Q基本規范保持一致,包括顏色、圖標風格、基礎控件、圓角、柵格等。同時基于業務的訴求,我們在手Q基礎上拉出一條規范支線用于游戲中心的設計——主要在基礎色、圖標等拓展了更多樣式。

          · 提升協作效率


          以往黑夜模式的適配,開發和設計需要同時輸出和還原兩次設計稿,導致適配成本較高。在本次改版中,將新風格頁面的組件token化,搭建起設計和開發之間界面樣式的映射關系,開發和設計只需還原一次設計稿,即可完成黑夜模式的適配,達到高效設計、快速上線迭代目的。



          黑夜模式的上線,也提升了游戲中心的瀏覽感受,讓用戶的體驗更友好、更親近用戶,回歸Q語言親和自然的設計原則。




          3.2 打造品牌記憶點
          ① 打造品牌記憶符號
          QQ圍繞社交有效性、社交廣度與深度、社交動力等維度,打造一個積極向上充滿生命力的社交生態體系。生機的理念承載樂觀活力與積極延續,具備有序和精致的特點,也象征萬物發展所蘊含的生命力。——Q語言-設計理念
          在游戲的世界觀中,“能量”經常作為源動力元素以推動游戲進展,QQ游戲中心承接Q語言“生機”的設計理念,提煉衍生“能量”概念,以能量元素將生機理念具像化,賦予產品積極快樂充滿活力的品牌感知。


          在確定能量作為核心關鍵詞后,對此發進行情緒版關鍵詞的發散,結合前文提到各方訴求,最終把關鍵詞鎖定到能量、游戲感、氛圍上。


          ② 品牌基因拓展
          在對關鍵詞的發散階段,討論和嘗試了多種能將“能量”概念視覺化的元素,考慮到UI界面的延展性和可用性,最終把可視化元素鎖定在寶石上——寶石造型上相對簡單,光在動畫塑造上能擁有多樣豐富的表現形式。
          為契合概念的設定和后續的延展,我們把寶石定義為能量石。在能量石的設計上,特意營造出能量充盈、光感琉璃的視覺感受,造型上采用多面切割結構,色彩上兼容藍色和黃色兩種色調,以匹配游戲中心的整體界面風格。



          除開主體圖形,也從其他設計維度去落地能量的設計理念:


          • 圖形


          能量之石
          除開前面的基礎寶石,也設計了多種能量石的造型,并兼容磨砂質感,以應對不同場景使用。

           


          在UI界面的運用
          在產品的核心界面上,將能量石作為背景圖案使用,強化品牌和氛圍感;
          和業務也進行結合——以能量石將商城的幸運值圖形化,讓品牌和功能直接連接起來;
          把能量石材質和游戲元素進行結合——王者皮膚墻功能內,將游戲LOGO賦予能量石材質,讓游戲和平臺品牌之間產生品牌上的關聯。

          能量之石圖形在界面內的運用


          與3D圖形的結合
          寶箱是游戲中心一個重要道具,每日有大量活躍用戶來游戲中心做任務開寶箱,開寶箱成為了產品觸達用戶的高頻場景。


          因此對寶箱進行了設計,希望在高觸發場景加強用戶的品牌感知,強化游戲感。寶箱在造型上采用了和寶石一樣的切割造型,同時寶箱上加入了能量石,把3D圖形和能量石進行結合。


          除開寶箱外,對業務內常用的圖標進行了3D化處理。


          3D圖形在界面內的運用


          · 動效


          在動效的設計上,也承接能量的設計理念,以光為設計靈感,設計了游戲感強烈,電光火石般的的動畫效果——能量光,用于界面內UI界面和3D圖形動畫,強化整個產品的游戲氛圍感。 

          動效在界面中的運用


          · 顏色


          在界面顏色的使用上,主界面延續手Q的標準藍色調,包括控件、字色也與手Q統一,保證界面整體色調的延續性。同時基于業務訴求,拓展了情緒感知更強烈的“游戲橙”。


          對于以內容體驗為主的頁面——比如游戲中心的首頁、游戲發現頁、攻略頁,使用手Q的標準藍;在需要強氛圍和游戲感的頁面——游戲福利頁和游戲商城頁,采用游戲橙。


          · 質感


          由于游戲中心內多處用到的3D元素,對3D的質感進行了規范統一。


          材質
          考慮到UI界面的通用性,避免3D材質的喧賓奪主,材質風格以簡單通用為主,顏色以界面主色調為基礎,漫射材質多營造輕黏土的通用質感;針對能量石的材質,則采用光感通透的玻璃材質。



          燈光
          燈光采用基本的三點布光,旨在表現物體的質感、立體感和空間透視感。整體布光氛圍積極,友好,明朗,透傳QQ活力生動的品牌氣質。 


          · 字體


          游戲平臺內,有著較多需要運營設計的場景,字體是信息展示的重要元素,選擇了造型感較強造字工房的逼格青春字體,作為界面內的強調字體,更好的營造游戲氛圍感。   


          字體在運營活動和UI界面中的運用


          四、總結
          QQ游戲中心作為QQ用戶觸達游戲的重要途徑,用戶們在體驗鏈路上有著各式各樣的訴求。產品功能的多元化也讓用戶體驗必須追隨功能持續迭代。擁有幾億用戶的QQ,各類產品的統一優質體驗,也是“一切以用戶為中心”原則的必要體現。


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

          作者:騰訊ISUX團隊    來源:站酷


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

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

          整理原創寫系列欣賞之-淺析數字時代地圖設計

          資深UI設計者

          引言

          如今人們出行都離不開手機,都通過手機接觸過互聯網地圖,手機地圖憑借著可手勢直觀操作、地圖可快速迭代、信息可實時更新的優勢,形成了成熟的地圖交互體驗。在解析手機地圖的體驗設計前,讓我們先看看地圖的發展歷程。

          一、地圖的發展

          地圖擁有著古老的歷史,記錄了人類對世界認知的演進過程,經歷過泥板、壁畫、羊皮、紙張等載體,依據使用和文化需要擁有著豐富多樣的美術形式。不同時期、材質、美術形式的地圖見證人們認識世界的過程。

          隨著照相機和飛機的發展,出現了航空攝影測量技術,讓地圖的測繪精準度達到頂峰。交通、旅游、印刷業的發展,讓紙媒地圖開始融入人們的生活,地圖的平面設計更是百花齊放,有具體也有抽象,讓地圖兼顧功能、美感、有趣。

          再隨著衛星影像、瓦片地圖技術和互聯網的發展,人們可以日常地使用電子地圖。受限于網絡速度的限制,矢量地圖應運而生,在特定范圍顯示相應的矢量瓦片信息,讓互聯網地圖的形狀趨向統一化。

          iPhone革命性的觸屏體驗,通過手勢與地圖進行直觀自然的交互體驗,結合內置GPS、陀螺儀傳感器,小藍點成為地圖定位的通用標志,激發更多地圖的功能和創意。

          二、手機地圖的創新體驗

          手機地圖繼承了互聯網電子地圖的可快速迭代、信息可實時更新的優勢,結合觸屏手勢操作后,大大的提升了地圖展示信息的維度。電子地圖從工具逐步被引入到各種垂類服務和社交娛樂中,這些場景也不斷豐富和完善著地圖的信息。

          手勢交互讓地圖從移動到縮放都高效地動起來,激勵人們探索更廣的區域。更革命性的是讓地圖從平面到立體之間的順滑轉換,幫助人們更好的映射到真實世界。

          可視化信息是互聯網地圖的主要優勢之一,將數據轉化為可視化圖形,歸類在不同的數據層,可以單個或多個層級疊加在地圖上展示,傳達位置上的數據。

          底圖是手機地圖的基礎,通常就是地圖本身,它承托著上面的可視化信息。隨著地圖可更自由地縮放,地圖本身的內容不斷細化和歸類,在不同的縮放層級下,展示符合用戶查看場景的核心內容。

          三、手勢交互:全方位呈現地圖立面

          觸屏手勢交互有別于搖桿、鼠標、觸控筆等物理外設的控制方式,讓用戶在小小的屏幕對大范圍的地圖有更隨心所欲的操作,讓原本受矢量圖形限制的地圖有了更多層次、更豐富立面的信息呈現方式。

          單指拖動

          拖動是地圖最基本的閱讀操作,一般以用戶的定位為初始中心點,用戶可以有目的有方向地查看附近的地點。

          單指劃動

          當用戶想快速翻閱時會撥走要略過的內容,劃動模擬了這一行為。地圖被劃動后也會模擬物理世界以一定的摩擦力停下,向用戶展示地圖的新區域,是比拖動要快速的瀏覽方式。

          雙指拖動縮放

          物理控件只能讓地圖根據屏幕中心進行縮放,而觸屏縮放能讓地圖根據兩個指尖的中心點縮放,并同時位移,符合用戶空間操控認知。

          雙指劃動縮放

          劃動縮放和劃動一樣,讓用戶以更輕量的手勢加速的縮放地圖,并以一定的摩擦力減速停止,讓用戶快速找到目標位置。

          單指快捷縮放

          為了讓用戶能單手并可控地縮放地圖,不少地圖都設計了自己獨有的縮放方式。 zenly,通過屏幕兩側的邊緣,直接完成地圖的最大和最小縮放跨度。

          snapchat拖動右側邊可緣喚起縮放滑塊,并使用emoji來表達距離,充滿幽默感。

          騰訊地圖,通過劃動右側的滑塊,實現單手順滑地縮放,滑塊也支持劃動手勢。

          百度地圖,通過點擊一個縮放控件,讓地圖以當前中心點進行分段縮放。

          無限循環的地圖

          地球是圓的,可以無限巡航,一些應用將縮到最小的世界地圖做循環處理,以呼應地球的循環轉動體驗。

          方向視角切換

          在陌生的環境用戶未必能分得清楚南北方向,利用手機的陀螺儀,可以告知用戶正在面向的方向。定位按鈕的二次點擊,將地圖從南北向轉到用戶面向的方向,有助于用戶二次確認自己的定位。

          更多地圖使用了2D/3D視角的切換方式,2D是南北向的標準地圖,3D是用戶面向方向的地圖,幫助用戶更直觀地對應物理空間。

          旋轉方向

          可通過雙指或陀螺儀旋轉地圖,地圖上的文字也做出相應調整,保持水平、沿道路方向調整,以保證可讀性。

          3D的旋轉也一樣,在保持水平和沿道路方向的同時,文字保持垂直。

          當縮小到足夠遠時,用戶面向的方向意義就不大了,蘋果在縮小到一定范圍時,將地圖回彈保持南北向。

          雙指拖動調整視角

          地圖3D視角也支持自由調節,通過雙指平行的上下滑動,可以平順調整3D視圖鳥瞰的角度。

          在地圖的最低視角做回彈處理,生動不呆板。

          遠近也能影響鳥瞰的視角變化,視角越低越接近平視,拉進時有俯沖的感覺。

          四、可視化信息:生動呈現地圖動態數據

          從古代開始,人們就已經懂得通過繪制山脈、河流、海洋、建筑等對重要位置信息進行標記,地圖本身就是一個信息可視化工具。 互聯網地圖最大的優勢,就是能提供實時的信息數據。將數據標記在相應位置的坐標上,并分別歸類在不同的層級,疊加在地圖上查看。

          地圖的常用數據形式可大致分為:點、線、面、熱力圖等,一個地圖可同時喚起多種類型、多個圖層的信息內容。

          點數據

          點數據是單個地理坐標上的標記,代表該位置上的信息,是地圖上最常用的數據信息。地圖通過不同的小圖標來區分位置類型,使用頻率越高的樣式越簡潔,地標建筑做形象化圖形標識。

          聚合圖在地圖上呈現也是點數據,它實質是顯示一定區域內的信息聚合,但不強調具體的區域。聚合圖可以避免因為該區域的點數據過多,在地圖上信息過于密集。

          百度的充電樁地圖就是以區域聚合充電樁數量,根據縮放調整數據的聚合。

          騰訊地圖的文博地圖也是聚合圖,并根據文物的類型做了快速篩選。

          線數據

          線數據在地圖上呈現為線性,一般都沿著可行道路展示信息。導航路線是最常用的線數據,它提供具體行駛路線方案,并實時展示線路行駛的進度與方向。

          也有粗略表示進度的線路數據,如快遞的物流進度路線就不需要具體的實際線路,只需要示意大致進程。

          街景地圖則僅展示有全景圖的道路范圍,不提供進度與方向。

          面數據

          面數據要展示地圖上的具體區域,疫情環境下出現了區域風控需求,需通過了面數據畫出區域范圍。疫情地圖采用了聚合圖、面區塊兩種數據形式。

          zenly使用了反向的面數據,根據用戶的行走記錄,將用戶走過的范圍擦亮,用戶未走過的地方是一塊彩色的平面,充滿娛樂感。

          熱力圖

          熱力圖以特殊的高亮梯度顯示地圖上區域的熱度,熱力圖的數據不會指向地圖上具體的位置,它能呈現熱度變化的趨勢。百度地圖用熱力圖直觀展示地區上的擁擠程度。

          高德地圖的空氣質量地圖,使用聚合圖作為空氣質量評分,熱力圖作為空氣質量范圍。

          snapchat使用熱力圖來表現該區域用戶發布動態的熱度,引導用戶發現內容,由于熱力圖不指向具體位置,能更好的保護用戶隱私。

          熱力圖并不局限于面,路線也可以反映道路的熱度。Strava利用用戶的騎行數據,生成光點線路的熱力圖,可以看出哪些是熱門的騎行線路和必經地點。

          路況也是一種線性的熱力圖,路況使用按段測量的方式,熱力值的梯度相對跳躍。

          讓數據動起來

          地圖是安靜的,但真實世界是忙碌的,讓數據動起來,給地圖增添更多情感化設計,緩解用戶的等待壓力。

          忙碌的商家

          外賣小哥端午節雨中送餐

          公交努力奔來

          五、底圖:為更好呈現信息的色彩系統

          手機地圖的底圖最常使用矢量瓦片地圖,因為數據體積小,在互聯網環境下讀取速度快。矢量地圖用幾何圖形來表達區域,不展示具體細節,因此需要通過顏色去傳達不同區域的屬性或功能。

          人們對于顏色和環境是能建立一定的聯想的,如綠色想到大自然,藍色想到水,紅色想到警示。根據人們對色彩的聯想,給矢量地圖中不同屬性的區域進行配色,幫助用戶理解地圖。谷歌地圖就曾經為不同類型的信息標記出700多種顏色,最后簡化為25個顏色,形成了地圖的色彩系統。

          工具類地圖應用以地圖為核心基礎,對矢量圖形有最全面的歸類,因而擁有最豐富的配色系統。由于人們對區域功能的顏色聯想是相似的,各地圖廠商的標準地圖的配色都很接近。地圖用色素雅,才能讓多個顏色能和諧的同時存在,降低用戶的視覺疲勞,并能突出地圖上的信息圖層,讓用戶聚焦所關心的數據。

          而一些垂直場景的應用,地圖區域功能的描述相對次要,通常會對地圖的用色進行大幅度精簡。以打車應用為例,地圖用色少且色調相近,突出核心的打車狀態信息顏色,同時體現應用的品牌特色。

          不少運用地圖的概念設計中,會更極致的使用單色系地圖,僅突出數據信息的顏色,充滿未來感。

          六、未來的地圖

          隨著網絡速度的提升,手機硬件的升級,順應AR/VR技術的發展,地圖逐步進入3D和全真時代。蘋果地圖在現有的地圖的3D視圖下,已對地標建筑賦予更多細節,并在夜間模式模擬了燈光效果。

          3D地圖就像是虛擬世界中的基礎建設一樣,蘋果地圖添加精細地標模型后,同時應用到Carplay的導航中,在駕駛時可直觀看到與現實世界對應的3D地標。

          谷歌更是提出“沉浸式視圖”的高保真3D地圖,使用圖像還原一座城市的面貌,為瀏覽一座城市提供了幾乎真實的鳥瞰視角。

          同時全真模擬日照和天氣系統,和現實一樣模擬東升西落的光線方向,模擬晚上和雨天下的城市面貌。

          隨著地圖的立體全真化,地圖的數據也將向空間延伸。相對全真地圖而言,人們本身就身置真實的地圖場景中,未來借助AR設備,人們無需對照地圖即可完成導航。

          結語

          地圖歷來是人們借助藝術的手法,以極具想象力的方式對世界進行再現,它遵循科學測量的法則,使用幾何的線條和形狀對地球的進行抽象化。地圖反映了制作者對世界的認知,而現代的科學技術讓地圖呈現盡可能客觀。但地圖并非單純地呈現地球,而是呈現人們眼中的世界,它寄托著人們對美好生活的想象,更好的認識、探索和規劃世界。

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

          作者:騰訊ISUX團隊    來源:站酷


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

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

          設計的價值是保障產品用戶健康度

          ui設計分享達人

          宜家的設計為銷售負責。比如設計一個杯子,宜家的設計師需要考慮如何更多的賣出杯子。沒錯,銷售更多的產品是設計師的KPI。在這樣的目標導向下,設計師很容易去思考幾個問題。

          • 一定成本的杯子,用戶為什么要買我的產品?解決做好產品設計的動力。
          • 杯子的使用場景和定位,是刷牙杯、還是咖啡杯,它應該是家用的、還是在高端的商業場所出現?基于成本出發,對設計、原材料和制作工藝的思考。
          • 杯子在售賣時期的陳列、互動形式應該是怎樣的?基于如何能售出更多,解決產品的流量獲取問題。
          • 杯子在使用過程中的手感、方便性。基于用戶感受和體驗,解決產品和用戶互動的故事性,口碑問題。

          眾所周知,宜家的產品是場景化的,總能讓人感受到設計師們的熱情、心血和心機。設計為銷售負責,售出更多的產品確實可以作為設計有效性的驗證方式之一,但銷售量卻不能作為設計的量化標準。

          這兩者之間有很微妙的差異。我們引入一個概念叫做“數據趨勢的正向反饋”來解釋這個問題。“數據趨勢的正向反饋”,它具備允許波動,且不為一個具象的數值服務的特征。類似下圖示:

          設計為銷售負責,我們可以理解為,衡量好設計的其中一個維度標準就是銷售“數據趨勢的正向反饋”,值得注意,不是銷售量的某個單一的KPI值。因為達成某個銷售量的KPI值有很多手段,設計策略、產品策略、運營策略和營銷策略等等方式都可能完成,如果用銷售量去衡量設計,會讓設計變得不夠純碎。但是,用“數據趨勢的正向反饋”來衡量設計是否有效,用戶是否認同卻是可行的。而且,“數據趨勢的正向反饋”意味銷售量是持續增長的,哪怕有波動,哪怕有快慢,長期看能夠持續增長代表用戶是健康的。設計價值是為產品帶來健康用戶,或者說是保障產品的健康度。產品健康度一般看幾個值。

          用戶跳出率

          用戶跳出率指只訪問了入口頁面就離開的訪問量與所產生總訪問量的百分比。通?;ヂ摼W的平均跳出率大致是73%,如果你的產品跳出率超過這個值,說明用戶質量不高。

          平均訪問時長

          平均訪問時長指用戶在一次訪問中,平均使用產品的時間。互聯網的平均訪問時長大致是2分40秒。

          平均訪問頁數

          平均訪問頁數=瀏覽量(PV)/訪問次數。互聯網的平均訪問頁數大致是2頁。

          除此之外,產品還會從營收的角度看用戶支付金額、ARPU值和轉化率等等。營收指標對與設計來說,就是需要參考的趨勢數據了。了解了這些原理,怎么做呢?我們用首頁改版為例,首先按上述要求定義用戶健康度指標。假設首頁承載電商內容,根據電商特性在基礎指標之上,增加一個用戶在首頁的停留時長指標,這個指標衡量用戶是否能在首頁逛起來。

          依據這些指標,就可以搭建針對于當前項目的用戶健康度指標,在設計過程中通過對指標和指標用戶的數據分析和對指標用戶的訪談綜合得出項目的核心問題及解決思路。通過線上驗證設計方案觀測數據模型的趨勢變化,以獲得最優的設計。設計在保障產品用戶健康度上,是一個持續迭代的過程。

          產品沒有最健康,只有更健康。

          作者:ZA大人

          轉載請注明:站酷

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


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


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


          2023最新設計趨勢預測!酸性設計、NFT持續爆火!

          ui設計分享達人

          設計趨勢每年都在不斷地變化及輪回,多年前的風格技法在結合了當下的設計元素后,又會給我們展現出不同以往的主流時尚。

          “趨勢不一定每年都會更新,但趨勢是我們設計的風向標。”

          基于對網絡數據的搜集及分析,我們對2023年設計趨勢做出了預測。

          無論是否順應趨勢,我們都應該了解趨勢,擁抱變化,這才是我們設計師的準則。

          NO.1 3D立體元素

          借助當今的軟件和技術,3D創作已經不再被神話,越來越多的設計師開始在自己的作品中運用3D元素。





          下圖是Droga5為格林威治(Greenwich)創作的一系列視覺設計,這組設計利用3D圖形,創造了更醒目的視覺效果,將格林威治宣傳為倫敦的新創意社區。



          在手機品牌宣傳物料中,設計師將3D元素與手機進行了緊密結合,這樣的視覺樣式在市場中很快便能脫穎而出。



          NO.2 酸性設計

          提起“酸”,大家下意識會想到酸的味道,而所謂的酸性設計更多表現的是一種設計理念。

          酸性設計大多畫面元素豐富,各種金屬、玻璃、流體漸變、鐳射等科技感的元素都會運用其中,這也導致這類作品十分強調藝術的視覺沖擊性。



          乍一看酸性設計會給人一種混亂失調的感覺,而實際上酸性設計并不止是某一種單一的設計風格,而是一種視覺情緒的表達。當下的暗黑金屬風、二次元的可愛風、明顯的幻彩漸變風格……往往都含有酸性設計的影子。



          NO.3 復古懷舊風

          回看設計領域每一年的發展,“復古懷舊”一直是必不可少的關鍵詞。

          無論是品牌形象,亦或是包裝設計,設計師們頻頻用現代手法詮釋復古之風。



          還有傳媒集團CNET的品牌重塑,在現代時尚元素的基礎上,還融合了復古插畫,整體設計從1950-1970年代的美國新聞行業中汲取的靈感。



          NO.4 藝術襯線字體

          最近,襯線字體在品牌設計中的出鏡率極高。

          不少網站的設計都是圍繞著襯線字體作為構圖中唯一或主要的設計元素而存在。





          Stradivarius是誕生于1994年的西班牙女裝品牌,與ZARA隸屬同一公司。

          2022年2月初,Stradivarius推出了全新的Logo視覺,襯線字體更容易彰顯女性簡潔現代的氣質外,同時兼具女性力量。



          NO.5 NFT藝術

          近兩年,NFT可以說是對設計、藝術、技術行業產生沖擊最大的新事物之一了。



          NFT與平面設計聯系起來,就是我們所說的數字平面藝術。它的到來對設計師影響有很大變化,橫向能力要求有所提高,比如了解虛擬數字化設計,以及對全新審美和新三維技術有更高的要求。

          以下這幅《Metafisica》便是非常熱門的NFT作品。



          NO.6 超萌趣emoji

          表情符號在如今是一個超越文本并能得到廣泛認知、跨越文化和多領域的視覺語言。



          單一的枯燥圖標很難滿足多元化場景下情感的表達,于是,動態emoji圖標來了,它能帶來更強的視覺欣賞體驗。



          NO.7 高飽和度撞色

          高飽和度色彩是年輕的色彩,它是先天的樂天派,同時也是情感的直接表達。

          可盡管“吸睛”對品牌而言十分重要,但在設計之余要注意色彩平衡,以免混用色彩,很容易引起視覺疲憊。





          NO.8 極簡化設計

          極簡主義杜絕一切多余的裝飾,形成獨特而簡單的視覺語言,用最簡潔的表現形式勾勒出產品最基本的形態。



          簡潔的圖形設計摒棄了多余的圖案、文理等裝飾樣式,為真正重要的信息創造了呼吸的空間。

          留白,是最高級的美。



          NO.9 氛圍手寫字體

          將富有表現力的手寫字體寫在設計中,能為作品帶來不一樣的氛圍感。

          隨手一寫,便是一幅“畫”!





          NO.10 玻璃擬物化

          2022年,我們在Dribbble或Behance中會發現很多設計師都開始有意識地采用“玻璃擬物化”美學的設計。相信在2023年,我們會看見更豐富的表達~

          毛玻璃效果廣泛應用于UI設計之中,在摹客DT中也能快速完成。



          使用玻璃擬物化設計的界面,由于毛玻璃的通透性,會呈現出一種虛實結合的美感。



          除此以外,我們還可以看到的,這一趨勢已經明顯轉移到了玻璃和水晶質感上,而且以令人難以置信的用立體擬真度將圖形設計提升到了一個全新的高度。所以,2023我們也將看到更多與全息和3D趨勢相輔相成的透明質感和逼真的玻璃背景等元素的設計。



          結語

          2023年的設計趨勢給我們展示了設計的無盡可能,設計師們可以創作出更多超乎尋常的非凡設計,為用戶營造出獨樹一幟的全新體驗。

          身為設計師,我們要持續積累優質的設計素材,要知道設計趨勢因人而異,我們能做的就是選擇合適的風格應用在設計中,才能發揮它不可估量的價值!

          作者:摹客設計云

          轉載請注明:站酷

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


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


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


          “老字號”互聯網產品的年輕化之路

          ui設計分享達人

          一、項目背景

          百度文庫APP是一個在線文檔分享平臺,上線已有十余年的時間,是一款名副其實的老字號互聯網產品。隨著互聯網的成熟以及年輕用戶的涌入,時代語境和流行文化發生了變化。年輕化設計已經成為互聯網產品設計中不可避免的話題。在日常對用戶反饋的監測中,我們發現文庫APP當時的體驗已經不能滿足用戶多樣化的需求。并且在體驗走查以及用戶訪談中發現,文庫APP的視覺風格、交互方式、使用感受都存在老舊、不貼合流行趨勢的問題。

          二、由內而外,打造年輕化感知

          通過對年輕市場進行洞察,我們發現年輕用戶對產品的需求是多維度的。不僅對產品的“顏值”有高要求,他們更追求使用時的便捷和流暢度。他們對新鮮事物的接受程度更高,也更愿意去探索產品新的玩法,與產品進行沉浸的情感互動。

          所以此次年輕化改版不能只是對“產品的外表”進行升級,要從視覺、體驗進行全方位、多維度的年輕化升級。由內而外的打造年輕化感知。



          三、“老字號”互聯網產品的煥新之路

          2.1 視覺升級-更好看















          2.2 體驗升級-更好用









          寫在最后

          從UI設計誕生初期,設計師在屏幕上模擬現實世界的交互方式,用擬物化的設計風格幫助用戶熟悉UI界面操作。到現在用戶對移動屏幕越來越熟悉,設計師們可以在產品設計中去嘗試更多的可能性。產品與用戶共同成長才是年輕化設計的意義。

          未來,我們也會保持好奇心和探索欲,不斷打磨產品體驗,與用戶共同成長。

          作者:百度MEUX

          轉載請注明:站酷

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


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


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

          如何有效提升產研效率和質量

          ui設計分享達人

          前言

          互聯網瞬息萬變,在產品不斷更迭的過程中,我們經常說要保證產品設計的一致性和質量,提升產研鏈路的效率。但現實情況是:產研團隊長期面對的是產品越來越復雜,體量越來越大,一個個復雜的產品下包含N個業務線,N個業務團隊,甚至還有外部合作的業務,每個迭代都要面對數以百計的功能上線,經常容易出現各種相同但不一致的功能,上線質量參差不齊,執行者也容易陷入日復一日的需求海洋而沒有更多精力去挖掘更有價值的事情。


          所以如何解決團隊效率和產品質量問題?我們的解法是抽象體系化的解決方案:設計模式化和代碼化,設計從原子到全局進行統一和優化,并形成系統化的設計指導,由開發進行模式代碼化,提供靈活可配置的規則。以此,設計有更系統化的設計原則,整體的統一性和體驗有保障,設計和開發周期也可以縮減,甚至大部分日常需求可直接由產品對接開發直接上線。



          目錄

          • 一、什么是系統化解決方案,什么樣的團隊適合做
          • 二、如何輸出、推進設計解決方案
          • 三、解決方案的管理和發展

          (一)什么是系統化解決方案,什么樣的團隊適合做

          1.1 什么是系統化解決方案?

          大多數日常需求大多是從單點出發,當點變多變復雜了,就容易出現上述說到的現狀問題。所以解決方案需要基于業務全盤進行設計抽象:從元素——組件——區塊——頁面——功能流程沉淀設計規則并代碼化,來靈活提供拼裝N個不同頁面的機制,幫助團隊更系統化的進行產品設計。從組成內容不難看出,解決方案是需要建立在基礎組件基礎上,與基礎組件、復雜組件、行為模式共同組成設計系統的【功能模式】部分。





          1.2 什么樣的團隊適合做

          解決方案是一套相對穩定的設計機制,所以在產品初期或團隊建立初期,產品可能經常會調整的情況下,并不適合做。初期可以借助成熟的設計系統來減少投入成本。而到成長期可以根據業務的發展梳理基礎元素、組件,選擇性的建立部分穩定且利用率高的解決方案,并持續發展,保證解決方案可以起到指導和提效的作用。隨著產品或團隊逐漸成熟,解決方案也應該隨著一起成長,相互影響相互作用。


          (二)如何輸出、推進設計解決方案

          2.1 由大到小的進行信息拆解

          1)對產品頁面(尤其是重點功能)進行盤點,劃分頁面類型:比如列表、表單、詳情、dashboard;

          2)對頁面中的內容進行區塊歸類

          3)對區塊中的信息進行拆解



          這三個過程下來,對于問題、規則、規律都會有一定的概念。以一個后臺系統為例

          1、頁面大類主要是:列表、表單、詳情。

          2、其中列表的內容大致區塊分為:頁面標題區、列表操作、列表篩選、列表內容,到這個階段已經可以發現,相同區塊位置就存在不穩定,在后臺系統中可能影響面不會非常大,但對于內容復雜繁多的工具或C端界面就會容易出現找不到的情況。

          3、不同區塊的內容拆解,同樣也會發現一些細節問題,比如篩選的樣式、規則不一致,列表操作的方式、位置、樣式、交互不一致等等



          2.2、抽象、重組:從布局——區塊——組件——設計規則

          從第一步全盤的信息拆解和歸納, 已經發現問題, 這一階段主要2點:第一是如何通過設計規則來避免同樣的問題產生,第二是如何通過簡單的規則重組減少多人合作記憶復雜度。思路類似于設計一個界面,首先得有一個布局劃分,不同的區塊要放些內容,再到區塊里的細節內容規則,從而抽象出由布局到區塊的設計規則和可復用的組件。

          以前面說的列表為例

          1) 區塊主要是4類,明顯的問題是區塊位置不穩定,所以在布局結構上,需要定義1-2個穩定的可配置的布局框架來適應不同的內容



          2)不同區塊梳理組成內容,內容細則



          3)標記出可組件化的內容及規則



          4)提煉整個過程中通用的設計規則,作為全局的指導。如:國際化、排版規則、超限規則、適配規則、文案規則等等。

          通過布局——區塊——組件——設計規則,可以靈活的進行頁面拼搭



          2.3 落地代碼庫 

          區分通用層和業務層,通用層落地到通用模板市場,利用腳手架生產新頁面。業務層面的落地則是基于通用庫封裝具備業務屬性(如:業務主題、業務數據、業務拓展方案)的業務庫來生產新頁面。

          目前群核設計團隊建立了一套平臺通用的解決方案,適用于所有中后臺產品。業務屬性比較強的產品也基于通用解決方案封裝業務層面的解決方案,同樣的思路也應用在不同體系的工具場景中。整體實踐下來,產研效率提升近50%,甚至完全解放了一條業務線的設計資源。產品體驗的一致性、上線質量也有明顯的提升



          三、解決方案的管理和發展

          解決方案作為設計系統的一部分,與設計系統一同管理,業務設計師使用系統來輸出,反饋問題或需求給系統,有系統設計師判斷可行性,周期性的管理,及時更新并在內部互通,促進互相成長和發展。

          解決方案與設計系統的發展有一點不同的是解決方案有更多業務化的內容,業務團隊根據業務迭代維護解決方案。當業務的方案達到通用級別,則列入到通用庫。



          這些方法和思路也并不限制行業或產品類型,僅是在我們當前服務的產品體系下總結的方法。當然解決方案并不能解決所有問題,只是希望在提供更系統化的設計方法和模式的同時能減少重復工作提升效率,讓產研團隊有更多的精力和時間投入更有價值的事情。

          作者:酷家樂UED

          轉載請注明:站酷

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


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


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



          日歷

          鏈接

          個人資料

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

          存檔

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