您的位置:網站首頁 > 新聞原創 > 安鄉網頁設計

網頁設計七個實例!教你擺脫“照搬原型圖”的設計

日期:2016-12-26 9:26:26 人氣: 標簽:
分享到:

“〇〇君,這不就是和原型圖一樣嗎!”


這是做網頁設計的時候最不想聽到的話了。我也無例外的被這樣指責過,反過來對后輩也說過同樣的話。


可以說網頁設計師們都經歷過這樣的時期。為什么會被指出照搬原型圖呢?怎樣做才能避免這個問題呢?這一次我想和大家分享一下這種問題的原因和對策。


圖像表現力和“信息理解及提案能力”




首先直接表明結論,可以說,會被指出照搬原型圖的人就是缺乏“圖像表現力”和“信息理解及提案能力”。


“圖像表現力”是指從眾多的表現手法中選擇合適的落實在圖像中;“信息理解和提案能力”是指對于,向誰,以何種方式,傳達什么,要達到怎樣的效果等一系列問題的思考能力。


單純這樣說可以能不太好理解,接下來對于這兩種能力對創作的結果會有何影響的問題,將以經驗程度不同的三個人為例加以分析。


1、新員工A


能力

圖像表現力 ×  /  信息理解和提案能力  ×


狀況

剛剛能保證不超時,對于簡易的原型圖很少進行設計上的延伸。在沒有深入理解內容的情況下,將原型圖的內容和文字毫無懷疑的表現在設計當中。


結果

因為只是將原型圖基本保持原樣的反映在設計當中,從規劃到實際操作的過程中沒有提升UI界面的質量。再加上提案中沒有指示之外的內容,整個提案的質量都不是很高。


指導者反饋

這不就和原型圖一樣嗎?


2、有一年經驗的B


能力

圖像表現力 ◯  /  信息理解和提案能力 △


狀況

在實際工作中積累了各種各樣的經驗,可以在一定程度上進行視覺表現。但對于信息規劃的理解能力和提案能力還很缺乏,尚停留在滿足于原型圖上的重要內容,不能提出更適合的見解。


結果

雖然在畫面上能夠完成的很漂亮,但由于沒有作為設計者對于信息的獨特理解,不能達到原型圖制作者或者客戶的期望值,只是一種重復的反饋。


指導者反饋

這個嘛,暫時先用這個吧,謝謝!


3、五年經驗的C


能力

圖像表現力 ◎ / 信息理解和提案能力 ◎


狀況

從眾多的設計形式當中,選擇最合適的UI表現方式,并設計出漂亮的界面,不僅能準確理解原型圖的要素及其重要程度,更能在其中辨別出是否向用戶清晰地傳達了產品的內容,做出最適合用戶的設計。


結果

即使原型圖不能詳細表現得內容也能很好地體現在設計當中,并從信息規劃的視點對原型圖以外的方法進行探究,靈活應對實際情況中的變化,從而大大提高了提案的整體質量


指導者反饋

非常感謝!就是這樣!


三人能力的比較



像這樣伴隨著兩種能力的提高,就可以靈活應對,諸如從原型圖中應該提取什么信息,在設計時要如何表現等一系列問題。優秀的設計,往往都不是照搬原型圖的那種。


然而這兩種能力并非在短時間內就能掌握,而是需要踏踏實實地積累經驗逐漸練就出來的。盡管我們以“沒有捷徑”為前提,也想要了解平時注意哪些問題,怎樣去做才能更快地掌握這些能力。


STEP 1 提升圖像表現力


這兩種能力都非常重要,而設計師首先要掌握的是圖像表現力。反復透徹地應用設計的基本原則,徹底掌握在網頁設計中經常出現的UI表現手法,都是很重要的事情。無論哪一種都是需要很長時間才能夠達成,下面向大家介紹失蹤將這種能力更快掌握的要點。


1、自由的決定細節元素的尺寸和位置


原型圖是為了確定像導航這種大模塊的位置和順序,大多還未考慮到模塊內的布局。如何排版能更方便用戶使用,設計師在設計的時候應該有自己的考慮。首先要做的不是原封不動地按原型圖布局,而是應該先在紙上嘗試讓信息更好傳達的排版方式。



NO GOOD 設計圖,標題和圖標的位置,各要素的尺寸都基本和原型圖一致。而GOOD 設計圖,電話和郵件左右排列,體現了平衡感,郵件以按鈕的形式出現,將信息的優先度很好地表現出來。



NO GOOD 設計圖,將所有元素居中排列,看起來雖然很整齊,但其橫向排列的方式完全和原型圖一樣。GOOD 設計圖,將元素按層次劃分,并改變了排版和字號,層次分明,易于理解。



NO GOOD 設計圖,按照原型圖進行排版,怎么看都缺乏魅力。GOOD 設計圖,大膽將英語放大,表現出視覺沖擊力,去掉了按鈕的樣式,給人以考究的印象。對原型圖這樣的變化能達到更好的效果。


2、一定要找多個參考


界面和排版方式不止一種,重要的是,不要立刻采用一下子就能想到的方式,而是要堅持尋找更符合整體風格和需求的表現。在網站導航或者Google搜索中尋找接近自己項目的表現方式,作為制作時的參考。要點是,不要只局限于一種方式,要尋找兩種以上作為參考,這樣,有助于從更多角度去思考設計的表現。



