1. 程式人生 > >從五個維度來談談視覺設計師如何闡述設計風格

從五個維度來談談視覺設計師如何闡述設計風格

設計風格是一種很虛的東西,對於大部分的 UI 設計師來說,都是如此。

相信很多人都是在一家小型的網際網路公司做設計,估計還是公司唯一的設計師,同時對設計風格又拿捏不定,總感覺是跟著產品經理或老闆的思路去做設計。比如老闆的要求是“大氣”,誰 TM 知道這“大氣”指的什麼鬼?

即使花了不少時間去研究其他公司的產品,依然做不出領導滿意的視覺稿,最後還被各個崗位的同事指點著去修改你一把屎一把尿喂大的稿子。

我上面也說了,其實這種事情(講述設計風格)對於視覺設計師而言是一種很常見的現象。我身邊也同樣有很多設計師出現這個問題,不知道如何向領導或客戶講述自己的設計風格。

說個現象,仔細想想自己是不是這樣的:我們在做視覺評審的時候,設計師講述的常常是文字對齊、線條、高斯模糊、圖片大小等視覺表現,有時候甚至沉醉於 icon 的角度及尺寸的問題。面對於產品經理與程式設計師的質疑只能說:我覺得這樣更好看、這樣比較適合我們產品的風格…之類的話。要知道,這些理由在如今這個以顯性數字指標為衡量標準的網際網路時代已顯得蒼白無力。

實話實話,想要把設計風格講清楚,的確不是一件容易的事。但絕對要避免從感性的角度來闡述事實的這種習慣,畢竟現在的移動產品從視覺表現力方面正在逐步降低要求,這種環境的變化也是要求視覺設計師應該主動去加強設計思路的原因。

為什麼要用這個顏色,為什麼要用線條、模糊、留白、卡片、陰影…說這麼多幹嘛?別人能懂?即使聽懂了,他也會從他的角度來告訴你:那我覺得這個陰影不要會更好。你怎麼回覆?

就像我說的,如果你針對你設計的視覺稿進行這種細緻問題的解答,那麼永遠都不會有規範型的答案。視覺風格講的是一個整體感受,這就需要我們從更高一個層面來解釋這個問題。

接下來我將從以下 5 個維度來說說視覺設計師講述設計風格的方法:

  1. 產品全域性色系
  2. 系統圖標
  3. 字型規範
  4. 圖片的使用
  5. 視覺操作引導

1.產品全域性色系

從全域性色系的角度出發。如果你仔細分析過那些優秀的 App,你會發現它們的顏色使用的是非常謹慎的。當中絕大部分都只會用 3 到 4 個顏色用於突出資訊的層次。就好比我之前寫的那篇配色文章《用好 MD 你也可以做配色達人》一樣,由主色、強調色、輔助色組成的整體色系,即一個產品的色彩風格。

Image title

這裡需要注意的是,我們在闡述頁面色彩的時候,不應該說:我認為紅色比黃色更適合。而是結合這幾種顏色組成的全域性色系來說明這幾個顏色的搭配能突出需求方想要的“時尚”或“大氣”的要求。

這麼做的好處是,需求方會認為你的說明非常的專業,不會隨意修改你的 Idea 。更重要的是,你可以掌握主動權,而不是以“我認為”的方式作為被動方。

2.系統圖標

說到圖示,相信很多設計師都是去 Iconfont 等網站下載,籌齊一套直接使用。我之前也說過,系統圖標的設計是考驗一個設計師功底的重要條件,所以自己設計圖示非常重要。具體可以參照我寫的《圖示設計的三個要素》這篇文章來做。

Image title

一款 App 需要一套易於識別的 Icon 來輔助資訊展示,因此圖示的風格能夠突顯出這款產品的整體風格。那麼在講述的過程中,你需要說明的是為什麼你會使用這套線性 Icon 或填色 Icon,以及它所能展示的資訊為何能夠更符合你產品的風格。

