您現在的位置是:電腦技術吧?>? 故障問題 ??>??才華與美貌,美貌與才華并存??>??正文詳情

才華與美貌,美貌與才華并存

零傲南2019-11-16 15:30:41 人圍觀
簡介美貌與才華于一身的女子網頁設計師面臨的最大挑戰之一可能是平衡網站的功能性和可視性。你說,我也想成為“極簡主義者”和“高個子”。但如果沒有紅色按鈕,用戶就不知道在哪

網頁設計 師面臨的最大挑戰之一,可能就是平衡網站的功能性和視覺性。

你說,我也想「極簡」,我也想「高大上」,可是不弄個紅彤彤的按鈕,用戶就不知道點哪里嘛。

在本篇文章中,我們舉了4個例子,看看他們是如何解決這個世紀難題的。

  有一些網站僅僅是為我們提供服務,也有一些網站讓我們看著賞心悅目,但是最好的網站兩者兼備。

令人愉悅的設計能給我們帶來一種流連忘返的特別感受。

  如果一個網站只有花里胡哨的吉祥物,卻沒有實質,那么用不了多久,最初的魅力會逐漸消散,不留痕跡。

我們下面列舉了一些較優于行業水平的網頁設計 案例,你可以從下文的案例中得到些靈感。

  只有最好的糖衣  在分析案例之前,讓我們來討論一下賞心悅目的交互是如何適應于整體的設計。

  Aaron Walter在寫Treehouse博客的時候,通過一個1943年發布的心理學的經典理論馬斯洛的需求層次理論,解釋了什么是賞心悅目的設計。

這個理論從本質上將人體需求按優先次序排列。

從底層,即生理必須層 (其包括食物和氧氣等),到最高層非生理必須層,如自我實現。

  (感性的界面設計:熱情的用戶入口)  把本理論運用于網頁設計,Walter提出了新的需求層次理論。

  (感性的界面設計:熱情的用戶入口)  一個可行的交互設計并不是非好看不可。

一個網站只要有功能,可靠并且實用,哪怕外表有那么點丑(就如Craigslist網站)也可能成功。

但是,一個好看的網站如果外強中干,遲早會失去它的感染力。

因此影響交互設計最重要的因素,說到底還是實用性。

  上文并不是說美觀不重要。

正如Don Norman解釋道:人類在進化,我們基于情感所做出決定,多于基于邏輯做出的決定。

事實上,他接而提出「設計提高美觀度甚至可提升可用性」這一觀點,即通過創造一個愉快的氛圍,產品可以使使用者放松,反過來使機械的程序運轉得更加平穩。

這就使學習操作網站變得簡單許多。

  好看的設計如同蛋糕上的糖衣,不能填飽肚子,但也是蛋糕上最可口的那部分。

一個又干又平淡無味的蛋糕是無法引起食欲的,一旦有更好的選擇可選(更加多彩可口的蛋糕),饑餓的用戶則會選擇他們。

另一方面,不管你的糖衣多美味誘人,很少有人只吃甜膩的糖衣。

  下面所說的網站非常的完整:清晰的目標、好用的界面、完善的功能還有一點額外的東西。

  1. Bitly  Bitly是一個廣為人知的牌子。

它廣受歡迎的原因在于,哪怕在網絡時代的早期,它的服務就已得到大家的認可。

Bitly將網址縮短到幾個字符,短小精煉。

當你要分享鏈接的時候,不再需要用一長串毫無聯系的字母和數字來壓倒對方。

它很好的證明了,只需運用一點巧妙的設計,你就可以創造一個前所未有的商機。

  這是Bitly的核心感染力,并且我們猜想,即使有意思的交互設計少一些,他們仍然可以完善該服務。

有趣的交互設計是使Bitly脫穎而出的關鍵因素。

  這個網站的操作非常簡明。

用戶們只需要將鏈接復制粘貼到左上角,旁邊的一個菜單馬上就會滑出一個新的簡短的鏈接和圖標,供人們歸檔、編輯、加標簽或者分享鏈接。

  只需要單擊鼠標,你就可以從簡短的網址追蹤到最復雜的鏈接,就像是施了魔法一般。

當設計了其中有趣的顏色和河豚的卡通形象之后,使用體驗從頭到尾都是令人印象深刻的。

再加入直觀的鏈接跟蹤和有韻律的陳列,這些體驗會變得稍微使人沉迷你會想看哪個鏈接點開次數最多,并回去研究為什么。

  正如交互設計師Ben Rowe所解釋的,令人愉悅的設計有兩層:表層和更深的流程層。

