設計進階技巧,如何打磨視覺設計細節
隨著體驗設計的持續發展,行業內各領域的體驗設計質量都有了很大的提升,並且各個競品之間的差距越來越小。而更高的介面細節設計質量不僅是各個大廠產品體驗設計的追求,也是我們拉開競品差距的關鍵一環。我們平時可能閱讀了很多理論知識文章,但往往在實際工作中卻較少運用。學習掌握理論基礎知識固然是很重要的,但在設計執行時掌握設計技巧也更能提升工作的效率和質量。那麼在設計執行層遇到問題有沒有一些立竿見影的解決方案呢?本篇文章分別從視覺創意的角度分析,希望可以幫助你遇到問題時另闢蹊徑,延伸更好的設計思路。
設計分析
專題設計中,首先的設計重點是頭圖的視覺設計,就像是兩個人相識,和見面第一印象一樣重要。那麼關鍵因素也是要給對方留下深刻印象和特點。在新的社會及經濟環境下喚起人們對生活的熱愛以及帶動消費者來京東購物,提升GMV。
一個好的專題頁中頭圖內容,是整個頁面的重中之重,好的頭圖設計,有創意,整體效果和諧,使用者印象深刻,內容傳達有效,視覺元素有延續和繼承。頭圖作為專題的第一印象,其重要性可想而知。
一個專題頭圖的組成:
1. 主體:視覺焦點,主導著整個設計(可以是人/物/文字/圖片),整個版面最吸引人的部分,相當於主角的作用。
2. 文案:對主體的輔助說明或引導,畢竟有時候我們放一隻joy元素在裡面,使用者也不能準確的知道它在說什麼,配角的作用。
3. 點綴元素:裝飾元素,可有可無,具體根據版面需要;好的點綴元素能夠渲染氣氛,大部分的點綴元素遵循三角形原則,類似下圖中的雲朵,群演的作用。
4. 背景——可分為純色/彩色肌理/圖片/圖形等。
那麼一個成功的專題頭圖,大部分會具有以下幾個出彩的要素:風格創意、色彩、構圖、細節等。
一、主視覺風格設定
優秀的頭圖主視覺是專題設計的靈魂。
設計頭圖主視覺首先要考慮的是頭圖的設計風格,根據不同的題材,選擇不同風格的視覺設計。一般我會事先在紙上或是腦中勾勒一個大概,有些專題沒有具象的視覺元素那麼就從專題的文字入手,如果實在不帶感,可以將一些與專題相關的元素先拼湊在畫布上,然後嘗試各種組合,也許一會就能擦出火花。
視覺表現主要分為功能性和藝術性,功能性更加關注人的視覺衝擊,主要在視覺傳達設計的目標和功能上有所體現;藝術性對視覺傳達設計的審美特性更加重視。而主視覺頭圖則是更注重藝術性。
主視覺設定思路:通過發散,演繹出618的視覺概念,結合品牌資產JOY圖形開啟618,承載優質的內容及貨品,喚起更多對生活的熱愛,讓使用者及平臺變得更美好, 加深使用者對京東平臺的品牌印記,最高一層就是視覺與資訊的唯一匹配,這也就是我以後看到這個設計就只會想起某個特定品牌。
1、儘量用品質好一點的產品圖或背景素材,使畫面顯得更加美觀;
2、儘量使用可以延展的定位品牌形象,增加識別度和品牌感;
3、新增一些飄動的元素,可以增加畫面的層次感和熱鬧氛圍;
4、增加光影的存在會給畫面增加更多真實感和質感,賞心悅目。
二、色彩整理
有些設計師認為有些色彩是一些純粹的美學上的選擇,但是實際上,色彩對於使用者的心理和行為的影響相對更深,最終會反映在使用者體驗和行為反饋上。
經過深思熟慮的配色最終會從「不錯」提升到「優秀」,平庸的配色最終會降低使用者體驗,甚至會影響網站本身的可用性。
當然,色彩理論是一個相對複雜的主題。從使用者體驗的角度上來說,色彩所涉及到的遠不是配色方案這一個維度。通常,我們聊得最多的是不同色彩所產生的心理效應,以及多色彩搭配的時,相互之間的影響和可訪問性上的問題。
很多同學喜歡用漸變色,但是有時候會把顏色弄得有點髒。
我一般建議新手在拉漸變的色的時候,首先儘量不用同色相漸變,比如這種都是藍色,會顯得比較呆板:
可以有一些色相的變化,像這種,暗處的藍色往紫色偏一偏就會豐富一些:
在短時間以內,流行色的趨勢變化,對於用色也也同樣存在影響。這種影響是非常直接的,在時尚行業有著非常直接的體現,尤其是網頁和UI設計行業
藍色、紫色的流行在UI設計上則體現得非常明顯:
藍色:信任、溝通、憂傷。藍色是受歡迎程度最高的色彩,明亮的藍色與忠誠度和信任。紫色:高貴、靈性、神祕。紫色自古以來就是和皇室、財富聯絡在一起。紫色還能喚醒創造力,因此也是一種獨特的色彩。
在進行品牌設計的時候,選擇配色的第一步,始終是瞭解各種顏色或者色相的氣質和情感屬性。然後在具體設計的時候,進一步根據品牌的氣質和需求,在色相的基礎上調整明暗和飽和度。
精心設計的配色方案,尤其是一些意想不到的配色,不僅貼合美學上的需求,而且可以對使用者產生心理影響,讓視覺看起來更加獨特,帶來更加獨特的使用者體驗。
三、設計構圖
“構圖”都是一個重要、嚴謹的話題。設計構圖首先要飽滿,各元素佔據畫面的比例要恰到好處,在設計中,為了使畫面呈現出飽滿、空間運用合理的佈局效果,我們可以通過調整圖片和文字在畫面中的大小尺寸和排列位置,來改變畫面的佈局與結構,使空間得以最大程度的利用,從而呈現出畫面平衡的畫面效果。
使用者本能地會對不平衡的設計感到厭煩,平衡是一個作品中最重要的元素之一。平衡中的對稱關係能夠創造平衡與和諧,這種平衡狀態直觀上能夠讓使用者感到舒適。
“構圖”都是一個重要、嚴謹的話題。設計構圖首先要飽滿,各元素佔據畫面的比例要恰到好處,在設計中,為了使畫面呈現出飽滿、空間運用合理的佈局效果,我們可以通過調整圖片和文字在畫面中的大小尺寸和排列位置,來改變畫面的佈局與結構,使空間得以最大程度的利用,從而呈現出飽和感的畫面效果。
四、細節塑造
無論是在人生道路上還是工作上都是細節決定成敗,而想成為一個優秀的設計師對細節設計的掌握也非常重要,打磨細節也是我們作為設計從業者不可繞過的一個環節。在提升使用者閱讀效率的設計中,比較重要的就是主次要分明,將需要讓使用者瞭解到重要資訊需要放大,讓使用者的視覺動線有落地點
在設計時可以使用以下設計樣式,可以讓設計更柔和,視覺效果更整體,也可以加一些色調元素會讓設計更有細節。
五、總結
細節決定成敗,優秀的細節設計能讓設計體驗更加出彩,優秀的設計師都應該對每個細節有著極致的追求。其實我們可以從技巧中總結出一些規律,舉一反三融會貫通靈活運用在各個場景中,提升設計細節品質。以上就是本篇文章分享的全部技巧了,希望這些內容對大家能有一點啟發,非常感謝。
- 視覺化大屏業務之設計方案制定(下)
- 視覺化大屏業務之「需求理解」(上)
- 如何解析產品原型
- 大資料掃盲
- 京東行雲3.0|B端產研協作工具體驗升級的思考與實踐(二)
- 京東電器618(資料篇)——3C DESIGN
- 京東電器618 JOYIP(IP2.0)- 3C DESIGN
- 京東電器 618(品牌心智篇)——3C DESIGN
- 京東電器 618(視覺篇)- 3C DESIGN
- 主流移動端元件庫的對比和分析
- 乘風出海——因地制宜的設計心得
- 插畫的發展及在UI設計中的應用
- 玩轉iconfont-RELAAAY 4.0升級覆盤圖示篇
- 京東藍鯨徵信品牌及體驗升級
- 數字孿生 萬物可視-地圖在視覺化大屏設計中的實踐與運用(3D篇)
- 設計進階技巧,如何打磨視覺設計細節
- 數字孿生 萬物可視-地圖在視覺化大屏設計中的實踐與運用(2.5D篇)
- 解密城市作業系統視覺升級
- 四步建立 · 系統級色彩體系
- 關於體驗管理的幾點思考