而不是糾結這個圖示的尺寸是多大,或者適不適合它所表達的意思,因為這些東西是在你講述設計風格之前就應該定好的,它們由設計師來做決策,並不是在講述設計風格的時候再去說明的(假如你在面試的時候如果說這些,面試官會覺得你的設計認知非常的基礎)。

3.字型規範

字型是 App 介面中最重要的資訊組成部分,相信這句話大部分都會認同,這也是大家一直爭論為什麼英文字型的排版比中文字型排版更好看的原因之一。

Image title

我們經常聽到如:這個產品看上去很簡潔、舒服、重點突出,而這其中最主要的原因就是文字的排版。

一般來說,我們會從產品的字型、字號、顏色等來說明字型規範,再重點去關注標題、文字資訊以及引導資訊的字型字號,通過設計對資訊進行層次的區分,希望藉此來引導使用者的視覺焦點。

所以在說明設計風格時,要著重去提字型規範這塊。

4.圖片的使用

圖片是 App 資訊組成的重要元素,它的風格會很大程度上影響整體風格。所以每次有人給我發設計稿,叫我給點建議的時候,我都會說,先把重複的圖片和文字修改了。一張設計稿,不要用同一張圖片填充所有位置(同樣不要用一句話填充所有文字段落)。

Image title

假如你在做日系風的外賣產品,你的圖片風格就要統一,不要用百度上隨便找的快餐圖來作為視覺稿的展示。很多人以為這個不重要,認為這是後期開發再確定的事情,現在就是隨便找張圖去填充下。要知道,一張視覺稿能不能通過領導的稽核,這些細節都很重要(即使對自己來說,也應該提升自身要求去作圖)。

所以在講述設計風格的時候,圖片是起到至關重要的作用的。也許你想表達日系優雅風,結果在別人看來你所展示的卻是阿富汗田園風。

5.視覺操作引導

我們期望的使用者操作,最終目標是將其引導至我們想讓他去的地方。對於電商類產品來說,這個目標也許是下單付款;對於社交類產品來說,這個目標也許是傳送資訊等等。

Image title

一款產品,每個頁面都會有許多個行動點,設計師要做的,是將其進行層級的區分,即有主次感。好比廣告,這些金主巴不得整個頁面填滿他們的廣告,但是大家都知道這不可能,所以每個頁面都需要進行合理的引導設計。

也許你覺得,視覺操作引導跟設計風格沒什麼關係,那你就錯了。操作引導很大程度上會影響視覺風格的走向,如果我們要引導使用者去執行某個操作,那麼以上說到的所有元素所組成的框架,都需要重新修改。

所以你知道有多重要了麼?當你描述完所有元素之後,最後說到視覺操作引導,那它們自然而然的就形成了這麼一個頁面,不需要過多的花哨說法,只要你前面說的四個維度順暢且合理,那最後這個框架在需求方看來是無懈可擊的,更不會輕易的讓你修改當中的元素。

小結

雖然我只做了五個維度的說明,但相信大家已經知道如何去講述設計風格的方法論。當然也不僅僅是從這五個維度出發去說明,要講述的維度其實還有很多,這就需要大家自己去研究了。

通過這一系列的梳理,我們知道如何找到影響設計風格的關鍵因素。剩下的就是由你來告訴需求方,這些點形成了我們的設計風格。至於怎麼說,上面寫的很清楚了,好好思考下。

找準方向與維度,從大方向去講解你的設計風格,只要你執行了,那它就不是什麼困難的事情了。

相關推薦

維度談談視覺設計師如何闡述設計風格

設計風格是一種很虛的東西,對於大部分的 UI 設計師來說,都是如此。 相信很多人都是在一家小型的網際網路公司做設計,估計還是公司唯一的設計師,同時對設計風格又拿捏不定,總感覺是跟著產品經理或老闆的思路去做設計。比如老闆的要求是“大氣”,誰 TM 知道這“大氣”指的

