• 
• 
• 
• 
• 
• 
• 

知識普及 ? 個性手繪效果在網(wǎng)頁設計上的應用

個性手繪效果在網(wǎng)頁設計上的應用

網(wǎng)頁設計師 于2020-06-17 19:26發(fā)表 閱讀次數(shù) 2228次

網(wǎng)站建設’的詳細內(nèi)容'>青島網(wǎng)站建設中的網(wǎng)頁所具有的科技味道通常都是與生俱來的，網(wǎng)頁設計都是通過一些腳本和代碼進行表現(xiàn)，最終使瀏覽者能夠通過與網(wǎng)頁上的內(nèi)容進行互動，然而當這樣的一些規(guī)則的網(wǎng)頁和代碼多了之后，在繁雜的網(wǎng)頁中想突出自己的網(wǎng)站，就需要一個好的設計師進行設計表現(xiàn)，而手繪和草圖的方法是比較有代表性的一個方式，這種方式能夠提高網(wǎng)頁的親和力和識別性。 　　在網(wǎng)站和移動產(chǎn)品當中，這個道理同樣有它的適用之處。雖然不是紙質(zhì)，但我們?nèi)钥梢宰層脩艚缑娈斨械膬?nèi)容看上去像是來自于真人之手，給用戶帶來更多真實可信的感覺。手繪與草圖風格的視覺元素是展現(xiàn)產(chǎn)品個性、傳達真實效果的好方法。想象一下，當收到親人或朋友寄來的信件或賀卡時，你希望里面的內(nèi)容是對方手寫的還是打印出來的？手寫的信息無論到什么時候都比機器產(chǎn)出的更加親切友好對叭？接下來我們一起看幾個實際的產(chǎn)品范例。 　　有很多方法可以幫助設計師們“中和”掉產(chǎn)品身上的科技氣息，其中最簡單直白而卓有成效的就是打造更親切友好、更有人情味兒的設計方案。這自然是關于“情感化設計”的話題，而本文則會重點討論其中的一個方面，即手繪、手寫和草圖風格對產(chǎn)品個性及整體體驗所能起到的提升作用。 　　品牌識別 　　手繪風格可以給圖像帶來獨特的性格特征。人類特有的帶有瑕疵的筆跡可以形成一種非常微妙的、機器難以復制的視覺張力，讓瀏覽者不自覺的將注意力投入進來進行觀察；相比之下，計算機繪制出的那些精確而完美的圖形在如今反而成為了一種過于普通、難以吸引眼球的東西。 　　代碼編輯器Notepad++就有一個很乖巧很有特色的手繪風格logo，里面的小變色龍象征著多種類型的代碼，2乎乎的非?？蓯郏屓巳滩蛔《嗫瓷蠋籽?。另外，手繪風格同時也象征著用戶通過這款產(chǎn)品做的事情的本質(zhì)——從無到有的創(chuàng)造。這樣一個logo會讓用戶牢牢的將Notepad++的品牌記在心里，而且很難與其它同類產(chǎn)品混淆。 　　形象與氣質(zhì) 　　首先是Balsamiq，他們的產(chǎn)品本身就是幫助設計師制作草圖風格的原型的。 　　Balsamiq的功能非常強勁，不過它一直保持著非常“基礎”的外觀形象與氣質(zhì)，讓設計師們可以找到使用紙和筆的感覺。一方面，我們可以通過它來打造低保真手繪風格的產(chǎn)出物，另外一方面，這個核心功能也使Balsamiq自身成為了一個具有獨特形象和氣質(zhì)的產(chǎn)品。 　　個性 　　手繪和手寫風格的元素可以讓產(chǎn)品承載起強烈的個性，在用戶與網(wǎng)站或移動應用之間建立起情感層面的關聯(lián)。通過手繪風格表達出的內(nèi)容可以讓人感覺到其背后有真人存在；這里所說的“真人”，即包括產(chǎn)出內(nèi)容的人，也包括用心打造內(nèi)容表現(xiàn)形式的設計師們。讓用戶在使用產(chǎn)品的過程中潛移默化的感受到真切的人和人之間的交流，這對于提升產(chǎn)品的可信度及體驗滿意度是非常重要的。 　　MathBoard是一款幫助小孩兒練習算數(shù)的iPad應用。它的界面所模擬的是經(jīng)典的黑板外觀，輸入及輸出的內(nèi)容都模仿了粉筆的效果。整個練習以解題為主要形式，小孩兒們在想不出來的時候還可以在左側的黑板上直接進行書寫演算。用戶在這款產(chǎn)品中所能感受到的是真實的學習氛圍，而不是冰冷枯燥的人機對話。 　　推薦閱讀：為產(chǎn)品賦予人格-情感化設計的組成要素及實踐案例 　　對功能進行詮釋 　　作為設計師，我們對手繪草圖在這方面的作用早已不陌生了。我們經(jīng)常需要通過草圖或故事板向團隊其他成員展示想法，介紹設計方案；其實這種方法在很多時候同樣可以用在實際產(chǎn)品當中。例如你有一個在概念和功能方面相對較新或是較為復雜的產(chǎn)品，那么不妨在介紹當中加入一些草圖形式的視覺元素，更直觀的向用戶描述一些原本非常抽象的概念。這種方式可以給用戶帶來一種更加“私人化”的感覺，好像服務提供商或是設計師正在當面為他進行介紹講解一樣。 　　TestFlight(提供移動應用測試服務)在這方面做的很棒。你可以在他們的首頁當中找到大量手繪草圖風格的視覺元素，特別是在向開發(fā)者介紹其服務特色的地方，草圖搭配簡單文案的形式不僅能有效的吸引瀏覽者的注意力，而且非常直觀易懂。 　　可視化的展示流程 　　與之前的一點類似，我們同樣可以使用手繪草圖向用戶展示產(chǎn)品的功能流程。實際上，要在產(chǎn)品或服務中提供完美的解決方案是很難的，如果能夠以更加坦誠和友好的姿態(tài)展示出一些復雜方案所涉及到的流程，即使它們看上去并不流光溢彩，卻可以讓用戶感受到一份真實可信。 　　設計師兼前端開發(fā)者AlexFaure在他的網(wǎng)站中通過手繪風格的視覺元素搭配文案向訪問者展示了網(wǎng)站設計開發(fā)服務當中的重要流程步驟，給人的感覺便是非常用心，值得信任，仿佛不僅是他本人精通于提供這項服務，而且他很樂于讓潛在用戶也一起參與到整件事的流程當中進行溝通互動。 　　信息與內(nèi)容 　　產(chǎn)品當中內(nèi)容的呈現(xiàn)方式將決定著用戶能否有效的獲取和理解信息。要在恰當?shù)臅r候，以足夠搶眼的方式把用戶的目光吸引過來；信息必須簡單明了，與相關功能具有明確的關聯(lián)，并且能夠有效引導用戶執(zhí)行接下來的操作。在實際當中要做到這些其實不是件容易的事。下面我們來看幾個通過手繪和草圖效果來傳達信息、引導用戶的例子叭。 　　引導用戶 　　青島網(wǎng)站建設無論設計網(wǎng)站還是移動應用，設計師們都要時刻考慮到用戶當前所處的操作環(huán)節(jié)，提供必要的引導以幫助他們順利完成目標。 　　在這方面，手繪風格的圖標也是你可以考慮使用的設計元素。當然，大家都知道圖標在界面設計當中的重要性，那么手繪風格的有什么不同呢？和前文所述的道理類似，我們通常所使用的那些圖標固然更加漂亮，充滿細節(jié)，但越是精致的圖標，越會給人一種“軟件制造”的感覺，而手繪風格則顯得更加個人化，更具親和力，能給用戶帶來一種真人交流的感覺。多數(shù)人更加傾向于接受真人的指引與幫助，而不是機器。 　　iPhone應用Stamped使用了非常漂亮而且含義準確的手繪風格圖標來引導用戶。該應用本身就是基于真實人類之間的分享交流的，而手繪風格的視覺元素則在“人情味”方面又錦上添了個花。 　　人物介紹 　　無論是新創(chuàng)企業(yè)，還是工作室、自由設計師，如今大家都越發(fā)看重團隊或個人的介紹頁面。站在用戶的角度講，人們也更加希望了解某個網(wǎng)站產(chǎn)品或應用服務背后的那些真實的人。一個簡單的“聯(lián)系我們”已然不夠了，人們希望知道他們能聯(lián)系的到底是誰。你所做的介紹越個人化，人們就會越發(fā)的信任你。 　　令人喜愛 　　能否做到讓人喜愛是很關鍵的。如果人們感覺到了你的傲慢無禮，那么即使你提供的個人信息再詳細也是毫無意義的，人們總是更樂于相信那些他們喜歡的人。在介紹信息當中使用手繪元素，這可以讓個人或團隊的形象更具親和力，看上去更生動、更富創(chuàng)意、容易相處。 　　TheKnockKnockFactory在這方面做的不錯。上圖是關于他們“無所畏懼的leader”Keith的個人介紹，其中粉筆畫一樣的手繪圖形很簡約而全面的展示了此人的能力特質(zhì)。這種視覺表現(xiàn)形式，包括詼諧的文案在內(nèi)，都向訪問者展示了一幅非常清晰的畫面，讓他們了解到在這里要和怎樣的人打交道，同時感受到一種積極的態(tài)度。這種更加個人化的情感連接可以讓訪問者覺得自己在這里是被歡迎的。 　　真實 　　真實是“信任”當中至關重要的元素，你不能讓訪問者產(chǎn)生“這里是否有真實團隊存在”的顧慮。網(wǎng)站產(chǎn)品帶給用戶的不安全感是與生俱來的，只是程度問題。用戶知道自己很可能永遠不會接觸到產(chǎn)品背后的真人，所以你可以試著在一些細節(jié)的地方展示“真人思考的印跡”，例如字體。任何網(wǎng)站都可以使用大家習以為常的Web字體，而你可以在合適的地方嘗試一些手寫風格的字體，制造一點點差異，讓人感到更平實親切。 　　Grove的家伙們在創(chuàng)意、趣味和真實之間找到了比較完美的平衡點。他們將團隊成員的照片處理成寶麗來的外觀，同時用手寫體標注了每個人的名字，看上去就像是一個訪客溜達進他們的工作區(qū)給每個人(包括狗狗)拍了一張照片一樣，很有代入感。 　　講故事 　　“講故事”是一種非常傳統(tǒng)而且個人化的信息溝通方式，可以在情感上給我們帶來安全舒適的感覺。通過手繪草圖給用戶講講產(chǎn)品的故事，這可以讓他們暫時忘掉產(chǎn)品自身的科技屬性，從而更容易產(chǎn)生親和感。 　　可信 　　在互聯(lián)網(wǎng)世界當中，要掩蓋自己的真實身份、躲藏在網(wǎng)站的某個角落里是很容易的。正因為這樣，向訪問者或客戶坦誠的展示自己才能贏得更多的信任。人們只有信任你，才會按照你所做出的引導去產(chǎn)生實際行動，例如使用你們的服務或是購買產(chǎn)品。手繪風格的內(nèi)容元素肯定不是最容易設計和產(chǎn)出的，它所需要的是包括設計師在內(nèi)的所有團隊成員的創(chuàng)意與激情；但也正是這些創(chuàng)意與激情可以更加直白有效的將“誠摯”與“可信”的感覺帶給潛在客戶。 　　Polecat在團隊介紹當中花了不少心思，他們?yōu)槊總€成員都制作了手繪插畫風格的頭像，雖然看上去略顯粗糙，但表現(xiàn)出了他們誠摯的用心。 　　娛樂化 　　娛樂化的方式可以非常容易的讓人們產(chǎn)生參與感。通過手繪草圖或漫畫的形式陳述產(chǎn)品特色或相關的概念，讓人們在輕松愉悅的狀態(tài)下自主的開始了解你的產(chǎn)品。 　　Axure在他們的首頁給訪問者們帶來了UXMan的故事，手繪風格非常吸引眼球。無疑，為了打造這樣有趣精彩的頁面，他們的團隊一定花了很多功夫。 　　解釋說明 　　手繪風格相比于普通的視覺元素來說可以更加直接的觸及到用戶的情感層面，使他們愿意更主動的發(fā)現(xiàn)并吸收信息。 　　SignNow在首頁介紹中使用了手繪插畫來說明這款應用可以滿足用戶的哪些需求、幫他們解決怎樣的問題。看到這樣的圖畫，潛在客戶們幾乎可以立刻聯(lián)想到自己在實際當中遇到的麻煩。一旦產(chǎn)生了需求上的共鳴，他們就會跟隨著你的介紹和引導，主動投入到對產(chǎn)品的深入了解當中。 　　吸引目光 　　手繪元素之所以能夠吸引目光，主要原因是人們更樂于在環(huán)境中發(fā)現(xiàn)不同，具體的說也就是在Web或移動產(chǎn)品的界面中發(fā)現(xiàn)“人類元素”。我們早已習慣了各種中規(guī)中矩的直線和對稱的布局，這種情況下，手繪和手寫風格的元素可以在很短的時間內(nèi)讓用戶將注意力集中過來。 　　邀請 　　我們可以運用這一原理與用戶進行溝通，例如邀請引導他們執(zhí)行某些特定的操作，常見的包括注冊、下載、分享等等。相比于冰冷而機械化的引導文案，人們更樂于對這種看上去非常個人化的信息做出回應。 　　Weezbe就是這樣做的。相關的介紹文案使用了手寫風格，一個大大的箭頭指向著綠色操作按鈕。此外他們還畫了一個笑臉，隨意而粗糙卻讓人覺得輕松愉悅。 　　切莫濫用 　　手繪手寫風格并不是在所有的地方都適用。確保不要濫用，畢竟我們使用手繪手寫風格的目的就是利用它們所產(chǎn)生的視覺和心理上的差異性，利用它們的稀缺所帶來的“個人化”、“真實化”的感受；如果產(chǎn)品當中到處都是這樣的元素，那顯然會失去意義。看看下面的例子，這完全是毫無意義、充滿視覺噪音的運用方式，不僅嚇人，而且即使用戶希望進行操作，也很容易被干擾而點擊到錯誤的位置。 　　提示 　　利用手繪元素所產(chǎn)生的吸引力，及其能夠激發(fā)人們好奇心的能力，向用戶介紹界面的操作方法，這也是一種很常見的方式。 　　RadleyYeldar使用了一個非常簡潔的用來表示“點擊”的手繪圖形，配合“這里不僅是頁腳”的文案，簡潔卻有力的激發(fā)了訪問者的好奇心。 　　ZURB在介紹他們的jQuery幻燈片插件時所使用的這種提示方法也是我們能在越來越多的產(chǎn)品當中見到的。(我們曾經(jīng)介紹過ZURB的一個重要產(chǎn)品，"Foundation框架-快速創(chuàng)建跨平臺的網(wǎng)站頁面原型") 　　激發(fā)興趣 　　人性化、個性化的視覺元素可以激發(fā)訪問者的興趣，而被喚起興致的用戶是最樂于接受相關信息的。 　　旅行類應用ToristEye通過手繪故事的方式有效的激發(fā)了潛在用戶的興趣。他們將自己的產(chǎn)品放在一個冒險故事當中，一步一步的引領用戶在故事營造的需求情境中了解這款應用。即使去掉說明文案，這套故事圖片仍然可以展示出產(chǎn)品的大致功能以及背后體現(xiàn)出的自由之旅精神。