也就是說,吉祥物和有趣的視覺設計組成表層,而「被動魔法式」的交互設計形成更重要的流程體驗層面。

  2. Medium  令人愉悅的設計并不是由絢麗的色彩和有趣的卡通形象堆砌而成的。

正如Rowe所說,由于用戶體驗能建立更強的聯系,所以好看的設計不僅僅只是依靠那些討喜的動物形象,而是依托于實用性。

  作為最受歡迎的博客平臺之一,Medium具有極簡主義風格的特征,平臺使用大量的白色,沒有卡通或任何百搭的顏色。

它登上我們「好看網站排行榜」的原因就是其簡單卻強大的用戶體驗。

  Medium的極簡主義獨特之處不僅在于外觀:寫作體驗被網站運營者們視為重中之重,盡可能讓新用戶盡快上手,并且不會被那些小玩意、插件或其他功能所干擾。

這不是說網站風格平淡無味,想想看,你看不到那些優雅的印刷體,或者是像其他網站上不斷滾動的新聞條,是不是覺得耳目一新了?

  除了表層視覺,簡潔干凈的交互界面讓用戶能夠更集中于寫作。

它的界面功能已經足夠完成用戶的核心目標,Medium只需要騰出空間,讓奇跡自然發生。

  雖然界面極其簡介,但通過設置懸停和隱藏,Medium給用戶提供了所有必要的選擇(上傳圖片/視頻,插入內容等)。

不像傳統的博客平臺體驗給人感覺更多的是「內容管理模式」,Medium把寫作功能和上傳功能創造性地結合在一起。

  (極簡的力量)  如此簡潔如白紙般的界面,即使是再小白的門外漢,寫起博客來也會覺得自己如同大文豪海明威。

  網站也提供了其他很好的體驗。

比如每篇文章都會有一個閱讀時間提示,你就會知道你閱讀這篇文章大概會花多長時間。

而在最基礎的編輯頁面,你甚至可以直接從百度圖片里把搜索的圖片復制粘貼上去,而不需要額外下載以及重新上傳(這對那些長期寫博客的博主來說真是一次解放!)。

  上述這些精巧細微的設計看似對于一個博客平臺來說并非缺一不可,但正是它們出乎意料的有用,才提升了設計的檔次。

這些特質不只博用戶一笑,也使他們更好地完成目標。

如果你想創造一個完美的「愉悅設計」,就一定要在交互設計中加點「小心思」進去。

  3. Carbonmade  當你把實打實的用戶體驗和有趣的顏色以及卡通結合起來,會發生什么?你會得到Carbonmade,一個讓建站小白輕松無痛苦地制作網絡作品集的網站。

  比愉悅的體驗更深一層的體驗,是讓用戶可以輕松在線創造他們自己的作品集這是金字塔重要的基礎。

據創始人解釋,網站的靈感源于在網上發表自己的插畫的糟糕經歷,又貴又麻煩。

在第一印象中,網站具有風格獨特的元素,這種元素在適應于用戶的基礎上,使網站達到了表層次的好看。

這些元素是:輕松的復制功能、明亮的色彩和動物圖像的大量使用。

這種視覺處理能夠獲得你的注意力。

而且,Carbonmade 甚至在網站上大膽聲稱,即使是小白用戶,也用不著看使用說明。

  當你潛入更深一些,你會發現Carbonmade能夠用Medium式的流暢體驗來滿足一切用戶自己建站所需要的功能。

創建你的方案,拖拉放下你想要展現的東西,在左手邊的導航欄輸入文字,想要的界面立馬呈現。

  你想更新你的簡介?只需要在旁邊的導航欄輸入文字,右邊的文本框便可以即時瀏覽效果,真是立等可取!

  即使網站免費的方案已經可以幫助用戶在30分鐘內建立一個比較完備的作品集,現在更多地高級用戶也會為了更個性化的服務更新升級至付費方案。

  正如Rowe所說,「不像功能的功能」讓界面更加討人歡心。

這會讓你感覺自己并不是通過工具,而是通過自己的雙手在制作作品集。

學習曲線實際上已經不復存在了,因為從用戶們從第一下單擊開始,他們就立馬獲得滿滿的成就感。

  4. MailChimp  最后是MailChimp網站,它完美地平衡了實用性和視覺效果。

MailChimp是一個通過電子郵件訂閱 RSS 的在線工具,聽起來就很「性冷淡」。

這應該可以解釋為什么公司喜歡創造一個更加個性化的面孔來推銷自己。