MySQL基礎篇(02):維度出發,審視表結構設計

本文原始碼:GitHub·點這裡 || GitEE·點這裡 一、資料場景 1、表結構簡介 任何工具類的東西都是為了解決某個場景下的問題,比如Redis快取系統熱點資料,ClickHouse解決海量資料的實時分析,MySQL關係型資料庫儲存結構化資料。資料的儲存則需要設計對應的表結構,清楚的表結構,有助於快

維度尋找交集

處的 但是 表達 定義 地址 2017年 baidu 明顯 str 1.六度分離理論 六度分離(六度區隔)理論(Six Degrees of Separation)認為:“你和任何一個陌生人之間所間隔的人不會超過五個,也就是說,最多通過五個人你就能夠認識任何一

大資料學習:帶你維度分析大資料發展趨勢

如今“大資料”已不再是單純描述資料特徵的詞彙,而是一個多學科交融的熱點研究領域,其背後有著複雜和深刻的新理念。 今天我們帶大家從“技術、工程、科學和應用”這四個維度分析大資料的研究現狀與挑戰,探討未來研究的側重點和發展趨勢。 推薦下小編的大資料學習群;前面是251中間是956後面是502,不管

Python爬取數萬條北京租房資料,6維度揭穿房租瘋漲的祕密!!!

導讀:昨天還幻想海邊別墅的年輕人,今天可能開始對房租絕望了。         8月初,有網友在“水木論壇”發帖控訴長租公寓加價搶房引起關注。據說,一名業主打算出租自己位於天通苑的三居室,預期租金7500元/月,結果被二方中介互相擡價,

角度理解協方差(covariance)

起源:協方差自然是由方差衍生而來的,方差反應的是一個變數(一維)的離散程度,到二維了,我們可以對每個維度求其離散程度,但我們還想知道更多。我們想知道兩個維度(變數)之間的關係,直觀的舉例就是身高和體重(青少年),我們採集到的資料裡面有一種固有的性質,那就是身高越高的樣本似乎總有著更大的體重,那我們如何衡量這種

方面解說:數字技術對就業的有怎樣的影響,你知道嗎?

    一直以來人們對技術進步又愛又恨,技術進步所帶來的糾結在歷史上不勝列舉。     公元一世紀,羅馬皇帝韋巴薌拒絕採用新機器運輸神廟石柱,因為這會搶了工人的飯碗。     十八世紀工業革命後,英國工人為奪回被機器代替的工作崗位,開始搗毀機器,發洩憤怒,掀起“盧德運動”

如何管理保護佈線系統,方面說明

當前,企業資訊化的程度越來越高,單體檔案的容量越來越大,資料中心所支援的應用越來越廣泛,這些都使資料中心內傳輸和儲存的資訊量日益增長。佈線介質對傳輸的影響較大,也需要特別注意選擇。 (佈線) 標籤標識系統 標籤標識是佈線系統管理的基礎,也是資料中心的基本要素。好

需求評審維度框架分析及其帶來的啟示-3-典型需求評審

典型情境是指軟體開發的常見情境,本文選擇如下來進行分析: 1. 傳統瀑布模型開發下的需求評審 2. 使用IEEE Std. 1028的需求評審 3. 敏捷開發下的需求評審 傳統瀑布模型下的需求評審 對傳統瀑布模型現有需求評審的分析 傳統

京東618:一箇中心原則,談談物流系統的大促優化實踐

作者:者文明 編輯:木環、郭蕾 在京東的訂單流鏈路中,可以簡單的劃分為訂單前和訂單後兩部分,我們在京東主站上搜索商品、瀏覽商品詳情、把商品加入購物車、提交併支付訂單等環節屬於訂單前,訂單提交之後,訂單資訊流就進入訂單後的物流系統部分。每逢 618 大促期間,大家可能會更多的聚焦到網站 PV、秒殺系

Java-Random 人中隨機三 且不能重複