個性手繪效果在網(wǎng)頁設計上的應用相關標簽：網(wǎng)站改版，網(wǎng)站申請，網(wǎng)站注冊，網(wǎng)站規(guī)劃

相關熱點推薦

專業(yè)設計網(wǎng)站的公司哪里 青島網(wǎng)站設計的幾點知識 青島網(wǎng)站制作哪家強 交互設計的8項黃金法則 設計良好網(wǎng)頁的4項原則 公司網(wǎng)站制作需要注意的 如何讓你的網(wǎng)站更有吸引 泛泛而談界面中的斑馬紋 網(wǎng)絡營銷的五個階段 青島網(wǎng)站設計成功要素 小型企業(yè)網(wǎng)站維護 奈薇建站網(wǎng)科技2016 國內(nèi)網(wǎng)頁設計經(jīng)驗談 網(wǎng)頁設計：如何確定網(wǎng)站 微信營銷推廣的特性-奈 什么是自助建站？ 如何從營銷的角度策劃建 建網(wǎng)站必備六步 基本搜索引擎優(yōu)化策略 新人做站之網(wǎng)站定位與網(wǎng) Web頁面設計原則 個人網(wǎng)站站長看過來網(wǎng)站 網(wǎng)站設計中的簡潔與簡單 以“產(chǎn)品”思維搭建網(wǎng)站 關于VIP用戶研究與產(chǎn) 營銷型網(wǎng)站優(yōu)化需要注意 如何制作友情連接？做友 網(wǎng)站建設目標分析 如何 如何創(chuàng)建一個新的網(wǎng)站 8個實用的友情鏈接技巧 個人網(wǎng)站如何制作才能成 網(wǎng)站搜索引擎優(yōu)化指南 網(wǎng)站描述怎么寫？ 如何提高自己網(wǎng)站的流量 網(wǎng)頁文案設計淺談 個人如何做網(wǎng)站 深底色頁面設計指南設計 網(wǎng)頁導航設計的注意要點 網(wǎng)站制作簡易流程介紹

奈薇建站網(wǎng)青島網(wǎng)站建設公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設及精美網(wǎng)站制作服務，同時歡迎各地網(wǎng)站建設公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點地區(qū)：青島網(wǎng)站建設價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