❶ 如何設計好Banner廣告圖
Banner廣告無處不在。從網站首頁頁頭的內容推薦到側邊欄,從文章內到圖庫列表中,你會在幾乎所有內容存在的地方找到他們的影子。通常情況下,它們看起來漂亮,略顯浮誇,還會蠶食你的網路瀏覽體驗,盡管我們在想盡一切辦法降低它們給用戶的負面影響,但是壞名聲總是不可避免地同它們綁定到了一起。
實際上,Banner廣告對於用戶的影響是巨大的,合理的運用,肯定是事半功倍的。那麼到底要如何打造不讓人生厭、轉化率可觀的優秀的的Banner廣告呢?
空泛的理論或許不夠接地氣,不妨從下面50個案例中,來學習Banner 廣告的設計技巧。
1、風格化的圖文排版
這是Dear Miss Modern 所製作的一組Banner廣告,每張圖片在文本和圖片素材上都保持了氣質和風格上的一致性。字體的形式感和圖片素材中圖像和圖形的搭配讓整個廣告Banner 給人的感覺更加強烈。如果圖片並非是這種強風格化的,而是更加微妙的話,應當採用更加經典、耐看的字體來進行搭配,道理是一樣的。
2、營造層次
Visa 的節日廣告Banner就充分運用了層次結構的優勢。照片的挑選就是有景深有層次的美食,讓人第一時刻會被它吸引,而文字排版則覆蓋在虛化的遠景上,確保了可讀性,也增加了一個層次,傳遞出信息,確保不會混亂。按鈕的位置正好置於美食之上,文字之下,恰到好處地吸引人來點擊。
3、使用相關圖標
這個來自Google的廣告Banner 通過手繪的圖標給人帶來一種個人化的體驗。
圖中每一個手繪的圖標都非常易於識別,雖不復雜,但是給人營造出一種仿若在世界中穿行的感覺。這種難以描述但是令人觸動的感覺讓這個廣告不再只是一個廣告。
4、增加出人意料的元素
一個招聘廣告應該怎麼做?谷歌的這個招聘廣告也算的上是出人意表了,沒有高大上的說明和漂亮的妹子,而是用形同小區布告欄的手寫小廣告一樣的塗鴉手寫廣告。這種廣告不復雜,但是卻出人意料,這種熟悉的感覺也足夠令人觸動。
5、加入插畫
這個案例同樣是谷歌的廣告圖,插畫的加入讓整個廣告圖充滿了童真和趣味,加上扁平化的元素,整體看起來也比較統一。這種插畫實現起來不難,看起來可能有點粗糙,但是確實很友好。插畫和攝影圖片不同,它能賦予設計以後者無法企及的氣質,當然,你得用好才行。
6、布局適配
FatCow 的這個廣告圖是由 Envato Studio 所設計的,為了適配不同的廣告位,整個廣告製作了多個不同尺寸的版本。將最常用的廣告圖設計出來之後,將其中的元素進行二次編輯,製作成能夠適配其他廣告位的尺寸,其中某些元素需要調整,移除或者新增,這樣就可以實現了。
7、使用絢麗的色彩
這個Google Music 的廣告採用了活力十足的粉色,搭配的是同樣高飽和度的藍色,兩者形成鮮明的對比,也給人留下深刻的影響。和普通單色調為主的Banner相比,這種色彩絢麗的多色搭配更加抓人眼球,不過使用的時候需要多加註意,確保可讀性和協調性。
8、保持簡約
如果說有可口可樂有什麼做的非常突出,那麼保持簡約的設計絕對是諸多優點之中最值得學習的一個。這個可口可樂的廣告Banner 設計很好的延續了這一傳統:產品圖 LOGO 宣傳語 標志性配色。雖然內容不多,但是效果很贊。
一個塞滿全部信息的Banner廣告圖對你而言不會有啥好處,因為用戶壓根不會去看。將最重要的信息呈現出來,這就夠了。
9、關注潮流
關注流行文化和正在風靡的趨勢,對你設計banner廣告而言,非常有用。Campbell 就是這樣,它很好的利用了星球大戰電影這個IP,推出相關主體的產品,吸引星球大戰的粉絲前來購買產品。合理的藉助正在流行的趨勢和話題來宣傳對應的產品,絕對事半功倍。
10、使用紋理
Campbell 的這個廣告是運用紋理提升質感的典範。筆刷式參差的邊緣讓整個廣告的視覺效果更加微妙,廣告圖中其他的元素談不上有多突出,但是紋理的加入如同點睛之筆,使得整體的效果都提升上去了。
11、藉助利基
利基是指針對企業的優勢細分出來的市場。廣告通常需要針對目標人群來投放,這樣才能達到最好的效果。
Target 的嬰幼兒系列產品的廣告主要是針對母親們投放的,那麼還有什麼比一個粉色的、可愛的場景更容易吸引到她們呢?
12、用圖展示,而非語言
Zarbee 的維生素廣告banner 在圖片的使用技巧上就相當突出,水果來置換維生素,強化概念,而非用語言來描述,巧妙而直觀。
13、清晰的聚焦點
當廣告有明確清晰的聚焦點之後,品牌和用戶之間的溝通就更加直接了。這個Banner 廣告圖也是為Target 設計的,品牌LOGO從位置到顏色都足夠顯眼,加上美女的姿勢在結構上的引導,Target 的品牌LOGO無疑是整個廣告圖的焦點。
14、使用意象做引導
麥當勞的這個廣告就是很典型的使用意象替代文字來傳遞信息,咖啡這一單詞被相應的圖片所替代,傳遞信息的同時,還讓整個廣告圖不再單調,變成圖文混排。單純的文字和圖片都能夠傳遞出信息,但是混合使用則顯得更加有趣,走心。
15、讓產品發聲
在這個廣告圖當中,麥當勞的McFlurry 無疑是核心,不論是意義上的,還是視覺上的。灰色的背景讓色彩鮮艷的MacFlurry 主體顯得足夠醒目。讓產品本身在廣告中突出展現,可以讓整個Banner 表現力和針對性都更強。
16、創造角度
奧迪的這個廣告圖通過分割空間來呈現不同的信息,但是最引人矚目的是小幅扭轉的角度給人帶來的獨特視覺體驗。這種調整讓特定的信息更加矚目,配合圖片中車體本身的角度,使得整個廣告圖更加富有活力。
17、使用遮蓋
使用特定色彩的半透明層來遮蓋背景圖,可以讓前景的文字內容信息脫穎而出。這種設計手法現在並不鮮見,它讓背景信息從遮蓋中透出,同時讓文本內容可讀性更強,整體層次感增強。
18、設置場景
Tiffany & Co 珠寶的廣告圖的設計,稱得上是有趣好玩,旋轉的雞尾酒杯和漂亮的珠寶組合暗示出它們經常同時出現在同一場景,營造出高雅、精緻的感覺。通過相關的物品組合從而暗示用戶,讓他們自行腦補出場景。
19、創意字體
好的排版能夠吸引用戶的注意力,而Nike 的這個廣告尤其突出,它在字體上的設計富有創意,這些被肢解的字體同樣具備強大的識別度,但是這樣的設計讓它們看起來更加輕盈,也更富有科技感。這種視覺上的強化,讓廣告和產品更加吸引人了。
20 、使用風格化的插畫
插畫可以簡約,同樣也可以細節滿滿。風格化的插畫可以通過細節和風格來增加信息的厚度,講述故事,傳遞感受。這種插畫力量感十足,充滿能量,和Nike的品牌氣質相當符合。
21、使用多種元素
雖然有風險,但是合理的將多種不同的元素搭配在一個廣告圖中,可以產生不錯的形式感,就像這個ebay 的廣告圖這樣。漂亮的產品圖,標准字體,手寫字體和插畫元素,協調地組合成一個廣告圖。當然,每個元素的存在都是有理由的,各司其職,並非隨機搭配,請務必記住這一點。
22、成為流行風向標
將潮流和趨勢融入到Banner的設計當中來,讓它成為廣告和用戶之間的紐帶。這個來自ebay 的廣告就是這么做的。將「Hotline Bling」 替換成「Haute Line Bling」之後更好地解讀了時下流行的這種文化,從而吸引更多關注這一時尚的用戶。
23、自由舒展
並不是每一個廣告Banner 都必須藉助柵格,讓每個元素都精準地對齊排列,自由舒展的設計同樣有效。Yoplait 的廣告就是這樣設計的,這樣顯得更加有趣、富有童真。當然,這樣的設計是否合適要看它的產品的氣質和特色。
24、創建聯系
在設計的過程中,讓你的廣告圖中的圖片和文字之間保持足夠的關聯是非常重要的。Talbots 的廣告圖中圖片和文字的氣質就非常接近。
25、製造對比
對比是吸引用戶注意力的有效手段,而ESPN的這個廣告Banner 的設計就是深諳這一技巧。深紅色的背景下,白色的文字就顯得相當突出了。字體挑選的也是銳利而輕盈的類型,這樣一來,信息的傳遞有效度就更高了。
26、對稱設計
對稱式的設計可以很好地平衡廣告中的元素,設計師們可能經歷了深入的思考才有此設計,但是輸出卻是非常迅速的。這則來自蘋果的廣告也不復雜,黑白的音樂家照片基本上圍繞著Apple Music呈軸對稱,同時保持了一定的錯落美。這種簡約的設計簡單但是主次分明,走心。
27、目標用戶的生活指南
就像Chegg這個廣告一樣,如果你想吸引特定的用戶群體,不妨站在他們的立場,在廣告中注入針對他們的生活方式指南。站在特定用戶的立場上來表述、展現產品,能夠更容易獲得共鳴,從而得到更多的點擊。
28、使用動效
在靜態的頁面中,最容易吸引人注意力的無疑是動態的元素。如果使用動效來呈現你要表現的廣告內容,可以讓你的內容更快被用戶獲取到。當然,前提是設計要足夠簡潔明了,這樣可以避免內容瑣碎,更容易被用戶Get到。
29、鋒銳而鮮明
吉列剃須刀的廣告在視覺上稱得上是鋒銳而鮮明的典範,銳利的角度,深色背景上鮮明的剃須刀圖片,稜角分明的字體和強對比的配色方案,這一切都讓這個廣告圖在視覺上足夠清晰醒目,令人慾罷不能。
30、製造視覺深度
Honda 的這個廣告圖設計並不復雜,它的特色在於背景上黃色的線條筆觸。原本彷彿懸浮於空中的汽車在線條的襯托下彷彿落在地面之上。並不需要太過復雜的設計,就可以為廣告圖製造視覺深度,讓人留下印象。
31、使用獨特的字體
在廣告Banner圖當中使用個性化十足的字體也同樣可以有效地吸引用戶的注意力。百事的這個廣告所用的字體富有個性的同時,還清晰可讀,給人玩鬧有趣的感覺,又不影響信息的傳達。
32、使用多樣漂亮的排版
對於漂亮的文字排版,絕大多數的用戶還是很吃這一套的。這個California Pizza Kitchen 的廣告就是是McGrath Creative 為他們精心設計的,不止排版設計頗為精緻,而且富有創意地同Pizza 本身結合起來。
33、使用簡單的圖片
簡約直觀的圖片在網站上非常實用,它們通常會更為高效地展現內容,讓廣告Banner的信息傳遞的跟加直觀。目前設計師們通常會使用扁平風的簡約插畫來襯托主體、增加信息量,就想Coda 的這個廣告圖。
34、使用紋理增加視覺深度
阿迪達斯的廣告圖在視覺上非常有意思,背景的紋理並不繁復,但是規律而富有科技感的線條不僅增加了視覺深度,而且營造出和品牌氣質貼合的速度感。
35、使用品牌色
如果廣告banner中沒有使用PayPal 標志性的藍色,僅是圖中的圖片並不會讓你留下深刻的印象,但是恰恰是品牌色的使用,讓圖片和品牌綁定到了一起,互相促進,令你記住。
36、不要只想著促銷宣傳
廣告Banner圖是用來促銷的,這沒問題,但是有的時候並不需要做的那麼明顯。這個來自Free People 的廣告鼓勵用戶不要只是買買買,而是多看多逛多對比,雖然這樣同樣可以促進銷售,但是看起來更像是站在用戶角度來提建議。
37、使用大膽的色彩
I,Anna 的廣告圖配色稱得上是大膽而飽滿,紅色充滿活力而醒目,而黃色的加入,則讓整個配色更加協調,更容易吸引用戶的注意力。
38、來個簡單的插圖
有的時候,精緻的插畫並不一定符合你的品牌或者想要表達的東西,星巴克的這個廣告就是這種情況下誕生的,細膩精緻的圖並不符合他們的需求,反而是扁平而略顯拙稚的插圖來的更加簡單到位。它呈現出新款飲品的成份構成,這個廣告圖讓你彷彿有身在星巴克看著菜單的感覺。
39、引入動效
這個來自星巴克的廣告圖,在小小的一塊區域當中展現了相當引人注意動態的元素。波紋從中央出發,向外發散,當用戶看到這個廣告圖的時候,會不由自主地被它吸引到。
40、完全動起來
如果你對於動效的運用足夠熟練,不妨讓整個廣告Banner 中的元素都運動起來,這樣更容易脫穎而出。設計師將應用在平板當中的使用流程藉助動效完全展現出來,短短幾秒讓你獲取到靜態Banner圖所無法企及的信息量,體驗優秀。
41、使用幾何紋理
Corona 的這個廣告圖很好地將之前所流行的Low-Poly元素運用到橙子這個意象當中,這種幾何紋理賦予橙子以一種冰爽剔透的感覺,讓你不由得對Corona的啤酒產生興趣。
42、用有趣的圖形分割空間
Brightgreen 的這個個廣告圖使用菱形割裂為兩個不同的空間,這樣使得廣告圖形成了自然的兩個層次,留白的部分承載文字信息,而綠色部分則承載著圖片,讓整個圖片主次分明,又充滿質感。
43、加入陰影
長陰影是之前流行過很長一段時間的設計趨勢,而Webckdesign 所創造的這個廣告則是相當不錯的一個使用案例。如果沒有陰影,那麼整個圖片會顯得相當單調,長陰影的加入讓它看起來不在那麼扁平,擁有了層次。
44、將圖案作為紋理
和微妙細膩的圖案不同,將特定的圖案作為紋理疊加在背景上,可以營造出特定的氛圍。Anne Sophie Hostert 所設計的這個廣告圖利用雪糕和菠蘿的圖案紋理給人營造出夏天的感覺。
45、使用色塊分割
如果你不想將手頭的圖片僅僅只是用到廣告圖中作為背景,那麼不妨將它分割成不同的部分,同單色色塊結合到一起使用,整個廣告圖的形式感顯得更強了。
46、使用線條裝飾
廣告圖絕大多數時候都是圖片和文字組成的,但是適當的加入一些裝飾會讓廣告圖看起來更加飽滿。相比於各種高光,線條的裝飾性也不弱,而且更加自由,效果也頗為不錯。
47、講述故事
廣告的終極目標是賣出產品,而最有效的方式還是講述真實用戶的使用體驗。這個廣告是為亞馬遜的飲品電子書APP Audible所設計的,圖片中的場景旨在宣傳他們的產品在許多場景下都能無干擾的使用。
48、幽默一點
幽默的展示通常會比強勢的推銷更有效果,他們更願意看到引人發笑的內容。
49、使用簡單的字體搭配
不用進行繁復的排版設計,將幾種風格一致、簡單易於識別的字體搭配到一起,就像必勝客的這個廣告一下,同樣可以達到增加信息量、令人愉悅的效果。
50、使用簡單的圖形來強調
❷ ui設計:流行的幾種banner的處理類型
banner是我們接觸工作後在製作品牌和內容宣傳上最常見的工作,它的展示起到著非常重要的引導性作用,一個界面的第一視覺往往會被優秀的banner所吸引。這兩天抽空整理分析了一些常用的類型,對設計banner頭疼的小夥伴們要仔細看看哦~
一般來說,一個好的Banner首先是要保證信息傳達准確,然後再需要保證畫面的協調感和氛圍,可以看到,一張Banner,不僅僅由點或者不僅僅由線組成,而是點、線、面相互組合,相互平衡,最終形成一個版式豐富的Banner圖。
以下素材部分源自學員作品,部分源自花瓣(感謝設計師們的分享,如果看到自己的作品,介意的請聯系刪除~)
色塊分割
微妙的漸變已經作為已經設計趨勢回歸了。漸變的背景,甚至漸變的疊加,都能讓你的Banner設計風格化,搭配圖片、紋理和文字,漸變能給人多種多樣的體驗。色彩濃郁是其特點
和UI設計不同,在電商和廣告Banner 的設計當中,紋理一直都存在,甚至是非常常用的元素。紋理能夠很好的提升整個Banner 的信息量和整體的質感。當然,在使用紋理的時候千萬不要讓紋理喧賓奪主。
當我們在做一個banner的時候,如果沒有特別的要求,其實我們是有很多個方向選擇的,首先問下自己你是想要突出什麼信息呢?是突出商品呢?還是突出文字呢?還是突出整體的氛圍呢?還是強調整體的協調感呢?還是說強調品牌呢?這個可以通過體會用戶心理來判斷方向。
好了今天就先到這里,講了這么多小夥伴們get到了幾點呢?
❸ banner設計表現手法有哪些
一、Banner 組成
1. 方案(可有可無)
2 模特、商品(可有可無)
3. 背景(可有可無)
4. 點綴元素(可有可無)
5. LOGO(可有可無)
二、Banner 定位方向、風格形式、表現形式、排版
辨別的前提是先多欣賞,那麼怎麼欣賞呢?我主要從定位方向和表現手法2個方面帶大家來欣賞Banner。
(1)先說定位方向:
不同類型定位的banner傳達給人的感受也是不一樣的,有的特別冷淡,有的特別熱情,它們在視覺上帶給我們的差異感受其實就是來源於定位方向的不同。
(2)Banner的表現手法:
很設計師可能並沒有意識到,其實為了達到某種效果或目的,實現方法是多種多樣的,不用在一棵樹上弔死,去用自己最擅長或最感興趣的方式去實現就好了,只要能達到自己要的目的和效果就行。
三、如何分析一個 Banner 呢?
我主要是這幾個方面來分析一個Banner:
1. 定位
2. 信息層級
3. 可讀性
4. 創意
5. 舒適度
6. 細節
四、怎樣辨別Banner的好壞呢?
說到辨別好壞,記住這幾個方面:
1. 定位是否准確
2. 信息層級清不清晰
3. 文字可讀性強不強
4. 創意好不好
5. 看起來舒不舒服
6. 細節有沒有注意
不同的banner設計表現手法所設計出來的banner效果是完全不同的,而且每個人的審美觀念不同,所以對於大家來說設計banner還是要從客戶角度出發,看看網站產品的服務客戶范圍,根據這個來設計。
❹ 公司的文案策劃需要做banner上的文案么這個我負責做 還是美工負責做弔旗上的文案也需要我做
首先你要看你自己是什麼職位,
如果你是美工 那你需要提供好的,文案信息 來設計布局。
如果你是文案,那你只需要根據老闆意思 提供好確定的文案給設計師即可。
如果是小公司 沒有文案和設計區分 那你只能自己想文案 自己做圖了。
❺ 互聯網廣告都有什麼方案
第一種形式:搜索引擎營銷
搜索引擎營銷是目前最主要的網站推廣營銷手段之一,尤其基於搜索結果的搜索引擎推廣,因為很多是免費的,因此受到眾多中小網站的重視,搜索引擎營銷方法也成為網路營銷方法體系的主要組成部分。
第二種形式:即時通訊營銷
即時通訊營銷又叫IM營銷,是通過即時工具幫助企業推廣產品和品牌的一種手段。
第三種形式:病毒式營銷
病毒式營銷名字聽起來挺嚇人,但其實是一種常用的網路營銷方法,常用於網站推廣、品牌推廣等,病毒式營銷利用的是用戶口碑傳播的原理,在互聯網上這種「口碑傳播」更為方便,可以像病毒一樣迅速蔓延,因此病毒式營銷是一種高效的信息傳播方式,而且由於這種傳播是用戶之間自發進行的,幾乎不需要費用。
第四種形式:BBS營銷
BBS營銷又稱論壇營銷,就是利用論壇這種網路交流平台,通過文字、圖片、視頻等方式傳播保險公司的品牌、產品和服務信息,從而讓目標客戶更加深刻地了解保險公司的產品和服務,最終達到宣傳公司保險品牌、產品和服務,加深保險市場認知度的效果。
第五種形式:博客營銷
博客營銷是通過博客網站或博客論壇接觸博客作者和瀏覽者,利用博客作者個人的知識、興趣和生活體驗等傳播保險理念和產品信息的營銷活動。
第六種形式:聊天群組營銷
聊天群組營銷是即時通訊工具的延伸,是利用各種即時聊天軟體中的群功能展開的保險營銷,目前的群有qq群、msn群、旺旺群、新浪聊天吧等等。
第七種形式:網路知識性營銷
網路知識性營銷是利用網路(微博)的「知道」、「網路」、新浪的「愛問」或公司網站自建的疑問解答板塊等平台,通過與廣大客戶之間提問與解答的方式來傳播公司的品牌、產品和服務的信息。
第八種形式:網路事件營銷
網路事件營銷是保險公司通過精心策劃、實施可以讓公眾直接參與並享受樂趣的事件,並通過這樣的事件達到吸引或轉移公眾注意力,改善、增進與公眾的關系,塑造保險公司的良好的形象。
第九種形式:網路口碑營銷
網路口碑營銷是把傳統的保險口碑營銷與網路技術有機結合起來的新營銷方式,應用互聯網互動和便利的特點,通過客戶或公司保險營銷員以文字、圖片、視頻等口碑信息與目標客戶之間進行互動溝通,兩者對企業的品牌、產品、服務等相關信息進行討論,從而加深目標客戶的影響和印象,最終達到網路營銷的目的。
第十種形式:網路直復營銷
網路直復營銷是指保險公司通過網路,直接發展分銷渠道或直接面對終端客戶銷售產品的營銷方式。譬如:B2C,B2B等。網路直復營銷是通過把傳統的直銷行為和網路有機結合,從而演變成了一種全新的,顛覆性的營銷模式
第十一種形式:網路視頻營銷
網路視頻營銷指的是保險公司或營銷員將各種視頻短片放到互聯網上,宣傳公司和自己個人品牌、產品以及服務信息的營銷手段。
第十二種形式:網路圖片營銷
網路圖片營銷就是保險公司把設計好的有創意的保險圖片,在各大論壇、空間、博客、和即時聊天等工具上進行傳播或通過搜索引擎的自動抓取,最終達到宣傳保險公司品牌、產品、服務等信息,來達到保險產品營銷的目的。這種圖文並茂的保險銷售圖片,說服力強、形象生動,客戶容易接受。
第十三種形式:網路軟文營銷
網路軟文保險營銷,又叫網路新聞營銷,通過門戶網站或行業網站等平台傳播一些具有專業性、新聞性和宣傳性的文章,包括新聞通稿、深度報道、保險理賠案例分析等,把公司的品牌、人物、產品、服務、活動項目等相關信息以新聞報道的方式,及時、全面、有效的向社會公眾廣泛傳播的新型營銷方式。
第十四種形式: RSS營銷
RSS營銷又稱網路電子訂閱雜志營銷。RSS營銷的特點決定了其比其他郵件列表營銷具有更多的優勢,是對郵件列表的替代和補充。使用RSS的都是以行業業內人士居多,比如研發人員,財經人員,企業管理人員等,他們會在一些專業性很強的科技型、財經型、管理型等專業性網站,用郵件形式訂閱保險公司的雜志和日誌信息,而達到了解行業信息的需求。
第十五種形式: SNS營銷
SNS營銷就是利用SNS社交網站的分享和共享功能實現的一種營銷,是隨著網路社區化而興起的營銷方式。SNS社區在中國發展時間並不長,但是SNS現在已經成為備受廣大客戶歡迎的一種網路交際模式。
❻ banner設計如何創作完美配色方案
1、從色輪開始
色彩看起來非常的簡單,但是直到今天它依然是設計師手中最實用的利器。色輪不僅僅是一系列色彩的簡單組合,它暗含色彩之間的關系和規律,可以幫你構思配色,確定色彩之間的搭配是否協調。
2、色調和色彩
很少有設計師直接在色輪上取色就直接拿來用的,因為絕大多數時候,配色是需要經過調整才能用的。這個時候,你就需要調整色彩、色度和色調這些屬性:
色彩:顏色+白色
色度:顏色+黑色
色調:顏色+灰色/白色/黑色
這些調整方式能改變色彩的飽和度,讓你的配色方案變的不一樣。
3、黑色、白色和中性配色
挑選一兩個明亮的色彩並不足以支撐整個配色方案,那些經常被人忽視的色彩可能占據整個設計的色彩中的絕大部分,它們就是以黑和白為代表的中性色。
中性色為其他色彩搭建了表現的舞台,讓他們展現性格營造氛圍。
4、避免彩虹式配色
色彩的使用應該是有節制的。你的配色方案中並不需要5種甚至10種色彩同時存在,最好的配色方案通常只是2~4種色彩的搭配。好的設計和配色方案會讓每種色彩具備它獨有的作用與角色,讓色彩各司其職。
5、結合內容考慮配色
優秀的配色方案並不只是確保視覺上的一致性,會讓內容和色調情緒上保持一致。
6、堅持遵循配色方案
當你創造出一套優秀的配色方案的時候,你會盡量將這個方案貫穿整個項目。這個時候,你應當建立一套規則,來確保整個配色能夠系統化地貫穿到整個項目當中。
所以在banner設計中,大家需要做好配色方案的設計工作,這樣設計出來的banner才是優質的。
❼ 如何做好一張Banner
一個好的交互設計對產品的成功起著很關鍵的作用。UI所做的就是用戶最先接觸到的東西,也是一般性的用戶唯一接觸到的東西。用戶對於界面視覺效果和軟體操作方式的易用性的關心,要遠遠大於他對底層到底用什麼樣的代碼去實現的關心。如果說程序是一個人的肌肉和骨骼,那麼UI設計就是人的外貌和品格!都是一個成功軟體產品必不可少的重要組成部分!對我而言程序懂得不多所以只是從UI設計與軟體產品整體的關系和如何才能使軟體產品得到最佳的UI設計角度來談。 現在我們的軟體產品存在的一些問題有技術方面的問題,但是更多的問題來源於各個部門、各個項目小組的之間的配合。我們現有的開發流程一般都是由市場部門提出客戶需求,產品設計人員提出產品設計報告,開發部門設計開發計劃,由各個小組分別開發一個模塊,最後整合成為一個完整的軟體產品。在這些流程之間UI設計應該參與那一個部分,每一個部分應該做到什麼地步才可以使產品得到最好的UI設計效果呢?下面我們會在每一個部分具體分析。 首先分析一下現在的問題所在,在一些軟體業比較發達的國家軟體產品的UI設計過程貫穿了軟體開發的自始至終,而且是必不可少的。而在中國產品UI設計並沒有被廣泛接受,就算是已經有了UI設計師的一些企業也沒有對產品的UI有著足夠的重視,一般來講他們大都會把重點放在如何使用代碼實現所需要的功能,在我看來這只是一個成功軟體產品的一個部分。一個優秀軟體產品的開發過程應該是由四個部分組成: 1.軟體產品的設計(業務建模) 2.系統的設計(技術建模) 3.分單元的開發(把軟體各個部分拆分分單元編寫代碼) 4.測試(分為單元測試、系統集成測試和產品功能測試),這些是由軟體研發部門做的工作。 除去以上軟體開發過程的四個部分還有用戶需求和用戶驗收測試,這兩個過程是由市場部門和產品用戶一起完成。所以說用代碼實現產品功能(coding過程)只是軟體開發的一個步驟。現在我們回到UI設計的角度來看,作為UI設計人員我們需要全程參與到軟體開發過程中,而不只是在某一個步驟參與,現在在大多數軟體企業里UI設計師只是在產品的coding過程的時候才實質性的參與到軟體開發過程里,而在其它幾個步驟里只是參加甚至根本沒有參加(在這里我要強調「參與」和「參加」是兩個詞的不同概念,「參與」指的是完全加入到開發行列開始進入設計階段,而「參加」指的只是旁聽會議或者提出一些簡單的意見並沒有開始進入設計階段),這樣就會大大降低軟體產品的開發效率使開發成本成倍上升甚至導致整個產品的不成功!這並不是危言聳聽,下面我們分析一下在一個軟體產品的開發過程中UI設計應該怎麼做、做到什麼地步才能避免上邊提到的那些問題? 下面我會根據軟體開發的過程解釋上邊的問題,剛才我提過軟體開發過程的幾個步驟, 1.產品建模 2.技術建模 3.分模塊開發 4.測試,那麼我們也分為這四個部分進行討論: 一.產品建模時期: 我們首先來了解一下「輸入」和「輸出」,在UI設計里是很重要的兩個概念,經常會有人過來對我說「我們有一個軟體產品需要美化一下」然後再也沒有什麼深入的解釋了,僅僅這句話我的工作就要開始了,然而這個軟體是給誰用的?是干什麼的?我們卻一無所知!成功的UI設計首先要有完整的「輸入」,怎麼才能叫做完整的「輸入」呢?也就需要UI設計師從整個軟體產品的策劃階段就開始介入,在產品用戶(也就是客戶)向市場部門或者產品部門提出產品需求的時候就要開始參與到產品策劃開發過程中來,這一部分對於UI設計師而言就是第一個輸入階段,並且在這個階段里UI設計師也需要提出一些對產品交互設計的意見,以便產品部門在做產品設計的時候更多的考慮到產品的交互性和功能的簡單表現原則,有很多軟體在設計階段就被加入了許多並不是用的附加功能,其實一個好的軟體設計就是要用最簡單的結構實現用戶的想法,一些可有可無的功能看上去很花哨往往會影響用戶的判斷能力,這些就是產品優化的一些概念了在此我需要簡單的提一下如果想要深入研究可以看一些有關於產品優化的書籍甚至是心理學的書籍,有很多人認為軟體的優化就是代碼的優化(用最少的代碼實現產品功能),在我看來這只是程序的優化是針對程序員而言的而不是整個軟體產品的優化,產品優化包含了交互設計在現在的多數軟體企業沒有專門做這一部分的交互設計師所以往往這一部分被忽略,我認為這一部分應該又UI設計師承擔起來,從文章的開頭我就說過UI設計不只是圖形界面的設計,就算是有企業里邊有這樣的優化人員或者交互設計師他們也要和UI設計師一起配合完成產品交互設計,作為UI設計師產品的交互性和易用性是在做設計的時候必須考慮的! 言歸正傳,產品設計人員經常不會過多考慮簡單易用原理也就是產品出來用什麼樣的組合形式體現給用戶,這也是UI設計師考慮最多的事情,所以UI設計師一定要在產品建模期間參與設計,給產品設計師一些意見。作為一名優秀的UI設計師我們還要在了解了產品的需求之後更深入了解這個產品的使用環境和用戶群體的使用習慣。我們還需要了解市場上的同類軟體產品的設計方案,研究他們的優缺點,以便在我們設計的時候吸取它們的長處避免它們的錯誤。在產品建模之後一般的都會由產品設計人員給客戶做一次功能設計講解,往往這樣的講解只是文字性質的需要讓客戶想像著理解,這就會造成很大的隱患有的客戶根本無法理解你的講解甚至對這樣的講解根本不認真聽,因為他們根本不懂,在討論過程中他們經常會同意產品設計人員的一切設計想法但是產品測試的時候他們又會提出種種不滿意,我想這是一般的軟體公司都會遇到的也是最最頭疼的事情,但這並不能怪客戶我說過客戶只會關心視覺效果和軟體的操作而並不會去關心我們是怎麼實現這一切的。這種情況帶來的直接後果就是產品的反復修改開發成本成倍上升,怎麼避免呢?這就要靠UI設計師了,俗話說「眼見為實,耳聽為虛」,所以需要UI設計師做出一個產品整體效果的demo。這個demo用圖片的形式表現就可以,我們只需要將要體現的產品界面做一個拼湊就可以了,因為這並不是產品的最後樣子,只是協助產品設計人員給客戶講解產品設計。產品建模時期UI設計師要了解客戶的要求想法和產品設計人員對產品功能的要求深入了解產品,採集用戶的使用需求、使用環境和使用習慣,了解市場同類產品的設計分析它們的優缺點。協助產品設計人員完成產品建模過程並製作產品展示demo模擬用戶對主要功能的操作過程和界面呈現,生成交互原型(基本上產品的交互性和易用性問題都需要在產品建模的時期解決)。如果時間允許我們甚至可以提出一份「UI設計分析報告」,這份報告可以附在產品設計說明後,更有效的幫助客戶了解我們的產品設計並且幫助開發人員更好的遵循UI的整體要求來完成開發工作。這個時期的關鍵是「交互設計」。 二.技術建模時期: 在這個時期作為UI設計師我們已經了解了軟體產品的功能需求並且拿到了一份產品設計人員的產品設計說明,可以進入界面樣式的設計過程了。這個時候我們應該考慮更多的應該是產品的整體風格和界面的設計,通常我們也會做出幾份方案給客戶選擇。有些客戶會要求產品遵循一個整體的VI設計標准,那麼我們就需要按照一個整體的已定的風格去設計軟體的界面,要與客戶公司的企業形象吻合。在這個時期軟體的UI設計進入到了美術設計階段,我們需要制定整個軟體的風格,塑造軟體的整體形象,並且具體的描述每一個界面中的元素和布局、文字字體等信息。在這個階段我也不應過多的說什麼,主要是每個UI設計師各自發揮你們的藝術專長用最簡潔、最漂亮的界面表現軟體產品。需要注意的就是在我們設計整體風格的時候一定要深入了解這個產品的理念,看看它是干什麼用的。不同的產品要有不同的風格,這里邊有很多的細節注意,不同的產品、同類的產品不同的內容、不同的傳播介質,這些都會決定UI設計的風格。1.不同的產品:比如一個游戲產品就需要將界面做的花哨一些或者用大的圖片充斥;如果要是一個應用軟體就需要突出使用方便和強大的功能設計要簡潔。2.同類不同的內容:比如一個可愛的游戲產品(像是卡通類游戲)就需要將界面做的活潑生動可愛一點;如果是一個角色扮演的戰斗類游戲(像是槍戰闖關類游戲)就要做的酷一點深沉一些。3.不同的傳播介質:我們要做的軟體產品有的需要在中國絡上傳播那麼就需要我們考慮到中國絡速度的問題;有的就是利用光碟當作介質那麼這樣的軟體就可以做一些比較花哨的效果。所以說不同的產品還需要單獨考慮,這也需要UI設計師多多了解產品,保持與客戶交流。還需要重點注意的就是我們在做圖形化設計的過程中千萬要貫徹在前一個階段做好的交互設計,始終注意產品的交互性和易用性。在設計過程中我們一定要做出每種結構每一個步驟的效果圖,不能只提供圖標、按鈕、背景圖等圖片,這樣的話程序員根本不知道往那放這些東西,在這個時期我們就要最終確定軟體界面的呈現形式。技術建模一般是由高級程序員完成的,他們會將整個軟體開發分為一個一個功能模塊,分配給一個一個的開發小組。但是這些負責技術建模的高級程序員考慮更多的往往是如何將整個設計用代碼實現、怎麼才能更有效的復用以前已有的模塊等等,而不是軟體是什麼模樣會有什麼樣的風格,所以作為UI設計師我們必須主動出擊,多多和他們交流以保證我們的想法能夠完整的實現,如果有技術實現的問題我們還要及時做出修改。有時候我們還需要根據客戶或者產品的特定需求做一些延伸性的設計(也叫UI產品設計的外延),包括:軟體的安裝導航界面、產品的演示宣傳動畫、一些附帶的桌面壁紙或者屏幕保護、代表軟體的卡通小精靈、有時還會被要求設計軟體的logo和廣告banner等等。技術建模時期的關鍵是「風格和界面設計」。 三.分模塊開發時期: 這個時期軟體開發過程進入實現階段,也是需要人力最多的時期,這樣就會分散UI設計師的精力。軟體會被切分為若干個小的模塊進行代碼編寫,最後整合成一個完整的軟體產品。對於一個程序員來講他們大多根本不會考慮到產品應該是什麼樣子應該有什麼整體風格,他們所考慮的只是如何用代碼實現設計的要求,而且在現在的軟體企業多都實現了模塊的復用,這樣會大大節約人力成本,那麼程序員只是對原有模板進行修改使之適應新的軟體產品,這樣就會對UI設計的最終貫徹和實現帶來很大的麻煩。做出的每一個模塊雖然已經能夠使用但是都是「各自為政」沒有統一,因此我們也需要主動的協助和監督程序員完整的實現UI設計的要求,如果有技術無法實現的問題需要及時溝通改正設計方案。有的時候有些模塊需要有單獨的風格,比如一些已有的軟體產品需要集合到某一個新的產品中去,這樣就會加大了設計師的設計難度,我們必須要在保證產品整體風格不變的情況下將原有產品的設計風格集合進去,使之更加適合新的產品表現形式。如果我們仍舊保持原有產品的風格那麼當各個模塊集合起來之後往往會使新的產品感覺很鬆散,進入每一個功能都會覺得是另外一個軟體,使人對軟體的印象不深刻。在這個階段我們還是要主動一些,跟進各個模塊界面的實現。現在很多軟體企業都存在很多UI設計師和程序員的協作問題,不是程序員做不到UI設計的要求,就是UI設計師堅持一些自己的想法不能改動,還有的時候經常會有人過來沒頭沒尾的說幫我做點東西吧!當軟體集成到一起再一看,就是很多不同風格的東西堆砌到一起,從頭到尾都不舒服,領導或者客戶看了以後極度不滿狂批一陣,最後得出結果UI設計做的不到位。有人說UI設計師就要背著軟體不成功的黑鍋,因為人們根本看不見代碼怎麼寫的,功能是怎麼實現的,他們只知道對軟體的樣子和使用進行評論。讓一個用戶評論一個軟體他們只會說這個軟體好用看上去也不錯挺漂亮的,但是做為一個普通用戶決不會有人說這個軟體程序寫的不錯。這么一看我們會聯想到現在軟體開發之中主要的沖突在UI設計師和程序員之間,其實這只是表面的表現形式。實質上這個現象體現了現在軟體企業的一個通病就是這個開發組之間的協作關系混亂,程序員和UI設計師之間是平級協作關系,程序員是不會對產品負責的,這樣看來UI設計師只應該聽項目經理的,無論對設計做什麼樣的改動或者增添什麼樣的東西,都應該由開發項目經理和產品經理協商之後決定,只有他們可以對最終的產品負責。這樣也可以避免很多程序員和UI設計師之間的爭執和矛盾。但是現在大多說軟體企業的產品經理和開發項目經理沒有做到這一點,他們也根本不了解UI設計師和程序員的工作,也無法把握他們的工作量,這樣無序的管理會造成很麻煩的後果。其實可以建立一些合理的流程管理制度,就算企業沒有作為UI設計師也可以自己起草一份適合自己和企業的「UI設計需求申請單」,里邊應該列出我們需要的「輸入」內容、工作時間、最終的「輸出」結果等等欄目(可以自己根據要求靈活決定)。這樣形成一個有參與人、有依據、有存底的工作流程,出現問題或者爭執的時候我們有據可依,這只是一個習慣性的東西因不同的企業而議不一定都要建立需求單。在分模塊開發時期UI設計師應該做的是,在模塊開發的前期做出產品每個模塊的效果demo(可以用圖片的形式表現)要求程序員按照demo的樣式進行模塊開發,協助和監督程序員嚴格按照UI設計要求生成最終產品,把握各個模塊的統一,經常了解程序員的工作進展及時對不合理或者難以實現的設計進行討論設計出新的方案。分模塊開發時期的關鍵是「協助和監督程序員生成最終產品」。 四.測試時期的輸入和輸出: 軟體產品的測試會分為三個測試階段,第一個是分模塊開發完成之後每一個模塊進行的單元測試;第二個是將各個單元集成為一個整體的產品進行集成測試;第三個就是整個產品在交付使用前進行的整體測試。在測試過程中UI設計師的任務相對會輕松一些,我們只需要跟著測試人員走幾遍流程,如果在其中發現沒有按照UI設計要求的部分及時要求改正就好了。我們還會經常遇到客戶在測試過程中突然覺得那裡不合適需要修改,這也是最最頭疼的事情了,有的時候他們說的並不一定對,只要我們設計的每一個步驟都有一定的道理能夠說服他們就一切ok了。如果他們執意要修改設計方案,那麼我們沒辦法只能按照客戶需求修改。但是如果前邊按照本文的流程走下來我想這樣的可能性不大就算是修改也不會是大動干戈。在修改過程中我們還是需要先做出效果圖,讓客戶確定再具體實施,這樣也會避免很多麻煩的。測試時期的關鍵是「檢查整個產品發現問題及時改正」。 如今軟體的越來越多的考慮到人的因素,「以人為本」的設計理念貫穿了整個軟體產品開發的始終,因此軟體產品的UI設計過程最重要的兩個部分就是行為和構造,也就是交互設計和界面設計。上面我們按照軟體開發的四個階段,逐個的分析了每個時期UI設計的任務。由此我們可以看出UI設計並不完全是一個美術設計的過程,還有很重要的一個部分就是交互性和易用性的設計
❽ 為什麼要做網站專題 ,網站專題作用及策劃流程
利用一個點、一件事、一個主題來策劃一個頁面或一個活動的流程頁面,該頁面會包含網站相應模塊和頻道所涉及到的功能與該主題事件的內容展示。 為什麼網站需要專題? 任何一個網站都由大量的內容組成,這里暫不討論內容的貢獻者是由用戶還是網站編輯,如何整合信息內容,是網站吸引注意力的關鍵。網站要將部分內容從海量的資料庫里抽出展示給大家,這就產生了專題。專題的選題極其重要,好的專題選題不僅能為網站帶來流量,還能吸引來部分用戶,大大提高網站被搜索到的幾率,一定程度上優化了網站的搜索引擎。同時,將用戶需要的信息集中的展示在專題上能夠方便用戶的瀏覽與查找,體現網站內容的全面與系統,還可以幫助網站Pr值的提升。 常見的專題分為幾類: 活動型專題:這類專題是最常見的,通過一個活動點、網站周年慶等形式展開的活動,這種專題涉及到的頁面較多,報名頁、報名展示頁、活動流程、介紹等; 內容匯聚型專題:分類展示信息型,本類專題一般較為簡捷、大多一個頁面就可以說明問題,如淘寶經常舉辦的類似牛仔褲專題、傢具專題等,把網站的某一個分類的信息集中的展示出來引導用戶去做一些網站提供的功能操作; 如何策劃網站專題? 專題的策劃其中選題、專題的報道策劃,是網站信息內容策劃中的重頭戲,是相對於報紙等紙介傳媒的「一事一報」來說的內容創新,如超女專題能夠全面的展示超女的最新報道,圖片,行程,超女的進程等,方便了**ns的查詢與信息的需求,便會為網站運營帶來一定效果,選好專題主題後就是內容的策劃了,全面展示主題的信息成為專題策劃的主要需求。 策劃專題的注意事項: 很多人認為專題策劃很簡單,普通的編輯就可以獨立策劃,當然,我們不能說這話有問題,專題嘛,畢竟是網站內容的一個匯聚展示,需要涉及到具體流程的地方不多,更多的是UI設計的別致與創意;但還有些地方我們需要注意一下 1.既然是網站專題就是為網站服務的,不管是活動專題還是內容匯聚型專題,我們的目的只有一個就是為網站的運營起到推動的作用,提升網站的PVIP甚至PR;那麼專題在策劃的時候一定要有網站的入口,點擊一個按鈕可以進入網站首頁或其他頻道,而不是說用戶來看過這個專題就點關閉,就流失用戶,而是要把人先通過專題吸引過來,在通過內容留住他,因此網站入口必須不可少,哪怕只是短短的一條文字鏈; 2.一般專題要有自己的導航,這里所說的導航是指專題本身的導航,特別是活動專題導航一定要有,導航的內容包括:活動流程、活動詳細說明、報名表、報名情況等等,讓用戶更為方便的找到入口,引導他去操作,去參與到活動中,千萬不要把這里的導航換成網站導航,這樣用戶不小心點了導航到了網站其他頻道的頁面,將會造成用戶的流失; 3.專題有一定規矩可循,專題通欄banner、專題說明、形成安排、報名展示、媒體專注等,值得注意的是如果我們這個專題的目的是吸引用戶來參加一項活動或下載某一種軟體的情況下,這里的按鈕一定要明顯,讓用戶在一眼看清楚專題內容後能夠在最短時間內找到參與的入口,才能夠很好的達到我們要的效果。這里的按鈕不要追求新穎設計稱TAB或文字鏈的形式,從UE經驗來說,這類的報名會相對傳統的按鈕效果差一些,用戶習慣不要輕易去破壞。
❾ 如何做好一個 Banner
一個好的交互設計對產品的成功起著很關鍵的作用。UI所做的就是用戶最先接觸到的東西,也是一般性的用戶唯一接觸到的東西。用戶對於界面視覺效果和軟體操作方式的易用性的關心,要遠遠大於他對底層到底用什麼樣的代碼去實現的關心。如果說程序是一個人的肌肉和骨骼,那麼UI設計就是人的外貌和品格!都是一個成功軟體產品必不可少的重要組成部分!對我而言程序懂得不多所以只是從UI設計與軟體產品整體的關系和如何才能使軟體產品得到最佳的UI設計角度來談。 現在我們的軟體產品存在的一些問題有技術方面的問題,但是更多的問題來源於各個部門、各個項目小組的之間的配合。我們現有的開發流程一般都是由市場部門提出客戶需求,產品設計人員提出產品設計報告,開發部門設計開發計劃,由各個小組分別開發一個模塊,最後整合成為一個完整的軟體產品。在這些流程之間UI設計應該參與那一個部分,每一個部分應該做到什麼地步才可以使產品得到最好的UI設計效果呢?下面我們會在每一個部分具體分析。 首先分析一下現在的問題所在,在一些軟體業比較發達的國家軟體產品的UI設計過程貫穿了軟體開發的自始至終,而且是必不可少的。而在中國產品UI設計並沒有被廣泛接受,就算是已經有了UI設計師的一些企業也沒有對產品的UI有著足夠的重視,一般來講他們大都會把重點放在如何使用代碼實現所需要的功能,在我看來這只是一個成功軟體產品的一個部分。一個優秀軟體產品的開發過程應該是由四個部分組成: 1.軟體產品的設計(業務建模) 2.系統的設計(技術建模) 3.分單元的開發(把軟體各個部分拆分分單元編寫代碼) 4.測試(分為單元測試、系統集成測試和產品功能測試),這些是由軟體研發部門做的工作。 除去以上軟體開發過程的四個部分還有用戶需求和用戶驗收測試,這兩個過程是由市場部門和產品用戶一起完成。所以說用代碼實現產品功能(coding過程)只是軟體開發的一個步驟。現在我們回到UI設計的角度來看,作為UI設計人員我們需要全程參與到軟體開發過程中,而不只是在某一個步驟參與,現在在大多數軟體企業里UI設計師只是在產品的coding過程的時候才實質性的參與到軟體開發過程里,而在其它幾個步驟里只是參加甚至根本沒有參加(在這里我要強調「參與」和「參加」是兩個詞的不同概念,「參與」指的是完全加入到開發行列開始進入設計階段,而「參加」指的只是旁聽會議或者提出一些簡單的意見並沒有開始進入設計階段),這樣就會大大降低軟體產品的開發效率使開發成本成倍上升甚至導致整個產品的不成功!這並不是危言聳聽,下面我們分析一下在一個軟體產品的開發過程中UI設計應該怎麼做、做到什麼地步才能避免上邊提到的那些問題? 下面我會根據軟體開發的過程解釋上邊的問題,剛才我提過軟體開發過程的幾個步驟, 1.產品建模 2.技術建模 3.分模塊開發 4.測試,那麼我們也分為這四個部分進行討論: 一.產品建模時期: 我們首先來了解一下「輸入」和「輸出」,在UI設計里是很重要的兩個概念,經常會有人過來對我說「我們有一個軟體產品需要美化一下」然後再也沒有什麼深入的解釋了,僅僅這句話我的工作就要開始了,然而這個軟體是給誰用的?是干什麼的?我們卻一無所知!成功的UI設計首先要有完整的「輸入」,怎麼才能叫做完整的「輸入」呢?也就需要UI設計師從整個軟體產品的策劃階段就開始介入,在產品用戶(也就是客戶)向市場部門或者產品部門提出產品需求的時候就要開始參與到產品策劃開發過程中來,這一部分對於UI設計師而言就是第一個輸入階段,並且在這個階段里UI設計師也需要提出一些對產品交互設計的意見,以便產品部門在做產品設計的時候更多的考慮到產品的交互性和功能的簡單表現原則,有很多軟體在設計階段就被加入了許多並不是用的附加功能,其實一個好的軟體設計就是要用最簡單的結構實現用戶的想法,一些可有可無的功能看上去很花哨往往會影響用戶的判斷能力,這些就是產品優化的一些概念了在此我需要簡單的提一下如果想要深入研究可以看一些有關於產品優化的書籍甚至是心理學的書籍,有很多人認為軟體的優化就是代碼的優化(用最少的代碼實現產品功能),在我看來這只是程序的優化是針對程序員而言的而不是整個軟體產品的優化,產品優化包含了交互設計在現在的多數軟體企業沒有專門做這一部分的交互設計師所以往往這一部分被忽略,我認為這一部分應該又UI設計師承擔起來,從文章的開頭我就說過UI設計不只是圖形界面的設計,就算是有企業里邊有這樣的優化人員或者交互設計師他們也要和UI設計師一起配合完成產品交互設計,作為UI設計師產品的交互性和易用性是在做設計的時候必須考慮的! 言歸正傳,產品設計人員經常不會過多考慮簡單易用原理也就是產品出來用什麼樣的組合形式體現給用戶,這也是UI設計師考慮最多的事情,所以UI設計師一定要在產品建模期間參與設計,給產品設計師一些意見。作為一名優秀的UI設計師我們還要在了解了產品的需求之後更深入了解這個產品的使用環境和用戶群體的使用習慣。我們還需要了解市場上的同類軟體產品的設計方案,研究他們的優缺點,以便在我們設計的時候吸取它們的長處避免它們的錯誤。在產品建模之後一般的都會由產品設計人員給客戶做一次功能設計講解,往往這樣的講解只是文字性質的需要讓客戶想像著理解,這就會造成很大的隱患有的客戶根本無法理解你的講解甚至對這樣的講解根本不認真聽,因為他們根本不懂,在討論過程中他們經常會同意產品設計人員的一切設計想法但是產品測試的時候他們又會提出種種不滿意,我想這是一般的軟體公司都會遇到的也是最最頭疼的事情,但這並不能怪客戶我說過客戶只會關心視覺效果和軟體的操作而並不會去關心我們是怎麼實現這一切的。這種情況帶來的直接後果就是產品的反復修改開發成本成倍上升,怎麼避免呢?這就要靠UI設計師了,俗話說「眼見為實,耳聽為虛」,所以需要UI設計師做出一個產品整體效果的demo。這個demo用圖片的形式表現就可以,我們只需要將要體現的產品界面做一個拼湊就可以了,因為這並不是產品的最後樣子,只是協助產品設計人員給客戶講解產品設計。產品建模時期UI設計師要了解客戶的要求想法和產品設計人員對產品功能的要求深入了解產品,採集用戶的使用需求、使用環境和使用習慣,了解市場同類產品的設計分析它們的優缺點。協助產品設計人員完成產品建模過程並製作產品展示demo模擬用戶對主要功能的操作過程和界面呈現,生成交互原型(基本上產品的交互性和易用性問題都需要在產品建模的時期解決)。如果時間允許我們甚至可以提出一份「UI設計分析報告」,這份報告可以附在產品設計說明後,更有效的幫助客戶了解我們的產品設計並且幫助開發人員更好的遵循UI的整體要求來完成開發工作。這個時期的關鍵是「交互設計」。 二.技術建模時期: 在這個時期作為UI設計師我們已經了解了軟體產品的功能需求並且拿到了一份產品設計人員的產品設計說明,可以進入界面樣式的設計過程了。這個時候我們應該考慮更多的應該是產品的整體風格和界面的設計,通常我們也會做出幾份方案給客戶選擇。有些客戶會要求產品遵循一個整體的VI設計標准,那麼我們就需要按照一個整體的已定的風格去設計軟體的界面,要與客戶公司的企業形象吻合。在這個時期軟體的UI設計進入到了美術設計階段,我們需要制定整個軟體的風格,塑造軟體的整體形象,並且具體的描述每一個界面中的元素和布局、文字字體等信息。在這個階段我也不應過多的說什麼,主要是每個UI設計師各自發揮你們的藝術專長用最簡潔、最漂亮的界面表現軟體產品。需要注意的就是在我們設計整體風格的時候一定要深入了解這個產品的理念,看看它是干什麼用的。不同的產品要有不同的風格,這里邊有很多的細節注意,不同的產品、同類的產品不同的內容、不同的傳播介質,這些都會決定UI設計的風格。1.不同的產品:比如一個游戲產品就需要將界面做的花哨一些或者用大的圖片充斥;如果要是一個應用軟體就需要突出使用方便和強大的功能設計要簡潔。2.同類不同的內容:比如一個可愛的游戲產品(像是卡通類游戲)就需要將界面做的活潑生動可愛一點;如果是一個角色扮演的戰斗類游戲(像是槍戰闖關類游戲)就要做的酷一點深沉一些。3.不同的傳播介質:我們要做的軟體產品有的需要在網路上傳播那麼就需要我們考慮到網路速度的問題;有的就是利用光碟當作介質那麼這樣的軟體就可以做一些比較花哨的效果。所以說不同的產品還需要單獨考慮,這也需要UI設計師多多了解產品,保持與客戶交流。還需要重點注意的就是我們在做圖形化設計的過程中千萬要貫徹在前一個階段做好的交互設計,始終注意產品的交互性和易用性。在設計過程中我們一定要做出每種結構每一個步驟的效果圖,不能只提供圖標、按鈕、背景圖等圖片,這樣的話程序員根本不知道往那放這些東西,在這個時期我們就要最終確定軟體界面的呈現形式。技術建模一般是由高級程序員完成的,他們會將整個軟體開發分為一個一個功能模塊,分配給一個一個的開發小組。但是這些負責技術建模的高級程序員考慮更多的往往是如何將整個設計用代碼實現、怎麼才能更有效的復用以前已有的模塊等等,而不是軟體是什麼模樣會有什麼樣的風格,所以作為UI設計師我們必須主動出擊,多多和他們交流以保證我們的想法能夠完整的實現,如果有技術實現的問題我們還要及時做出修改。有時候我們還需要根據客戶或者產品的特定需求做一些延伸性的設計(也叫UI產品設計的外延),包括:軟體的安裝導航界面、產品的演示宣傳動畫、一些附帶的桌面壁紙或者屏幕保護、代表軟體的卡通小精靈、有時還會被要求設計軟體的logo和廣告banner等等。技術建模時期的關鍵是「風格和界面設計」。 三.分模塊開發時期: 這個時期軟體開發過程進入實現階段,也是需要人力最多的時期,這樣就會分散UI設計師的精力。軟體會被切分為若干個小的模塊進行代碼編寫,最後整合成一個完整的軟體產品。對於一個程序員來講他們大多根本不會考慮到產品應該是什麼樣子應該有什麼整體風格,他們所考慮的只是如何用代碼實現設計的要求,而且在現在的軟體企業多都實現了模塊的復用,這樣會大大節約人力成本,那麼程序員只是對原有模板進行修改使之適應新的軟體產品,這樣就會對UI設計的最終貫徹和實現帶來很大的麻煩。做出的每一個模塊雖然已經能夠使用但是都是「各自為政」沒有統一,因此我們也需要主動的協助和監督程序員完整的實現UI設計的要求,如果有技術無法實現的問題需要及時溝通改正設計方案。有的時候有些模塊需要有單獨的風格,比如一些已有的軟體產品需要集合到某一個新的產品中去,這樣就會加大了設計師的設計難度,我們必須要在保證產品整體風格不變的情況下將原有產品的設計風格集合進去,使之更加適合新的產品表現形式。如果我們仍舊保持原有產品的風格那麼當各個模塊集合起來之後往往會使新的產品感覺很鬆散,進入每一個功能都會覺得是另外一個軟體,使人對軟體的印象不深刻。在這個階段我們還是要主動一些,跟進各個模塊界面的實現。現在很多軟體企業都存在很多UI設計師和程序員的協作問題,不是程序員做不到UI設計的要求,就是UI設計師堅持一些自己的想法不能改動,還有的時候經常會有人過來沒頭沒尾的說幫我做點東西吧!當軟體集成到一起再一看,就是很多不同風格的東西堆砌到一起,從頭到尾都不舒服,領導或者客戶看了以後極度不滿狂批一陣,最後得出結果UI設計做的不到位。有人說UI設計師就要背著軟體不成功的黑鍋,因為人們根本看不見代碼怎麼寫的,功能是怎麼實現的,他們只知道對軟體的樣子和使用進行評論。讓一個用戶評論一個軟體他們只會說這個軟體好用看上去也不錯挺漂亮的,但是做為一個普通用戶決不會有人說這個軟體程序寫的不錯。這么一看我們會聯想到現在軟體開發之中主要的沖突在UI設計師和程序員之間,其實這只是表面的表現形式。實質上這個現象體現了現在軟體企業的一個通病就是這個開發組之間的協作關系混亂,程序員和UI設計師之間是平級協作關系,程序員是不會對產品負責的,這樣看來UI設計師只應該聽項目經理的,無論對設計做什麼樣的改動或者增添什麼樣的東西,都應該由開發項目經理和產品經理協商之後決定,只有他們可以對最終的產品負責。這樣也可以避免很多程序員和UI設計師之間的爭執和矛盾。但是現在大多說軟體企業的產品經理和開發項目經理沒有做到這一點,他們也根本不了解UI設計師和程序員的工作,也無法把握他們的工作量,這樣無序的管理會造成很麻煩的後果。其實可以建立一些合理的流程管理制度,就算企業沒有作為UI設計師也可以自己起草一份適合自己和企業的「UI設計需求申請單」,里邊應該列出我們需要的「輸入」內容、工作時間、最終的「輸出」結果等等欄目(可以自己根據要求靈活決定)。這樣形成一個有參與人、有依據、有存底的工作流程,出現問題或者爭執的時候我們有據可依,這只是一個習慣性的東西因不同的企業而議不一定都要建立需求單。在分模塊開發時期UI設計師應該做的是,在模塊開發的前期做出產品每個模塊的效果demo(可以用圖片的形式表現)要求程序員按照demo的樣式進行模塊開發,協助和監督程序員嚴格按照UI設計要求生成最終產品,把握各個模塊的統一,經常了解程序員的工作進展及時對不合理或者難以實現的設計進行討論設計出新的方案。分模塊開發時期的關鍵是「協助和監督程序員生成最終產品」。 四.測試時期的輸入和輸出: 軟體產品的測試會分為三個測試階段,第一個是分模塊開發完成之後每一個模塊進行的單元測試;第二個是將各個單元集成為一個整體的產品進行集成測試;第三個就是整個產品在交付使用前進行的整體測試。在測試過程中UI設計師的任務相對會輕松一些,我們只需要跟著測試人員走幾遍流程,如果在其中發現沒有按照UI設計要求的部分及時要求改正就好了。我們還會經常遇到客戶在測試過程中突然覺得那裡不合適需要修改,這也是最最頭疼的事情了,有的時候他們說的並不一定對,只要我們設計的每一個步驟都有一定的道理能夠說服他們就一切ok了。如果他們執意要修改設計方案,那麼我們沒辦法只能按照客戶需求修改。但是如果前邊按照本文的流程走下來我想這樣的可能性不大就算是修改也不會是大動干戈。在修改過程中我們還是需要先做出效果圖,讓客戶確定再具體實施,這樣也會避免很多麻煩的。測試時期的關鍵是「檢查整個產品發現問題及時改正」。 如今軟體的越來越多的考慮到人的因素,「以人為本」的設計理念貫穿了整個軟體產品開發的始終,因此軟體產品的UI設計過程最重要的兩個部分就是行為和構造,也就是交互設計和界面設計。上面我們按照軟體開發的四個階段,逐個的分析了每個時期UI設計的任務。由此我們可以看出UI設計並不完全是一個美術設計的過程,還有很重要的一個部分就是交互性和易用性的設計。