如此一來,MailChimp就把一個枯燥無聊的任務轉變成一次很好玩的體驗。

  賞心悅目的設計是被公司廣泛看好的,因為它是市場中決定公司核心競爭力的要素。

  不混亂的界面、直截了當的選擇和多選的對話形式,把復雜的操作歸納為一個簡單且人性化的體驗。

MailChimp在你成功發送一組郵件之后,還設計了一個好玩的擊掌屏顯。

這是一個令人印象深刻的體驗,一些用戶甚至一邊擊掌一邊哈哈大笑。

  (Jill Bernard通過Twitter與猴子擊掌)  除了萌萌的猴子之外,網站其余部分也非常生動友好。

無襯線字體創造了隨意的氛圍,文本的基調也簡單輕巧(絕非偶然)。

  借助「惡意賣萌」的動畫和「段子手式」的文案(如:這是您的榮耀時刻),MailChimp網站化解了第一次發送郵件的緊張感。

有別于一個冷冰冰的郵件推廣軟件,MailChimp更像是一個能感同身受般理解你的導師。

  幽默和動畫都是只是表層的好看。

但是當我們進入更深層次,我們會看到對話反饋和簡單的任務程序都有助于MailChimp網站與用戶于無形中建立聯系。

產品指引、娛樂和幫助用戶。

而且,即使是新手也會感覺像個內行。

那確實是個難忘的經歷。

  總結  好看的設計可以不同程度地給網站錦上添花。

在不失實用性的前提下,融入能愉悅用戶的元素,你將會創造出一個既愉悅又實用的網站。

  賞心悅目的終極目標,是當與用戶創造無形的情感連接并給予用戶力量。

這不是一項輕松的任務,但它確實能讓你的產品脫穎而出。

永遠不要忘記:「人們不是要為更好的產品而買單,他們是為變成更好的自己而買單」。

  翻譯 | 春雷  校對 | 李蔚娜  文章推薦 | 王師境  譯者微信號:

版權聲明:本文由 零傲南 整理編輯。

原標題:才華和美貌都有的女人,美貌及才華于一身

轉載注明出處:http://www.dn9ww09s.icu/fault/12872.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • wechat如何發音,wechat 翻譯

    wechat如何發音,wechat 翻譯 相關圖片wechatexe是什么意思微信現在是很多人聊天和支付的必備工具,而一些用戶發現身邊的一些人手機上沒有微信,只有微信。微信是什么意思?微信和微信有什么區別wechat fet是什么意思...

  • 極簡風格,現代極簡風格

    極簡風格,現代極簡風格 相關圖片極簡什么是極簡主義設計極簡主義設計?嚴格地說,它不能被視為一種視覺風格,而是一種設計理念。在保留基本骨架內容的基礎上,去除多余的元素、裝飾、顏色和紋理。這是一個通...

  • 印象筆記 破解,印象筆記破解版

    印象筆記 破解,印象筆記破解版 相關圖片手機印象筆記高級破解版筆記不僅是一個云服務筆記軟件,幫助您記錄您的生活和工作,而且是一個協作工具,可以共享數據和基于數據的通信。為了了解notes在高效工作筆記中的位置,...

  • win 10專業版密鑰,win7專業版密鑰

    win 10專業版密鑰,win7專業版密鑰 相關圖片win10家庭版升級專業版密鑰大多數人安裝win10時,旗艦版或家用版都可以,但對于一些技術人員、中小企業等安全性較高的群體來說,需要使用win10專業版。小編在這里分享win10專業版的一...

  • 綠色菜單,綠色美食菜單

    綠色菜單,綠色美食菜單 相關圖片綠色的菜名本文以div CSS為例實現了一級菜單的綠色級代碼。與您分享以供參考。具體如下:這是一個基于div CSS的綠色級網站菜單。我相信這是一個你喜歡的CSS菜單,綠綠色莊園烤肉菜單...

  • 應版權方要求,應版權

    應版權方要求,應版權 相關圖片應版權方要求不能下載隨著數字版權的逐步規范,一些用戶在網上下載資源時遇到了應版權人要求無法下載的情況。我們怎樣才能解決這個問題?有兩種情況,一種是資源因侵權被撤銷...

  • win10專業版激活碼2019,win10最新激活碼

    win10專業版激活碼2019,win10最新激活碼 相關圖片win10家庭版激活碼使用win7和win8的putty,升級到win10并不容易。發現win10只有激活后才能正常使用。一般來說,非活動win10系統最明顯的特點是需要激活的水印會window10專業版激活碼...

  • 奶瓶三個圖標,奶瓶圖標

    奶瓶三個圖標,奶瓶圖標 相關圖片圖標是奶瓶的app叫什么在下面的教程中,我們將從基本形狀開始,完全使用flash繪制一個小瓶子圖標首先我們從一個圓角矩形開始,并將其底部調整為一個圓形如果您熟悉Bezier曲線,這并...

  • 怎么把數據透視表做成橫的,excel最常用的八個函數

    怎么把數據透視表做成橫的,excel最常用的八個函數 相關圖片社保做數據透視表當Excel數據有大量運算要計算時,可以考慮使用Excel數據透視表函數。Excel數據透視表是一種交互式的表格,可用于求和、計數等計算。按數據透視表計算numbers怎么做數...

  • 序列標簽,無序列標簽

    序列標簽,無序列標簽 相關圖片序列標簽位點【無序標簽】基本上有兩種序列標簽,一種是無序列,一種是有序列。所謂無序列當然是指列之間沒有順序關系,而只是使用列方法來表示數據。這樣雜亂無章的標簽在每...