package demo; import java.util.Random; /**  * 隨機不重複的三個人  *   * @author Weirdo-world  *  */ public class Demo8 {     public static void m

方法能提高程式設計師工作效率

程式設計師加班的原因很多,工作效率不高也會導致程式設計師加班,如何能提高效率能早點下班呢? 一、熟記IDE快捷鍵。很多人會說了,這個方法不行,各種快捷鍵背的熟熟的,結果實際用的就幾個。這裡推薦一個

我也 30 了,談談程式設計師的迷茫年齡

今年三十了,到了傳說中程式設計師最應該迷茫的年齡了,那麼我迷茫嗎,沒的說,按照某司34歲就要勸退的要求,我還有4年的程式生涯。 為什麼30歲的程式設計師就應該迷茫呢? 30歲正是經過了七八年的職場生涯,技術、經驗、職業素養等各方面都到了一個比較充沛的階段。如果前幾年不是在混日子,到了現在,踏踏實實幹活

需求評審維度框架分析及其帶來的啟示-總起

摘要 近年來隨著CMMI、敏捷軟體開發的推進,出現了多種多樣的需求評審型別,這些型別超出了標準評審型別的範圍。根據這些情況進行分析,得到了一個新的軟體需求評審框架,這個新框架由5個維度組成: 1,組織形式;2,時機;3,側重;4,評審者;5,物件 分析了分別

5維度觀察和改善團隊效率

團隊效率的提升不能依靠時間的自然增長來完成,作為管理人員必須主動思考如何有效的提升團隊效率。結合自己幾年的管理經驗,我覺得可以從以下幾個維度來考慮: 1.時間 不同角色的人員有不同的工作型別,但是他們的工作一般都是有工序的,比如我們公司程式設計師的一般工序是這樣的:需求

晶片驗證全視之三: 驗證能力的維度

可能在貫穿到整個驗證系統思想裡面,我們都會不斷重複驗證人員該具備的素質。為了可以將抽象的詞彙具象出來,我們列出了驗證人員在驗證流程中需要具備的五個技術維度。接下來讓我分別解釋這五個維度: 完備性:該維度要求驗證的充分。無論你從專案經理、系統人員、設計人員

雲電腦哪個好?——新睿雲3維度教你選擇適合自己的雲電腦

技術發展 能力 建議 cloud 硬件 這一 是什麽 雲服務 image 提起雲計算,很多人想到的都是各個IT企業程序員以及其背後的服務器,距離一般用戶還是非常遙遠,畢竟需要專業知識,門檻很高。不過隨著技術發展,雲電腦這款產品的出現,開始讓沒有編程基礎的用戶也能享受到雲計算

10方法幫你搞定Web設計風格指南

今時今日,網站的建立正變得越來越複雜,而且一般都不是一個人就能幹的了的。在建立網站過程中,我們需要保證設計前後一致,並符合業務目標,同時還要盡全力為使用者打造有趣的使用體驗。 為了確保整個團隊在設計網站各個組成部分或在改善開發人員設計成果時彼此之間能夠充分協調一致,你需

冗余、性能、成本這三方面比較RAID各模式的差異

raid 磁盤陣列 raid模式服務器一般都會安裝RAID卡(獨立RAID卡需要購買的),RAID卡自帶緩存。冗余從好到壞:raid1、raid10、raid5、raid0性能從好到壞:raid0、raid10、raid5、raid1成本從高到低:radi0、raid5、raid1、raid10根據數據的存儲

談談網絡營銷的幾核心問題

href 推廣 又能 企業 普通用戶 還要 一個 曝光 就是 在現代,越來越多企業營銷模式開始轉型,慢慢的采用了網絡營銷的推廣方式,而我們做網絡營銷一般有兩個主要目的,提升自己品牌的曝光率和帶來直接銷售。然而很多做網絡營銷的常常會忽略幾個核心問題,這是致命的錯誤。