即使一個標簽也有線框和色塊等各種各樣的表現方法,要根據自己項目的整體風格進行定位。



相互聯系的五個圓形構成的企業圖,有像參考1那樣加入產品圖片,產生豐富效果的表現手法,也有像參考2那樣用半透明的圓形相互重疊的簡約表現手法。哪一種手法能在用戶那里產生更高的效果,制作之前認真思考一下更不同的表現方法。


3、每天按模塊整理設計參考


和上文要多找參考的話題有關,找到的參考無論包含了什么手法,都要分模塊進行整理。可以將截圖整理到Pinterest或Tumblr,也可以將網址整理在表格中。每天踏踏實實地積累素材,做設計的時候就可以節省很多找參考的時間。



舉個例子,我將可以參考的動效表現整理了一個表格。


4、每周臨摹一個設計優秀的網站


踏踏實實地進行臨摹,對于積累更多表現手法來說是最有效果的。不是將參考網站截圖,直接在上面進行臨摹,而是以完全再現其質感和字號等元素為目標,一變觀察,一變測量,試著做出一模一樣的內容。雖然很浪費時間,但堅持三個月,就能明顯地發覺自己積累了很多表現手法。重要的事情要再說一遍,這個方法是非常非常有效的。



這是我以前臨摹的一個網頁,圖片是替換了從素材網站找到的相似圖片。在實際的操作中可以學到很多東西。


STEP 2  理解說明信息,提出+α的見解


掌握了圖像表現力,接下來就要理解和說明信息,提出+α的見解。+α是指超出圖像制作責任之外對設計的提案,或者對于交互問題的提案。最理想的提案是以,解釋原型圖中的信息,目標用戶是誰,想要傳達什么,怎樣去傳達,希望達到怎樣的效果,等一系列問題為基礎的。方法有很多,這里介紹三種容易上手的實例。


1、圖像的內容自己決定


制作原型圖的人希望圖像能夠更好地補充文章內容,所以經常使用圖形語言。這時候,首先要徹底理解文章的內容。將表現氛圍和實際樣子的照片,換成將關聯性和數值更易向觀者傳達的圖形也是一種很好的選擇。哪一種方式更合適,需要設計者仔細閱讀內容之后進行判斷。



這個內容最想傳達的是,標題所闡述的“銷售優先還是采購優先”的問題。使用抽象的住宅照片也是一種方法,但比起來,使用icon來表現的關系圖卻能更好地傳達文章的內容。


2、調整已經決定的文案


雖然項目中文案一個字也不能修改的情況也存在,并非這種情況的時候,設計者能積極地提出文章修改意見是很好的。因為語言也是一種很重要的界面表現。要知道原型圖所使用的表現也不一定是最合適的。


尤其要注意的是,標題就傳達了結論的情況。用戶根據結論是否是自己的興趣點而選擇是否閱讀以后的內容,當原型圖不能滿足這種條件的時候,設計者就應該積極地提出意見。



閱讀原型圖記述的文章內容,直接將結論提煉出作為標題,可以極大的提升信息傳達的容易程度。



即使是一篇冗長的文章,閱讀內容提煉出小標題,也能大大減輕讀者的負擔。


3、積極地提出最合適的交互意見


在怎樣傳達信息這一部分,設計者一個重要的職責就是提出交互的想法。由于原型圖主要表示要素和重要程度等信息,交互上的研究可能還沒有特別的深入。這種情況下,設計者還是積極地提出表現方法為好。


這個時候,不要以這種表現很有趣就去使用,而是應該以這種表現對用戶來說更易于使用,更易于理解,更友好為出發點,思考交互方式。對用戶沒有好處就沒有價值。不要以滿足設計者的表現欲為目標,而要以滿足用戶為目的。



上例為省略瑣碎的說明文字,鼠標懸停時照片的顏色改變,并加上一層遮罩,說明文字立即從下方滑入的交互形式。


總結


對于照搬原型圖的問題,這次介紹了各種各樣的技巧和提案實例。文章的結尾沒有什么立即有效地絕招,而是每天孜孜不倦地積累表現方法,認真閱讀內容,踏實努力的觀點。


從設計者的角度來看,同“這不就是照搬原型圖”的指責相對應,判斷不了可以改變還是不可以改變的人也有很多。對于不能參加客戶的需求會,陷入已經訂好的原型圖中的設計者來說,糾結于這樣的問題也不是沒有道理的。


雖然確認改變了更好,還是不能改變也是設計者的一個苦惱,根本上最重要的是,本著立足用戶的自信,深刻思考怎樣做才能讓用戶更易理解和使用。具備了這樣的高度,極端地說,即使完全改變了原型圖也是好的。


由于這些都不是短時間就能掌握的技能,因此平時的設計工作中陷入苦戰的人還是很多。然而,就像棒球一樣,設計者接到原型圖的時候就好比進入擊球區的瞬間。如果之前沒有經過各種刻苦的訓練,就不能打出華麗的一擊。


從現在開始,大家能以不被指責“照搬原型圖”為目標,參考這里介紹的方法,踏踏實實的學習便是筆者的榮幸。

0
0
0
0
0
0
0
0
網友評論 Comments
下一篇:沒有資料