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


          一、什么是“有駕在現場”

          有駕是百度旗下汽車信息與服務平臺,累計用戶超5.3億,致力于為用戶提供真實、可靠的看選買車服務,以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。

          車展對有駕來說是一個流量爆發的大事件,2021年廣州車展期間有駕品牌全網曝光累計6.3億次,創歷史新高。而【有駕在現場】是百度有駕歷年車展系列活動沉淀下來的品牌IP,已經成為活動固定的品牌標識。

          圖片

           

          二、借勢大事件,打造車展品牌全案

          借勢車展的關注度與影響力,我們想要通過分析調研總結,對本次車展進行視覺定調,建立品牌識別體系,沉淀專屬有駕車展活動的品牌符號和印記;進行線上線下聯合推廣來打造有駕車展品牌全案,提升有駕的品牌影響力;優化活動體驗來為平臺進行引流,讓用戶對有駕產品有更明確的認知。

          同時由于車展項目涉及跨部門合作,我們希望可以通過車展品牌全案,統一不同分工輸出的設計物料視覺一致性,以達到提質增效的目的。

          圖片

          以打造品牌全案為出發點,我們梳理了以下項目計劃。

          圖片

          同時,通過有駕用戶畫像分析,建立用戶標簽,分析用戶屬性及偏好,以更好的觸達用戶。數據顯示有駕APP大部分用戶為常駐中高線城市的年輕男性,經歷著數字化信息時代的便利,同時也受到更好的教育和各界多元的文化影響,更大膽更容易被新的東西所吸引。

           

          三、分析項目現狀總結優化點

          根據過往車展項目分析,總結發現存在品牌識別度較弱且沒有統一規范、品牌統一性較弱導致用戶認知成本較高等問題。

          圖片

           

          四、提煉品牌關鍵詞

          根據用戶畫像及現狀分析,明確業務需求,通過腦暴的形式羅列品牌關鍵詞,基于品牌DNA對有駕車展進行視覺升級需挖掘符合核心用戶的語境語言和視覺偏好,提煉出品牌關鍵詞,根據關鍵詞規范可延續的品牌元素,打造清晰的品牌全案以更清晰的指導后續視覺設計工作。

          圖片

           

          五、視覺定調

          根據關鍵詞確定了以賽博朋克風格為視覺基調,通過三維建模搭建北京地標建筑場景,搭配大膽的配色和新穎的元素樣式打造潮流個性且具有未來感的視覺畫面,匹配車展品牌的創新理念。

          同時,在活動玩法方面,通過優化活動玩法,多條件激勵用戶給予用戶沉浸式的體驗。

          圖片

           

          六、建立品牌體系

          確定基礎視覺調性后,我們通過形色質構來規范和輸出有駕車展品牌vi規范,建立有駕車展品牌體系,以提升視覺的產出效率,確保線上線下視覺輸出的一致性。

          圖片

           

          七、品牌LOGO

          【有駕在現場】是有駕多年延續下來的品牌基因,本次車展也將繼續夯實品牌資產,進行優化升級傳遞品牌調性。

          由于舊版的字體圓角等設計樣式相對柔和,不能準確表現本次車展視覺調性。為了傳遞有駕車展的潮酷、未來感,設計上將舊版文字加粗,圓角調整為直角,并進行一定的傾斜處理,使字體展現更加果斷硬朗;同時,我們將部分筆畫進行連接,讓字體充滿動感或速度感;最終的字型效果運用有駕品牌藍綠色光效以更好的與畫面結合。

          圖片

           

          八、色彩嘗試

          由于整體風格參考賽博朋克,配色方面基于有駕品牌色進行延展,輔助色起到平衡主色的沖擊效果、活躍視覺,釋放潮流激情,突出重點模塊;元素上嘗試漸變色豐富元素樣式。

          圖片

           

          九、組件化通用元素

          通過組件化通用元素,不同物料可以快速復用,節約設計成本,解決整個活動的視覺一致性,同時可以沉淀設計資產。

          圖片

           

          十、車展主KV

          根據關鍵詞【未來感】【年輕化】分析適合有駕的設計風格和調性,通過三維建模的畫面表現形式,構建充滿科技感的賽博朋克畫面,打造潮流科技的有駕車展基礎場景。

          主視覺場景設定為高樓聳立的公路上,有駕跑車向“有駕在現場”北京車展活動現場飛馳。充滿速度感的跑車、霓虹燈牌、高樓大廈色調和質感的碰撞,傳遞出一種直觀的科技感,引領新時代年輕用戶和有駕一起駛向未來。

          根據上述的內容進行車展主kv的場景設定,輸出了草圖方案。

          圖片

          整個場景圍繞“有駕在現場”進行設計,融合車展相關元素,滲透品牌標識。

          采用3D和2D相結合的形式,用C4D進行場景搭建,OC渲染器進行燈光材質的渲染,反復修改調整場景布局、元素等,最終輸出三維設計圖后進行PS后期,輸出最終的主視覺。

          圖片

          根據以上內容,輸出了對應的車展VI規范。

          圖片

           

          十一、車展專題頁

          根據主KV及VI規范進行專題頁的延展,部分內容復用過往車展框架模塊。

          新增了導航欄設計,便于用戶快速跳轉到感興趣的內容模塊,導航圖標大膽創新嘗試漸變色融合的配色形式,讓扁平的圖標有更加豐富的呈現。在保證閱讀效果的前提下,標題樣式、頁面元素及配色上更加潮酷。

          圖片

           

          十二、集卡分百萬 引流活動

          過往集卡活動不僅與產品、車展契合度高,并且收益明顯,因此本次北京車展活動將復用、優化集卡類活動,讓用戶沉浸式集卡,從而提升用戶活躍及量級。

          圖片

          在玩法方面,本次集卡活動延續過往活動做任務得車卡的主玩法,優化活動體驗,新增了合成稀有卡可參與大轉盤抽獎的玩法以激勵用戶集卡,同時設立了車展大眾日,在當天進入活動的用戶可以獲得現金紅包,以此來激勵用戶回流,豐富活動玩法。

          圖片

          集車卡活動的主視覺元素及配色是依據vi規范,保證整體品牌調性的統一;普通靚車卡背景延續主視覺背景,稀有卡嘗試不同配色和場景凸顯其特殊性。

          圖片

          除了專題頁和集卡活動,線上還包括端內社區活動設計,整體視覺調性都與我們輸出的車展品牌vi保持統一。

          圖片

           

          十三、倒計時海報

          為了給車展開幕造勢,我們嘗試復用主KV的三維建筑模型,將倒計時1、2、3與不同視角、不同配色的場景相結合,整體風格和車展主視覺保持一致,輸出了三張倒計時海報,豐富了整個項目的宣傳內容。

          圖片

          圖片

          整個車展項目除了線上運營活動、造勢海報,還有線下展會宣傳物料及其他第三方輸出的設計物料,整體視覺調性都是基于我們輸出的車展品牌VI進行視覺延展,保持統一性的同時,又各自有不同的視覺傳播效果。

          圖片

           

          十四、總結

          【有駕在現場】作為百度有駕車展品牌活動,我們通過未來感、年輕化、體驗感三個維度來塑造有駕車展系列活動的品牌調性,搭建了基礎風格,建設三維賽博朋克高品質主視覺,視覺元素細節驚喜感打磨,通過優化活動玩法進行引流,沉淀出新的大事件視覺設計思路,打造了有駕車展品牌設計全案。

          未來我們的思考不僅僅只局限在視覺的表現上,還要繼續挖掘品牌系列化活動的延續性與獨特性,同時更要通過合理的情感互動建立和用戶的鏈接,為品牌長線發展提供更多價值。


          作者:設計中臺

          轉載請注明:學UI網》有駕在現場 車展品牌全案設計【百度】

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


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


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



          新手學習字體設計的高效三步法

          seo達人

          一、臨摹

          臨摹是新手學習任何技能都需要經歷的階段,學字體設計自然也不例外。即你要去收集一些優秀的字體設計作品,然后照著它們來臨摹。

          很多人會瞧不上臨摹,認為照著參考一模一樣做誰都會,事實上真要做起來,很多人都臨摹不好,而且臨摹的方法也不對。那么,如何正確地臨摹呢?

           

          1、不要像摳圖一樣,用鋼筆工具直接沿著參考的外輪廓描摹。

          而是要照著參考畫出文字中的主要筆畫,諸如:橫、豎、撇、捺、點、提、勾等,然后,用這些筆畫照著參考的樣子一筆一筆把文字搭建出來。

          圖片

           

          2、如果遇到相同的筆劃,不要重新畫。

          而應該把已有的筆畫直接復制過去,有時可能需要做一點簡單的變化,這么做可以最大程度上保證筆畫的統一性。

           

          3、剛開始可以直接在參考的基礎上用筆畫來搭建文字。

          就好似描摹一樣,與參考一一對應,等熟練之后可以自行繪制筆畫,通過視覺來確定筆畫的粗細、長短、結構、擺放的位置等等。

          舉個例子,如果要臨摹下圖的字體設計,我們可以先把它的筆劃畫出來,如果抓不住筆劃的特點,或者線條畫不流暢,可以在原參考上把筆劃描摹出來。

          圖片

          圖片

          接著,再根據參考畫出文字的字框,以確定文字的寬度和高度。

          圖片

          然后,照著參考在字框里用筆畫把文字組合出來。

          最后,再仔細觀察文字筆劃的尺寸和位置是否正確,盡量做到與參考一模一樣。

          經過一段時間的臨摹練習,你不僅可以更熟練地使用鋼筆工具,同時也能掌握一些字體設計的風格、筆畫特征、字體設計的流程等等。

           

           

          二、通過參考,舉一反三

          當臨摹做得已經很熟練以后,就可以開始第二步的練習了,即遵照參考中字體設計的風格、特點,設計自己想要的其他文字。其實在實際工作中、很多設計師也會用這種方式來設計字體。想要做好這項練習,首先你要做的是對參考作品進行深度的分析。

          諸如對字體類型、字形、字體風格、重心位置、中宮松緊、筆畫粗細、筆畫結構、筆畫的對齊關系、有哪些特殊的處理技巧等特點進行分析。

          比如我想根據下圖的字體來設計文字:起來嗨。那么我就先要對參考中的字體設計進行分析:

          圖片

          該字體為無襯線體,風格簡約而現代,筆劃并沒有講究嚴格的對齊,甚至刻意做了錯位處理,各文字的字面大小也不統一,呈現出靈活多變的感覺、筆劃較粗,橫豎筆劃的粗細一樣、橫筆劃右端有類似直角三角形的襯線、部分筆劃交匯處會把橫筆劃做斷開處理、點筆劃和個別捺筆劃被設計成圓點、口部首被設計成圓圈等等。

          把參考的設計特點分析出來以后,緊接著需要把我們想設計的文字,用一個常規的字體呈現出來,由于參考中的字體設計是無襯線體,所以我們可以選擇黑體作為字體設計的觀察對象,看看該文字中有哪些筆劃可以直接挪用參考中的,有哪些則需要自己來設計。

          接下來就要著手畫草圖了,需要注意的是,參考中的文字做了整體垂直向上傾斜,在設計字體的時候如果直接設計成傾斜狀態,那么很多筆劃處理起來會不方便,所以最好先設計成水平狀態的,等確認無誤后再做傾斜扭曲。

          圖片

          另外,在畫草圖的時候要多做嘗試,對于原參考中沒有的筆畫,我們要從現有的筆畫中找到規律,這些部分的設計沒有絕對的標準,關鍵是要好看、要協調、要與整體的風格相符。比如“起”字下邊的“人”筆劃,可以借鑒參考中“辶”的處理方式。

          草圖畫好后就可以去電腦上做最后的執行了,在執行的過程中需要注意以下幾點:

           

          1、草圖不是標準,只是執行的思路。

          所以在執行的過程中仍可以進行調整、修改。

          圖片

           

          2、一邊設計一邊規范。

          如果你不是在專業的創作本上繪制的草圖,那么你的草圖通常是很不嚴謹的,那么在電腦上操作的時候就要邊設計邊規范,比如統一筆劃的粗細和結構、統一筆劃斷開部分的間距、注意某些筆劃之間的對齊關系等等。

          圖片

           

          3、與參考對比。

          字體初步設計完以后,要把其與參考放在一起進行比較,看看還有沒有處理不到位、看起來不夠舒服的地方,水平狀態調整完以后,再把文字按照參考的樣子往右上方做傾斜處理,然后繼續觀察以及做最后的完善。

          圖片

          圖片

           

           

          三、原創字體設計

          如果你能熟練地做到通過參考舉一反三,那么你的字體設計能力已經初步形成,接下來就可以做原創了。做原創字體設計時我們要注意以下幾點:

           

          1、做原創也可以找參考。

          只不過不要完全按著一個參考來做,我們可以結合好幾個參考,也可以在參考的基礎上加入自己的想法、做出一些改變等等。

           

          2、設計的流程

          A.根據要設計的文字、找到符合設計需求的參考。比如我需要設計的文字是:奇遇驚喜,并想設計成有種浪漫、古風的感覺。所以我找了下圖的字體來做參考(造字工房逸鋒體),該字體字形修長、結合了宋體和黑體的特性,筆劃橫細數粗但沒有襯線,現代而優雅。

          圖片

          B.加入自己的想法。用常規的的字庫字體把要設計的文字呈現出來,與參考放在一起進行構思。參考中的字體雖然現代而優雅、但是作為字庫字體,獨特性自然會有所欠缺,另外筆畫還是略過復雜,沒有古風和浪漫的感覺,所以我想把筆畫繼續做一些簡化,并加入祥云圖形。

          圖片

          圖片

          C.畫草圖。

          可以先畫文字的骨骼部分,以確定文字的基本架構,文字的骨骼決定了文字的基本氣質,比如高矮胖瘦、中宮松緊、重心高低、筆畫走勢等等,這也是設計師可以大做文章的地方,很多優秀的字體,在骨骼上就與普通字體有著很大的差異。這里我把文字的骨架設計得比參考更為修長。

          圖片

          骨骼畫好以后,再添加字體的肉身,即筆形,筆形決定了筆劃的粗細、端點、襯線、筆劃交匯處的處理等細節效果,這些部分的變化也非常多,設計師可以根據文字本身的特點和參考進行多種嘗試。

          圖片

          作為字體設計師,了解一些不同筆形的處理技法也很有必要。

          圖片

          ▲ 部分橫筆畫的筆形表現。

          D.把草圖導入到設計軟件中執行。草圖畫好以后就可以去電腦上執行了,執行的步驟和注意事項與“舉一反三”里提到的差不多。

          圖片

           

          3、注意文字的統一性。

          在設計字體時,要注意整體的統一性,要讓人感覺到這是一套字體,所以原則上來說,每個字的字面大小、重心位置、中宮、相同的筆畫等等,都要統一起來,當然,不包括某些為了效果靈活而刻意作出的一些特殊處理。

          圖片

          圖片

           

           

          圖片

          臨摹、舉一反三、原創,簡單的三步就能幫你從一個新手變成一個熟手,其實除了字體設計,很多其他類型的設計同樣是這個道理。當然,最重要的是你要能走出第一步,先做起來,然后要堅持下去。

           

          作者:蔥爺

          轉載請注明:學UI網》新手學習字體設計的高效三步法

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


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


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



          好難啊,一遇到場景插畫,我就廢了!

          seo達人

          輕立體的插畫小場景在平時設計中應用到的地方有很多,我們來分享一下在這次項目繪制的過程中走過的彎路和流下的淚。先來看一下優化的整個過程吧!

          圖片

          可以看出來第一版和最終版的效果對比是非常大的,第一版給人感覺如同一個半成品,場景輕飄飄的,顏色上幾乎沒有什么明暗對比,太過統一沒有分清處層次,而且細節不夠豐富。

          圖片

          通過第一版我們可以看出可以通過一下幾個方面去做層次方面的優化:

          一、增加主體細節

          1.刻畫熊熊主體

          2.優化鴨子的造型

          二、加強明暗對比

          1.加強主體和椅子的明暗對比

          2.加強背景和前景的明暗對比

           

          一.增加主體細節

          1、刻畫熊熊主體

          之前的熊熊作為主體本身刻畫的細節層次和背景的刻畫程度近似,我們要把主體變得有看點才能分清前后的關系,可以在熊的五官和服裝上進一步添加一些細節。

          例如給熊的五官添加表情,把墨鏡添加一些裝飾元素,讓視覺可以集中在熊的五官上。

          圖片

          同樣我們還可以在服裝上添加一些花紋的裝飾讓整個熊熊的主體看起來更加細致。

          圖片

          同時要注意熊的姿勢是頭部在前,胳膊在后,可以在刻畫的時候加入一些投影,加深胳膊的暗部,區分一下頭部和胳膊的層級關系。

           

          2、優化鴨子的造型

          鴨子的造型我們把游泳圈直接改成了小黃鴨漂浮物,游泳圈中間的鏤空讓視覺看起來不夠緊湊,同時我們也優化了鴨子的眼睛和嘴巴,讓鴨子看起來更精致一些。

          圖片

          然后去加強頭部和鴨子身體的前后區分,加入投影,讓它更加立體。

           

           

          二.加強明暗對比

          我們可以把整個小場景的明暗做一個區分,最亮的是熊,然后是鴨子,然后是地毯,最后是椅子,椅子作為地毯和熊之間的一個暗部,可以讓畫面有一個明暗的節奏,同時和熊的主體形成對比。

          圖片

          接下來要做的就是加強暗部和亮部之間的一個對比,體現整個空間的前后關系。

           

          1、加強主體和椅子的明暗對比

          我們把熊和椅子的明暗區分的更加明確一些,把椅子的飽和度和色相進行紫色調和低飽和度的一個調整,用對比色來拉開兩個物體的區別,加深熊的整個暗部,交代熊在床上清晰的投影。

          圖片

           

          2.加強背景和前景的明暗對比

          優化以后發現背景的植物和星星比較跳 我們去進一步加深背景讓背景往后退,同時把地毯的顏色提亮一些讓整個后景有一個區分。

          圖片

          然后我們去微調一下椅子的顏色讓椅子的顏色不要那么臟,把地毯顏色也調的明亮一些,形成對比,就到了咱們的第二版畫面:

          圖片

          第二版畫面再往后優化就是細節的調整和進一步加強明暗的區分。

          我們從以下幾個方面再去進一步區分畫面:

          一、明暗的進一步區分

          1.背景區分

          2.椅子自身的明暗區分

          3.椅子和地毯的區分

          二、添加正確的投影

          三、添加環境光

           

           

          一.明暗的進一步區分

          1、背景區分

          背景明暗的區分需要把植物部分去壓暗,同時把比較跳的星星稍微壓下去一些,做一個顏色上的過渡,加地毯的反光,讓星星的顏色退到后面去,然后給植物加上床的部分投影,空間關系更加明確一些。

          圖片

           

          2、椅子自身的明暗區分

          下一步我們要對椅子進行優化,目前的椅子沒有區分開明暗面,反而暗部的反光太強,亮部的顏色飽和度又很低,導致立體度出現了反向效果。

          我們要做的是把椅子面向光的面亮起來,背陰面暗下去,而不是亮部暗,暗部亮。

          圖片

          然后我們又發現,現在椅子的顏色對比度不夠,并且椅子腿上透視有一些問題。

          我們繼續去把椅子的顏色調暗,同時要在亮部去加入椅子受光的顏色變化,我們可以加入一些偏亮的純色,暗部做一些小的反光的變化,讓椅子更加有光澤度。

          圖片

          注意這里椅子腿也是有前后關系所以靠后的椅子腿要更加的暗一些,受光也少一些,同時給椅子腿上加入床的一個陰影。

          但這還不夠我們要進一步去加強整個畫面的對比。

           

          3、椅子和地毯的區分

          我們接著去把地毯的顏色提亮,同時把亮部光照的地方做一個暖色光照的處理,加深床的投影把投影交代的更加清晰一些,讓有顏色對比的同時也要有上下關系的對比。

          圖片

           

           

          二、添加明確的投影

          在整個過程中投影的進一步明確是增強一個立體和層級關系的關鍵,我們以鴨子、床、以及熊在床上的投影做一個前后的對比。我們要注意的有三點:

           

          1、統一投影的方向

          每個物體上都要有明暗的一個對比,如鴨子之前幾乎看不到暗面和投影,我們要去分析事物和鴨子的一個前后關系,再去添加植物后面的投影,讓鴨子看起來更加立體。

          圖片

           

          2、投影落地的形態

          注意落地點,不要讓影子浮在半空中,就像之前床的影子和星星的影子過于飄,整個物體看起來都沒有落地。

          圖片

           

           

          三、添加環境光

          1、減掉整體的內發光

          雖然在這種輕擬物畫風上有很多的物體有一些輪廓光和反光,但并不是統一直接去加一個內發光,我們要重點做的是通過環境光來加強對比,整個的內發光會讓物體失去明暗。

          拿鴨子舉例子,過強的光源會讓鴨子顯得很平。

          圖片

          我們可以加強暗部,在暗部做一些微弱的反光,在亮部加入一點輪廓光。讓整體更加的飽滿立體。

           

          2、根據不同的物體添加環境光

          熊熊主要的環境光是床的紫色反光,我們在添加的時候注意不要把床反光的顏色過于后厚重或者沒有顏色傾向。

          圖片

          調整好一個環境光后我們再去整個添加熊環境光。這樣整個畫面的優化就完成了。

          圖片

          我們來最后看一下第二版和第三版的對比效果

          圖片

          整個畫面明暗對比更強,而且顏色上更加通透,光影和諧統一,也具有更好的完整度。

          本次文章可以吸收的知識點有很多,希望大家可以和我一起在總結中收獲知識,取得進步,一個小場景塑造的立體有層次涉及到的點方方面面都會有,我們要注意繪制時多去做比較,同時保證整體明暗的對比效果和細節的刻畫調整。

          希望大家以后在繪制輕擬物場景插畫上道路不迷茫,一起去打造令人眼前一亮的畫面吧!

           

          作者:牙牙

          轉載請注明:學UI網》好難啊,一遇到場景插畫,我就廢了!

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


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


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



          中后臺產品的產研協同提效調研

          seo達人


          一、目前有哪些提升設計與前端生產力的方案

          1、D2C(Design To Code)

          D2C(Design to code)這個模式我們非常熟悉,其本質是將設計師的設計資產轉化為代碼,讓前端工程師可以快速的復用,在這個成熟的領域主要分成兩大類:「設計資產類」和「設計對接類」

          a. 設計資產類

          設計資產類是完整系統的規范和代碼進行沉淀形成設計類的資產,這一類的產品在市面上目前是屬于主流,產品有網易的Fish Design(網易自研)、Ant Design、Arco Design、Element 等,這些產品都是將組件化的設計資產轉化為代碼資產,方便前端工程師在開發 B 端產品頁面時可以快速引用,提升開發的效率。

          圖片

          b. 設計對接類

          設計對接類又分成「設計稿查看類」「設計稿代碼生成類」兩種類型:

          設計稿查看類:主要是 D-box(網易自研)、figma、藍湖等可以讓前端工程師在線查看設計師的設計稿并提供一定的轉化代碼方案,主要是為了保障產品的還原度。

          圖片

          設計稿代碼生成類:最近兩年為了徹底的解決還原度的問題,讓前端工程師專注的解決代碼問題「設計稿代碼生成類」也開始在市場嶄露頭角。

          比如:Imgcook、Codefun,直接復制設計稿地址進入軟件內部轉為代碼文件,直接導出完整的靜態頁面代碼,減少開發過程中的樣式調整問題。

          直接導出整頁代碼模式的小缺陷是無法滿足開發中:代碼精簡(ai 智能生成的代碼對目前還達不到開發人員喜歡的程度,較為冗余)、控件交互、綁定數據等幾方面的需求,但是比如在一次性的靜態頁面的實現中還是能夠達到提效的目的。

          圖片

          結論:D2C模式的產品相對獨立,從定義還原度「設計資產類」、保障還原度「設計稿查看類」、解決還原度「設計稿代碼生成類」層層遞進,可以有效提升設計師和前端工程師的生產效率和協同效率。

          但在目前競爭激烈的大環境中,優秀團隊的效率提升已經達到瓶頸,而提效的本質是為了比競爭對手更快更好,當所有人都有了相同的東西時,提效的目標可能就需要從別的地方打開缺口。

           

          2、C2D(Code To Design)

          C2D(Code To Design)「前端代碼轉設計稿」這個模式對于設計師相對模糊,不過國外的企業已經做出了探索。

          比如:2017 年Airbnb 發布的前端開源模塊 React Sketch.app,其核心理念是用代碼做設計。第一次看到的時候感覺真的很酷,通過 React Sketch.app 直接在 Sketch 設計軟件中編譯出設計界面,代碼也可以直接在項目中使用。

          圖片

          還有另外一個產品叫 html-sketchapp,通過在輸入框中輸入網頁地址就可以直接在 Sketch 中生成可編輯的設計界面「網頁轉設計文件」,通過任何前端代碼都可以轉為設計資產的文件,甚至直白一些說就是參考成熟產品做設計,適度借鑒吧。

          圖片

          結論:目前的 C2D 的市場方案對于設計師而言不夠友好,無法讓設計師可以直接使用,都需要工程師來完成轉換,同樣也會遏制設計創新,陷入同質化的泥潭中。

          但這個模式,卻非常適合“有意”借鑒參考成熟或者競爭對手的項目團隊,可以快速達到同類型產品的基準水平。

           

           

          二、針對目前現狀,什么樣的方式可以實現提效?

          從我們當前的工作流程來看

          圖片

          在這個流程中設計最在乎的就是設計階段的表現需求和前端的設計還原,為了保障精準的表現需求,在設計階段需要大量的溝通和風格嘗試。

          在前端還原階段需要和前端不斷的扣細節,輸出幾百條信息的走查文檔,那應該如何解決這些問題?

          圖片

          答案就是「 C2D2C」的模式

           

          1、C2D2C(Code To Design To Code)

          C2D2C(Design to code to design)的模式,將流程中的設計表現和前端還原階段的通過設計標準化和研發工業化的方式進行流程優化,減少設計和前端開發的參與,實現中后臺研發流程的整體提效。

          圖片

          在十幾年的發展里互聯網行業積累了大量的設計資產。

          這些設計資產的沉淀是設計標準化的基礎,將設計資產轉為封裝好的代碼組件也就是 D2C 的過程。將封裝好的組件通過低代碼平臺進行屬性配置、搭建頁面、布局調整實現頁面的設計就是 C2D 的過程。

          通過平臺設定交互行為和綁定后臺數據,完成整個系統,最后在進行站點發布,就實現了 C2D2C 的完整流程。

          圖片

          C2D2C 的模式是設計資產與線上智能化布局的代碼方案(低代碼平臺)以及后臺數據綁定的結合,將以前的人工分工通過智能化方案綜合一體去解決。

          但這個過程不是僵化死板的模式,在C2D環節實現“設計->前端”的高還原度下快速落地,在D2C環節下實現“低代碼平臺->自有產品”的靈活調整下快速復制。

          結論:隨著社會的發展,標準化和智能化的產品線都將會被人工智能取代,互聯網行業也正在向這個方向發展,所以設計的標準化和開發的工業化就像手工業向工業化的轉型,這是一個大的趨勢,未來可能一天的時間就可以生產數套后臺產品,這樣的生產效率才能跟上中國的數字化轉型浪潮。

           

          2.、C2D2C 的市場化

          低代碼平臺 是 C2D2C 模式得以實現的核心平臺,從2018 年開始海外投資開始關注低代碼平臺,OutSystem 平臺獲得 KKR 和高盛的 3.6 億美元的融資,成為了低代碼賽道的獨角獸,另一家低代碼創業公司 Mendix 被西門子以 7 億美元的價格收購,資本市場的關注讓低代碼賽道開始火熱起。

          而國內的低代碼平臺是從 2020 年疫情肆掠開始,疫情助推了在線辦公的發展,國家也在大力支持數字化經濟,更多的企業開始數字化轉型,這也讓低代碼在國內有了飛速發展的土壤。

          目前海外比較成熟的平臺主要是 OutSystem和 Mendix,而國內也有很多已經商業化的低代碼產品,像網易輕舟等,已經開始投入商業化的使用,可以從網易輕舟的低代碼產品架構,清晰完整的看到C2D2C模式的所需要具備的能力。

          圖片

          網易輕舟從業務角度出發,具備持續迭代能力、組件具備可擴展性,并且可以為企業進行私有化部署,部署完成后可以和存量系統進行集成,交付后具備非常好的可運維性,是一個成熟的商業化平臺。

          網易輕舟目前已經服務了包括工商銀行、吉利汽車、申萬宏源證券、泰康人壽、臺州銀行等包括政府產業平臺30家,從服務的客戶我們也可以看的出來,低代碼產品在大型企業中落地更有優勢。

          結論:C2D2C 的模式已經得到市場的驗證,研發工業化可以更加高效的提升中后臺產品的研發效率,設計標準化也可以減少中后臺設計師大量的重復性勞動,對于中后臺的業務產品,可以大膽地選擇一個富有實力低代碼產品。

           

           

          最后

          低代碼平臺的使用需要同時具備一定的代碼能力和設計能力,這不管是對開發還是設計師都具備一定的門檻。目前的低代碼平臺使用角色應該是前端工程師,復雜的后臺交互平臺還是需要設計師的深度介入。

          低代碼平臺的誕生減少了中后臺設計師大量的重復性工作,可以讓中后臺設計師將更多的精力投入到用戶研究和提升用戶體驗上。拖拽式的 UI 和智能化的布局以及良好的用戶體驗和以前的開發相比較,在中后臺的開發上更加的高效也更加的智能。

          在最初調研到低代碼平臺的時候,行業的快速發展和成熟,讓我下意識的反應是中后臺的設計師可能要失業了,但是在調研了平臺的使用和深入的思考后,我覺得這是中后臺設計師的機會。C2D2C 模式的最優解應該是 0 代碼方案,而使用 0 代碼平臺最好的角色就是設計師。設計師專業的審美和對于用戶體驗理解的深度都是其他職業所不具備的,未來的中后臺設計師更應該將自己的精力投入到平臺流程的優化和用戶體驗的研究中去,這也在未來 0 代碼平臺到來后,我們才能更快更好的投入到新的生產中。


          作者:程鑫

          轉載請注明:學UI網》中后臺產品的產研協同提效調研

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


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


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



          好評如潮的10個知名logo設計

          seo達人


          一、英國石油logo

          圖片

          這個叫做太陽花的logo,一經面世就引起了社會強烈關注,除了傳說中的設計費用打破歷史紀錄以外,該設計方案也確實讓人眼前一亮,完全顛覆了英國石油以往的logo。

          圖片

          該花朵采用對稱構圖,從里到外一共分三層,顏色從白色到黃色再到綠色,呈現出綻放的姿態,寓意生機勃勃,永不凋落。這個誕生于2000年的logo,至今看來依然時尚、美麗。

           

          二、索愛logo

          圖片

          2001年索尼與愛立信聯姻,于是誕生了索尼愛立信這個品牌,新的logo也在這個時候應運而生,該logo一反主流的扁平風,采用了立體的漸變風,在當時可謂是獨樹一幟,十分驚艷,從logo上我們就能感受到強烈的動感和科技感。當時的設計需求中有兩個兩個關鍵點:“流動的形象”和“另一個自我”,流動的形象是指logo本身要具有強烈的動感,讓人感覺它是活的;另一個自我指的是要有個性,這兩點都在這個logo上得到了體現。

           

          三、墨爾本城市會徽

          圖片

          墨爾本是澳大利亞的第二大城市,該logo以墨爾本的英文Melbourne的首字母“M”為原型,圖形內眾多幾何色塊相比穿插,配合從藍色到綠色的漸變色,展現了該城市活力、新潮、多元、現代化、重視生態的城市形象。

          該logo的延展圖形也很驚艷,展現了該logo極高的延展性。

          圖片

           

          四、美國航空logo

          圖片

          該logo更新于2013年,在過往形象的基礎上做了重大突破,圖形由老鷹、品牌首字母A、飛機尾翼,以及星星組成,顏色來源美國國旗中的紅、白、藍,傾斜的尾翼圖形極具動感和速度感,簡單而明了,又沒有盲目跟風扁平化,漸變以及立體效果并沒有讓該logo顯得老氣,反而增添了一份品質感。

          圖片

          ▲ 美國航空過往logo形象

           

          五、beats耳機logo

          圖片

          該品牌以售賣耳機為主,所以在logo設計上,設計師采用品牌首字母“b”與紅色圓形結合,得到一個類似人在戴著耳機聽音樂的圖形,簡單而直接,讓人一看就懂且印象深刻,其中字母b的下半部分被抽象地處理成一個正圓,與外面的大圓形成同心圓關系,所以在視覺上非常和諧、美觀。

           

          六、北京申奧標志

          圖片

          該個logo由知名設計師陳紹華設計,圖形為采用具有中國特色的書法筆刷組合成打太極的人形,而且筆刷剛好為五筆,分別使用奧運五環的顏色,代表奧運,該logo把動感和中國文化展現得淋漓盡致,且簡單、獨特,一經面世,好評如潮,最終也為北京成功申奧貢獻了一份力量。

           

          七、廣州亞運會標志

          圖片

          該logo由設計師張強設計,圖形由廣州極具代表性的建筑:五羊雕像與火炬結合而成,五羊雕像的靈感則來源于古老的五羊傳說,象征著豐收、福瑞,以及廣州人民知恩圖報、勤儉樸實的品質,火炬象征著奧運以及熱情,最下邊的四個色塊形似跑道,象征著運動和競技 。

           

          八、杭州G20峰會logo

          圖片

          該logo的圖形部分為一座拱橋與水中倒影組合在一起的形態,橋是杭州很有代表性的元素,同時也象征了開放、包容、溝通和連接。橋的圖形是由20根同等粗細的線條組成,體現了參會的20個國家地位平等。另外,該logo在形式和排版上也是個性鮮明,logo的輪廓比較狹長,文字疊加在圖形上,使其融為一體,而不是像大多數logo那樣把文字與圖形完全區分開。整個logo從形式到配色都給人一種典雅、現代的感覺,廣受大家的喜愛。

          圖片

           

          九、蔚來汽車logo

          圖片

          蔚來是一家智能電動車企業,該logo的設計理念為:blue  sky coming,圖形設計上主要呈現了三個元素:上面的弧形代表天空,象征著未來、開放與目標;下面的箭頭圖形代表路面,象征著前進與行動,地面與天空的交界處是地平線,象征著無盡的遠方。整個logo圖形在一個正圓的基礎上設計,簡單而美觀,細節的雕琢也十分到位,個人覺得是國產汽車品牌logo設計中少有的亮眼之作。

          圖片

           

          十、廣州城市會徽

          圖片

          該logo由曹雪設計,logo的外形為廣州新時代的標志建筑:廣州塔。該圖形由左邊的弧形色塊和右邊的弧形線條疊加組合而成,二者剛好又是廣州二字,同時我們在該logo中還能看到帆船和飛鳥的影子,寓意廣州海納百川、生機勃勃,整個logo的形態給人一種現代、時尚、優雅的感覺,該logo一經公布,引起了廣泛關注,也收獲了眾多好

          評。

           

          圖片

          當然,21世紀優秀的logo還有非常多,但要說比較知名且好評較多的,我對這10個logo的印象比較深,縱觀這些logo設計,我們不難發現,他們幾乎都具備這么幾個特點:簡單、獨特、調性與品牌和行業吻合、符合時代審美等。知名品牌的logo設計具有非常的框架,設計師所面臨的壓力也是巨大的,能夠有如此出品和口碑屬實不易。


          作者:蔥爺

          轉載請注明:學UI網》好評如潮的10個知名logo設計

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


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


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



          色彩的感知

          seo達人

          粉色是初戀,

          像情竇初開的你。

          圖片

          漸變的粉色是成長的開始,

          折痕的肌理是愛情到來時內心的波瀾。

          圖片

          愛心做出半透明的玻璃模糊質感,

          塵封已久的內心已怦然心動。

          圖片圖片

          紫色是浪漫,

          像奔赴熱戀的你。

          圖片

          當我們一起仰望星空,

          不小心碰到你的手時,我感受到你的心跳。

          圖片

          當我們一起仰望星空,這一次我想走進的你的心扉,

          建立屬于我們的橋梁,在你內心的最深處直到永遠。

          圖片

          圖片

          紅色是摯愛,

          像真誠而付出的你。

          圖片

          醒目的紅色真誠而又直接,

          我們的心也將靠的更近。

          圖片

          模糊的愛心肌理是

          我們試探彼此距離的那點小心機。

          圖片

          看似朦朧實則清晰的情感在這一刻印記在我們心中。

          圖片圖片

          藍色是冷靜,

          像理想到現實的你

          圖片

          紅色的愛心旋渦久久不能離去,陷入的太深,

          無法自拔,找不到自己的方向。

          圖片

          直到看清現實的你,慢慢的像沙漏一樣,

          選擇和自己過去的他和解。

          圖片

          圖片

          當這些色彩融合在一起時,就出現了愛情最真實的滋味,

          朦朧又夢幻,真實而脆弱。

          只有理解色彩給予的感受,

          朦朧又夢幻,真實而脆弱。

          做出來的設計就才會有真實的情感體會。

          圖片


          作者:修先森

          轉載請注明:學UI網》色彩的感知

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


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


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



          如何改進UI中的按鈕設計,試試這5個方法!

          seo達人

          一、UI設計中不同類型的按鈕

          1、CTA按鈕

          號召性按鈕(CTA)是界面中的交互元素,用來執行特定的操作,例如聯系我們、訂閱信息、購買產品或加入購物車等。

          CTA按鈕作為執行重要操作的按鈕,在設計上應該更醒目,能讓用戶快速分辨出來。

          圖片

           

          2、文字按鈕

          文字按鈕是以可點擊的文字作為按鈕,文字底部沒有圖形背景。文字按鈕的操作面積小,突出程度低,多用于不太重要的操作。

          圖片

           

          3、下拉按鈕

          在有的網站導航欄中,單擊選項會出現下拉列表,展示更多二級選項,方便用戶可以查看并選擇更多的操作。

          圖片

           

          4、描邊按鈕

          描邊按鈕是背景透明效果的按鈕,用于輔助操作。當界面中有多個按鈕時,使用描邊按鈕有助于劃分視覺層次結構,高優先級的按鈕使用填充效果,輔助按鈕使用描邊按鈕。

          圖片

           

          5\漢堡按鈕

          漢堡按鈕隱藏在菜單欄中,當我們點擊時,菜單將展開并顯示所有的選項。漢堡按鈕廣泛應用于web和移動應用中。

          圖片

           

          6、懸浮按鈕

          懸浮按鈕(FAB)位于界面的最高層級,優先級高,通常為圓形,在界面中執行最常見的操作。

          FAB按鈕常用于創建新項目或者發表內容等操作,FAB的位置應確保按鈕具有較高的可訪問性和可視性。在有的產品中,點擊FAB會出現更多的操作,將常用的操作聚集到一個按鈕中。

          圖片

           

           

          二、有效的按鈕設計實踐

          1、讓按鈕看起來可點擊

          當用戶與界面交互時,他們應該快速明白什么是可點擊,什么是不可點擊的。作為設計師,我們不會希望用戶花很長的時間來理解他們看到的元素,因為用戶花的時間越長,產品的可用性就越差

          為了確保用戶能夠明確知道按鈕是否可點擊,我們可以使用用戶熟悉的按鈕樣式,例如方形邊框的填充按鈕、圓角填充按鈕、帶有陰影的填充按鈕、描邊按鈕等。

          圖片

          其中最為常見和熟悉的設計是帶陰影的彩色填充按鈕,當用戶看到這樣的按鈕時,他們會立刻明白這是一個可點擊的按鈕。

           

          2、考慮按鈕在界面中的位置

          按鈕的位置很重要。作為設計師,我們不希望用戶花時間尋找按鈕,而是應該將按鈕放在用戶期望的位置上,方便用戶去操作。

          對于按鈕在界面中的位置,首先要了解F型和Z型的瀏覽模式。

          F型瀏覽模式

          圖片

          在F型模式中,用戶通過水平移動的方式讀取界面上方的內容,構成F的頂部欄。然后用戶向下移動頁面,再次水平移動,再以垂直移動的方式瀏覽左側的內容,形成F型的主干。當界面中有大量數據時,通常會遵循這樣的瀏覽模式。

          圖片

          Z型瀏覽模式

          圖片

          Z型瀏覽模式模仿了人眼閱讀的路徑——從左到右,從上到下。

          用戶首先從左上角到右上角掃描,形成Z的頂部條。然后向左下角掃描,最后再向右看,形成Z型的瀏覽動線。

          圖片

           

          3、標注按鈕的作用

          按鈕應該始終有清晰的注釋,展示點擊時將執行的操作。過于通用或者模糊的注釋可能會讓用戶感到困惑。

          圖片

           

          4、正確調整按鈕大小

          按鈕的大小代表了元素優先級的高級。尺寸較大的按鈕表示更重要的操作。

          當在一個界面中存在多個操作按鈕時,為了讓最重要的按鈕看起來更突出,可以考慮讓這個按鈕比其他按鈕的尺寸更大,并且利用顏色和對比,讓這個最重要的按鈕更吸引視線。

          圖片

           

          5、始終提供反饋

          每當用戶點擊按鈕時,他們期望界面能有提示或者反饋。在激活按鈕時,按鈕應該改變狀態,給用戶一個反饋,便于用戶知道點擊按鈕發生了什么。

          圖片

           

           

          最后

          以上總結了設計中按鈕的6種類型以及5種改進按鈕設計的方法,希望通過這些內容能讓大家對按鈕設計更重視,對已了解的按鈕設計知識查缺補漏!

          慢慢來比較快,如覺得有幫助,


          作者: Clippp

          轉載請注明:學UI網》如何改進UI中的按鈕設計,試試這5個方法!

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


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


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


          作品本身不足,與包裝無關

          seo達人

           一、不局限于作品包裝本身

          雖然作品集包裝也很重要,可以對我們的作品輸出進行揚長避短,起到非常好的襯托作用。但是面試官考核的不只是包裝而已,作品本身的能力至關重要,喧賓奪主也容易適得其反。

          我們不能過度局限于作品包裝,而忽略作品自身的修煉,需要投入時間精力細化每一個界面,確保它們都是自己正常專業水平之上的輸出。所以說提到作品集很多設計師總是糾結于不知道怎么開始,以為難倒自己的是包裝,其實先把單個的界面優化好就是第一步。要讓自己的每一個界面都經得起考驗,而不是湊數量,這樣包裝才能錦上添花。

          圖片

           

           

          二、老作品新用場過于偷懶

          遇到過很多設計師在制作作品集時,往年的作品直接拿來湊數,導致作品呈現質量參差不齊。在職場 1-3 年的時間段,項目作品數量有限實屬正常,往年的作品包裝到作品集中也是沒問題的,只是老作品新用場不能過于偷懶。

          圖片

          設計趨勢和大眾的審美觀念都是在發生變化的,前幾年的作品也許在當時覺得還不錯,但是時過境遷之后不一定入得了當下的審美標準。針對老作品我們需要結合當下的設計趨勢和審美標準進行評估,如果這個作品連自己都打動不了,想要打動面試官那是很難的。我們要結合新的趨勢和規范進行二次梳理,重新優化調整每一個界面,確保它們都是符合當下設計標準的,然后再結合作品集新的規范重新包裝,這樣才能保持整體作品集的質量。

          圖片

          想要更好的結果就不要偷懶,此時的應付換來的就是行業的拋棄,多一點行動多一分設想。

           

           

          三、追趕樣機趨勢卻忽略規范

          在包裝作品集的過程中,相信大家都會經常使用樣機模型,以此來真實的還原作品呈現。隨著樣機設備的不斷更新交替,樣機模型也是經常變化,保持最新樣機模型也能提高作品集的趨勢感。

          圖片

          大家都知道追趕樣機趨勢,但是卻不調整作品的規范,導致作品的組件規范和樣機的不匹配。看似覺得無傷大雅,實則對于講究細節的面試官來說,會認為這是你的專業態度問題。如果連設計規范都不能把控好,也不注重設計細節,那么如何相信你的專業能力呢!

          追趕樣機趨勢是毋庸置疑的,不過也要結合樣機模型的組件趨勢,老作品要結合新趨勢重新調整,不要忽略這些細節的表現。

          圖片

           

           

          四、作品不可缺少反復自查

          在優化單個界面的時候,不要忽略細節的校對,特別是不要出現低級錯誤。比如圖文不搭、錯別字、信息表達出錯、元素替代遺漏、流程不通、信息邏輯不對等等,不要在看似簡單的細節上面出錯,反復自查是不可缺少的環節。

          圖片

          特別是對于自己 0-1 參與的項目,一定要對每個環節都比較熟悉,不能只是停留在視覺表層。檢查自己設計上面的問題,也要復盤全案設計的思路,這樣面試官在考核的時候才會應對自如。如果細節都容易被忽略,設計態度的體現將會大打折扣,也容易讓人覺得你做事比較馬虎。

           

           

          五、工作輸出單一而不去改變

          如果在規模比較小的企業,我們的項目容易比較單一,就會導致作品輸出也比較單一。如果公司對于設計質量的要求比較低,我們也沉淀不出什么像樣的作品,求職就會變得非常被動。工作輸出單一如果還不去改變,久而久之便會影響專業能力,職場路徑也會變得局限性很大。

          圖片

          對于 UI 設計師來說,無論是 C 端還是 B 端都屬于我們技能掌握的范圍,而不能根據短期內的行業走勢鎖定自己的職場路徑。在工作中沒有機會發揮多維度設計時,我們要在日常強化中去彌補,不能讓自己的技能變得越來越收縮。不要為自己作品輸出單一而找借口,結合公司業務轉化、前公司業務優化、熟悉產品改版設計等,都可以以此來強化缺失的技能。

          機遇是自己去創造的,只有能做好了才能抓住機會,沒有機會去發揮專業能力,就要主動去挖掘。

          圖片

           

           

          六、信息重復導致樣式化

          項目界面作為技術對接和作品展示輸出,這兩種情況下我們不能偷懶的采用一個態度。站在項目對接的角度來說,信息圖文都可以只是占位符,交代清楚樣式特征即可。哪怕全部采用一樣的文案信息和配圖都沒關系,甚至配圖用色塊來替代都可以,只要下游對接的同事能判斷出來就好。

          圖片

          站在作品集輸出的角度來說,不能以此形式來表達,這樣帶來的感官體驗肯定是有所欠缺的。樣式化的表達不能體現出作品的真實感,包裝出來的效果也會大打折扣,我們要真實還原每一個界面中的信息表達。無論是文案還是配圖來說,都要選擇更加真實的內容,不能以占位符的心態去輸出作品。

          不同的版塊信息要以不同的文案和配圖來填充,就算是數據和日期等內容也不要都一模一樣,做好細節才能帶來更多機遇。

          圖片

           

           

          七、人靠衣裝配圖是金裝

          作品展示的角度來說,一些設計師容易忽略界面中的配圖,隨便找一些圖片填充設計,導致自己的作品總是少了一些質量。配圖就如同人的衣著打扮,人靠衣裝配圖就是作品的金裝。如果配圖自身不夠高端大氣,作品自然也是高端不起來的。

          在保障配圖與信息表達真實性的前提下,我們要盡量選擇質量更高的配圖,以此來帶動作品的格調。不過我們也要養成版權意識,盡量去免費可商用的圖庫網站篩選圖片,可以找黑馬哥領取網站合集。既然耗費了時間輸出作品,就不要在配圖這個環節馬虎,高質量的配圖也能帶動作品的質量,帶給面試官更好的感官體驗。

          圖片

           

           

          八、作品輸出缺少視覺感營造

          隨著行業發展的成熟,各階段的人才儲備也會變得更多,求職的時候面試官的選擇性就會更多了。當面試官收到的作品集很多的時候,就需要經過多次篩選來提高選擇效率。通過學歷、工作經驗、崗位匹配度、作品集和面試發揮等來篩選,而作品集也會經歷海選、初選、精選等。

          圖片

          影響作品集篩選的因素很多,在海選和初選的時候,如果作品集很多的情況下,作品帶來的視覺第一眼就變得很重要了。如果單個界面本身只是簡單的布局層面表達,缺少一些視覺感的營造,極容易在海選的時候被忽略掉。這樣就算你設計說明描述的很好,產品思維也比較成熟,但是面試官沒有看到或者沒有仔細閱讀那些長篇大論,也是徒勞無功。

          提高作品的視覺表現力可以從配色開始,色感的表達可以讓作品充滿視覺亮點;也可以精致化圖標設計,質感圖標的表達可以帶動界面的視覺感;還可以從 IP 設計或者品牌基因等元素的融入入手,以此豐富界面設計的視覺表現力。營造視覺感的方向很多,不能局限于常規的布局,擺脫同質化需要從差異化的視覺表現力開始。

          圖片

           

           

          九、作品本身的差異化不可缺

          同類型的設計看久了終歸還是會麻木的,在相似功能的設計表達上面,如果同質化比較嚴重,面試官也會覺得你缺少創新能力。不要只是把焦點放在作品集包裝層面,作品本身的差異化也是至關重要的。

          圖片

          差異化的體現可以是交互形式上面的創新,擺脫常規的功能表達,破局才能打破固化思維。也可以是立足于品牌的基礎上進行設計,提取品牌元素運用到產品設計的場景中,這是拉開差異化較為明顯的方向。還可以運用一些新的技術或者趨勢化表達,比如三維設計運用到 UI 場景中,插畫風格衍生到圖標和視覺區域等場景中,交互動效帶來界面動態化表達等等。

          在設計每一個界面的時候,如果都只是普通的展示功能而已,這樣的設計是打動不了面試官的,因為隨便來個設計師都可以做出來。每個設計作品都是體現自己專業能力的表達,我們需要的不是完成需求,而是如何突破常規,做出不一樣的設計。

          圖片

           

           

          十、不局限于界面而是思路

          工作項目中我們需要完成所有的狀態表達,但是作為面試作品來說,不需要展示全部內容,重要的是整個項目設計的思路。就展示界面來說選擇主界面、重要業務流程界面、強視覺感界面、創新交互表達界面等。作品集是眾多項目的縮影呈現,都去展示不但篇幅不夠,也容易讓有亮點的設計被埋沒。

          圖片

          在設計作品集的時候首先要明確項目展示的流程和思路,比如項目背景、用戶調研、交互設計、品牌設計、UI 設計等等(僅作為大概示意)。把這個流程里面需要重點展示的界面設計好,這樣才能快速的優化項目。也不需要把一個界面的所有內容都呈現出來,輸出一條特別長的界面,到時候包裝的時候不利于展示發揮。

          圖片

          整個作品集呈現出來的思路比較重要,通過作品集要體現出你所具備的能力,如果你會插畫但是沒有在項目設計中體現出來也是無效的。通過作品集告訴面試官你具備哪些解決問題的能力,而不是單純的界面設計而已,我們在職場中存在的價值就是輔助團隊解決設計問題。

          圖片

           

           

          小結

          在這個形勢嚴峻的招聘環境中,作品集無疑是我們最有利的能力保障,無論你面試技巧再完美,作品不行也是徒有其表。作品集的好壞不限于作品包裝本身,作品自身的設計表現力也是至關重要的,不要偷懶也不要濫竽充數,你付出了多少努力面試官一眼就判斷出來了。

          希望本文的梳理可以帶給大家一點經驗,多花時間在作品上面,用心打磨每一個元素和深思每一個設計表現場景。

           


          作者:黑馬青年

          轉載請注明:學UI網》作品本身不足,與包裝無關

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


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


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



          哇,這些樣機素材太好用了?。?/a>

          seo達人

          咕嚕嚕


          第一組:
          以手機或手機組合為主的樣機素材。

          圖片

          圖片

          圖片

          圖片

          圖片

           
           

          第二組:相對來說組合形式更多樣化,視覺感受上更有張力一些。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          很明顯這兩組樣機的形式更加新穎,結合之前發的樣機素材,用來包裝、展示作品完全足夠了。

          不過需要強調一下,我們能用到的樣機素材大致分為兩類,即:平面樣機和3D樣機。 

           

          這篇文章中的樣機屬于平面類的,所以使用起來很方便:打開素材后找到需要替換的屏幕內容智能對象圖層,雙擊點進去替換圖片保存即可。

          但今天分享的這些樣機屬于3D樣機素材,其使用方法略有不同:

          1、打開樣機源文件后,找到需要替換貼圖的3D圖層:

          圖片

          2、雙擊紋理下的Chante This 或 Click This圖層,打開新窗口

          圖片

          3、在打開的新窗口中置入自己需要的圖片,調整好尺寸保存,返回到源文件窗口即可看到替換后的效果。

          比如像我這樣簡單的使用就可以:

          圖片

          另外還有一點,PS版本太低或者電腦配置過低可能無法使用,比如我常用的2015版PS就不能使用,打開后就是這樣的:

          圖片

          好了,關于使用方法和注意事項就說這么多了,其他的大家下載之后多摸索摸索,最起碼需要用的時候知道怎么用。


          作者:老張

          轉載請注明:學UI網》哇,這些樣機素材太好用了??!

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


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


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



          日歷

          鏈接

          個人資料

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

          存檔

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