熱評文章

  • 聲道切換,左右聲道切換

    聲道切換,左右聲道切換 相關圖片耳機聲道怎么設置完美解碼是一款沒有廣告的強大播放器,深受廣大用戶的喜愛。然而,一些新用戶不知道如何切換語言,也不知道如何切換頻道,所以當他們遇到一些多語言版本的電...

  • 網站背景圖,背景圖

    網站背景圖,背景圖 相關圖片優質背景圖高清幾乎所有的設計師都知道在網頁設計中使用圖形的重要性,但是在實際的項目中,如何做好圖片設計呢?本文將與大家分享如何通過把握圖片的意圖來做好設計給設計師...

  • 怎么解綁手機令牌,怎樣解綁qq手機令牌

    怎么解綁手機令牌,怎樣解綁qq手機令牌 相關圖片怎么解綁令牌手機代幣是我們確保騰訊賬戶安全的法寶。當賬戶被消費或被盜時,它可以被大量使用。手機代幣只能用來保護騰訊賬戶的安全。一。用戶可按QQ順序登錄個人安全中心qq怎...

  • 女人的顏色,美女

    女人的顏色,美女 相關圖片給點顏色就發這篇文章不是讓你看這篇文章來做這個效果,而是給你一些啟發。我不想再叫這個教程了。我只想和你分享我的一些感受。也許你可以發現你需要什么來添加你獨特的想法...

  • 天貓積分獲得,如何快速獲得天貓積分

    天貓積分獲得,如何快速獲得天貓積分 相關圖片天貓積分怎么來的當買家在天貓購物時,會得到一定數量的天貓積分。以前,天貓積分可以用來扣除購買金額,但后來這個功能被取消了,天貓積分可以用來兌換積分權益,兌換天貓購...

  • mxfq,mxfq怎么用

    mxfq,mxfq怎么用 相關圖片類似mxfq的xp模塊經常使用Android手機的用戶對mxfq并不陌生。Mxfq是QQ聊天工具的一個小版本。它可以和QQ結合使用,但是它的窗口很小,而且還可以設置為透明,這不會影響q酷安...

  • 容器排污閥怎么設置,容器被重新設置大小

    容器排污閥怎么設置,容器被重新設置大小 相關圖片權限設置并未向在應用程序容器設置容器的文本行為將替換具有指定內容的頁面上的現有容器。頁面上的容器引用任何可以包含文本或其他元素的HTML元素;指定的內容可以包含任何有效...

  • markdown筆記是什么,markdown做筆記

    markdown筆記是什么,markdown做筆記 相關圖片markdown是什么威志筆記是一個非常容易使用的筆記軟件。偉志筆記是一款專注于高效工作筆記的移動應用,也是中國唯一的云筆記產品。很多用戶不知道降價可以用來了解筆記印象筆記...

  • 表單標簽是,html表單樣式

    表單標簽是,html表單樣式 相關圖片html5表單input[表單目的]對于一般的網頁設計初學者來說,表單功能并不常用,因為表單必須使用CGI、JavaScript或ASP程序來操作,否則單靠表單沒有多大意義。但是,一旦html制作表單...

  • 黑鯊裝機大師怎么用,黑鯊裝機大師能用嗎

    黑鯊裝機大師怎么用,黑鯊裝機大師能用嗎 相關圖片用了黑鯊裝機大師重啟不了當您需要重新安裝計算機系統時,網絡上有許多一鍵式安裝工具,非常容易使用。黑鯊安裝大師就是其中之一。它是一款簡單方便的系統重裝軟件,可以快速...

關注微信

变脸官网查询