失敗的(de)網頁設計(jì)各不(bù)相(xiàng)同，但(dàn)是(s↑‍$hì)優秀的(de)網頁設計(jì)則有(yǒu)著(zhe)共通(tōng)↑←的(de)特點。你(nǐ)需要(yào)思考人(rén)們想要(yàoεπ)的(de)是(shì)什(shén)麽，什(shén)麽東(dōng)西¶☆<✘(xī)能(néng)夠觸動他(tā)們，讓他(↔₹™Ωtā)們欲罷不(bù)能(néng)，無法忘♠×✔懷。

聽(tīng)起來(lái)似乎很(hěn)簡單，不(bù)是(sελhì)嗎(ma)？取悅用(yòng)戶的(de)關鍵在于像用(yòng)戶一 ↔ ‌(yī)樣思考。并不(bù)是(shì)每一(yī)次創新、每一(y✘​÷φī)次重塑、每一(yī)種新技(jì)術(shù)都(dō↔Ω÷u)能(néng)讓用(yòng)戶愉悅，那(nà)些(xiē)真正易于理(§&>≈lǐ)解、便于使用(yòng)、降低(dī)難度的(de)技(j¶¶ì)術(shù)、設計(jì)手法和(hé)抓人(≠↔↕>rén)

的(de)視(shì)覺元素，才是(shì)一(yīγ¥↕)切的(de)關鍵。下(xià)面總結的(de)7項秘訣，會(huì)讓你(nǐ)的(deφ≠✔)網頁脫穎而出的(de)。

1、定制(zhì)化(huà)

carrie-amazon

定制(zhì)化(huà)，或者說(shuō)個(gè)性化(huà)&∏φ ，是(shì)今天網頁設計(jì)中最典型的(de)趨勢之一(yī)。用(y∑ ε±òng)戶希望浏覽網頁的(de)時(shí‍©)候獲得(de)更加私人(rén)的(de)浏覽體(tǐ)驗，無επ≤論是(shì)玩(wán)頁遊還(hái)是(sh™®ì)購(gòu)物(wù)。

看(kàn)看(kàn)世界上(shàn¶∞→g)最著名的(de)那(nà)些(xiē)&↑網站(zhàn)是(shì)怎麽做(zuò)的(de)吧(ba)★φ÷₽。Amazon 為(wèi)用(yòng)‌♣☆↓戶提供基于購(gòu)買曆史的(de)産品推薦，Netflix 則會(huì)推薦δ'相(xiàng)關的(de)作(zuò)品、有(yǒu)₽↑$待觀看(kàn)的(de)下(xià)一(yī)部，并且基于用(yòng)÷★ ♦戶 Twitter 上(shàng)的(de)內(nèi)容來(lái)進行∑γ(xíng)推薦。

每一(yī)個(gè)微(wēi)小(x✔¥≤iǎo)的(de)自(zì)定義設計(jì)，都(dōu)能(néng)讓用(yòn₩≠g)戶感覺這(zhè)些(xiē)用(yòng)戶體(tǐ)驗設計(j••‍‌ì)是(shì)為(wèi)他(tā)們而做(zuò)的(de)≠¥±。同時(shí)，這(zhè)種設計(jì)也(yě)會(huì)給用(yò€σ✔ng)戶一(yī)種參與感和(hé)溝通(tōng)的(de)體 ₽₽↔(tǐ)驗，從(cóng)而加深用(yòng)戶的(de)忠誠度。如(rú)此一(≥→yī)來(lái)，用(yòng)戶會(huì)更好₩∑≤(hǎo)地(dì)融入整個(gè)網站(zhàn)的(¶λde)用(yòng)戶群或者社區(qū)。

天貓&京東(dōng),內(nèi)蒙古電(di★∏ àn)商品牌策劃,內(nèi)蒙古微(wēi)信營銷,內(nèi)蒙古微(wēi)網站(zhàn),呼和(hé↔¶"≠)浩特電(diàn)商品牌策劃,呼和(hé)"♦"✔浩特微(wēi)信營銷,呼和(hé)浩特微(wēi↓↔"")網站(zhàn),內(nèi)蒙古網站σ™← (zhàn)制(zhì)作(zuò)，內(nèi)蒙古網站(zhàn)設計(jì)，內(nèi)蒙古網站(zhàn)建設，呼和(h‌¥é)浩特網站(zhàn)建設，呼和(hé)浩特網站(zhàn)制(zhì)作(zuò)、呼™≈和(hé)浩特網站(zhàn)設計(jì)首選內(nèi)蒙古呼和(hé)浩特先誠網絡科(kē♣"‌★)技(jì)公司。先誠官網：/

2、簡練的(de)動效

1chicago

另外(wài)一(yī)個(gè)大(dà)≤δ↓♣熱(rè)的(de)流行(xíng)趨勢，就(jiù)是(shì)動效設計(jì)。它不(•→₽bù)僅能(néng)為(wèi)用(yòng)戶×↑帶來(lái)驚喜，而且具備強大(dà)的(de)引導性。

動效設計(jì)的(de)精髓在于簡單。令人(rén)頭暈∞β¶φ或者不(bù)知(zhī)所措的(de)動效，應該不(bù)是(shì)你(nǐ)>★β&要(yào)的(de)東(dōng)西(xī)吧(ba)？動效應該是(shì)有(yǒ±™u)目的(de)性的(de)，和(hé)其他(tā)所有(yǒu)的(de)設計(jì)元素一®→←(yī)樣，有(yǒu)針對(duì)性，達成目标是(shì)它€≈$存在的(de)意義。

對(duì)動效或者說(shuō)動畫(huà)最熟悉的(de)，無疑γ∞是(shì)迪士尼。Frank Thomas 的(de)《生(shēn¥∏≥g)命的(de)錯(cuò)覺：迪士尼動畫(hu✔  à)》中，就(jiù)詳細總結了(le)創造今天動畫(huà)的(de)12個(gè)原則γ φδ：

·擠壓和(hé)拉伸

·預期

·登台

·連續動作(zuò)和(hé)姿态對(duì)應

·緩進緩出

·弧形運動

·次要(yào)動作(zuò)

·時(shí)序

·誇張

·立體(tǐ)刻畫(huà)

·吸引力

3、使用(yòng)約定俗成的(de)設計(jì)模式

mayors

對(duì)于常見(jiàn)的(de)問(wèn)$£ 題，設計(jì)模式就(jiù)是(shì)可(kě)靠且可(kě)複用≥✘♦(yòng)的(de)解決方案。簡而言之，最常見(jiàn)的Ω₽δβ(de)信息和(hé)交互方式被整合到(dào)一(yī)個(gè)界面當中，比如(↔∞rú)點擊按鈕，滾動頁面，滑動解鎖，它們都(dōu)是(shì)設計(jì)師(shī)模式。

你(nǐ)需要(yào)熟悉這(zhè)些(xiē)常見(÷♣¶₽jiàn)的(de)設計(jì)模式，并'☆‌<且在設計(jì)界面和(hé)交互的(de)時(shí)候将它們用​₩₹>(yòng)進去(qù)。這(zhè)符合用(yòng)≤$‌戶在體(tǐ)驗上(shàng)的(de)訴求，也(yě)是(shì)易用(yòng)性的(÷←← de)最基本構成。

同時(shí)你(nǐ)也(yě)要(yào)在‌σ✘自(zì)己的(de)設計(jì)中創造設計(jì)模式，在不(bù)同的(de)頁面₩>§₽中使用(yòng)相(xiàng)同、相(xiàng)似或者規則化(huà)的(de)設計"®↕₽(jì)，讓用(yòng)戶習(xí)慣。比如(rú)，不(bù)$₹>同頁面中的(de)CTA按鈕的(de)色彩保持一(yī)緻，卡×<片式的(de)元素使用(yòng)相(xiàng)同的(de)樣式，'↕σ等等等等。

4、給設計(jì)以性格

chimp

沒人(rén)會(huì)喜歡單調無聊的(de)設計(jì)。你(nǐ)的(de)網站β→©÷(zhàn)應當同你(nǐ)的(de)品牌保持一(yī)緻的(de)性格♦™★↔，擁有(yǒu)獨特的(de)氣息。

要(yào)做(zuò)到(dào)這(zhè)一(y•"¶®ī)點，通(tōng)常需要(yào)用(yòng)到(dào)微(wēi)妙走心的(de)©¶'文(wén)案和(hé)親切自(zì)然的(de)語調如(rú‌ $£)果你(nǐ)真的(de)不(bù)知(zhī)道(dào£×)怎麽做(zuò)，可(kě)以看(kàn)看(kàn♥π¥)MailChimp 是(shì)怎麽做₩>​‌(zuò)的(de)。（請(qǐng)注意他(tā)們的(de)文(wén)本和(hé σ✘)圖片是(shì)如(rú)何無縫地(dì)連接到(dào)一(yī)起的(d‌→<e)）

5、在屏幕內(nèi)思考

mikyna

用(yòng)戶同網站(zhàn)交互都(dōu)是(•‌shì)在屏幕內(nèi)進行(xíng)的(de)，無論是(shì)桌面端還λ✘‌(hái)是(shì)移動端，整個(gè)₽  π體(tǐ)驗都(dōu)是(shì)圍繞著(♠>zhe)屏幕進行(xíng)的(de)。

這(zhè)并不(bù)是(shì)一(yī)句廢話(huà)。屏幕是(shì)一(y¥>±ī)個(gè)區(qū)域，它界定範疇，賦予概念，創造隐喻。這(↔βδ₽zhè)也(yě)解釋了(le)為(wèi)什(shén)麽視(shì)差€∞™Ω滾動和(hé)卡片式界面是(shì)如(rú)此的(de)流行(xí₽÷₩≈ng)。這(zhè)兩種概念将一(yī)定量的(de)信息合理(lǐ₽↔)地(dì)放(fàng)置到(dào)屏幕這(zhè)個(g ≤'↓è)容器(qì)中，讓用(yòng)戶随

之同下(xià)一(yī)個(gè)元素進行(xíng)互動。

如(rú)何運用(yòng)好(hǎo)這(zhè)個(gè)概念其實并不(bù™✔ ★)是(shì)那(nà)麽容易。一(yī)個(≥→gè)屏幕內(nèi)應當承載多(duō)少(shǎo)信息，需✘α↕要(yào)仔細考慮。一(yī)個(gè)桌面端頁面所 ↑±能(néng)承載的(de)信息量在移動端屏幕上(shàng)Ωε，可(kě)能(néng)需要(yào)¥σ≈ 劃分(fēn)到(dào)幾個(gè)頁面當中去(qù)。

從(cóng)屏幕的(de)角度來(lái)考慮問(wèn)題，可(kě)能(néng)會(h÷✔uì)讓你(nǐ)的(de)計(jì)劃更加龐大(d←≈≈¥à)複雜(zá)，但(dàn)是(shì)這(zhèΩΩλλ)種考量是(shì)有(yǒu)價值的(de)，這(zhè)種基于屏幕或者基于設♥✘備的(de)考慮能(néng)讓用(yòng)戶感覺更加便捷貼心。

6、一(yī)體(tǐ)化(huà)的(≠←de)內(nèi)容和(hé)交互

uncharted

視(shì)頻(pín)、遊戲、測試都(dōu)争取讓用(yòng)戶能(néng)與之進∑‌↕行(xíng)互動，這(zhè)種互動的(de)目的(de≈≤)在于驅動用(yòng)戶參與到(dào)設計(jì)中來(lá÷≤<βi)。用(yòng)戶與界面交互的(de)越多§®(duō)，用(yòng)戶所獲得(de ♣↔↔)的(de)體(tǐ)驗就(jiù)越好(hǎo)。

不(bù)過，有(yǒu)趣的(de)元素能(néng)讓這★Ω♥(zhè)一(yī)切截然不(bù)同。

讓交互內(nèi)容盡量簡單，不(bù)要(yào)δ&♠牽扯太多(duō)，讓用(yòng)戶可(↓∑£kě)以一(yī)目了(le)然，讓他(tā)們輕松獲Ωα÷得(de)反饋的(de)信息，不(bù)用(yòng)在冗雜(zá)的(de)體(tǐ)驗✔•中淪陷。這(zhè)其實和(hé)美(měi)劇(jù)的(<±→de)5分(fēn)鐘(zhōng)原則有(yǒu)著(zhe)異曲同↑¶♣σ工(gōng)之妙。

7、輕松有(yǒu)序的(de)設計(jì)

2dots

最後一(yī)個(gè)秘訣并非不(bù)重要(yào)，它甚至可(kě¶​)以說(shuō)是(shì)最基礎的(de)原則：讓你(nǐ)的(de)設計(j<←ì)保持幹淨、整潔和(hé)有(yǒu)序。使用(yòng)栅格可∞♥→(kě)以讓每一(yī)個(gè)頁面元素都(dōu)有(yǒu)準确的(de)位置。将"≠$<響應式設計(jì)落實到(dào)每一(yī)個(gè)元素，能(néng)讓頁λ•☆面能(néng)從(cóng)一(yī)個(gè<₽₹)設

備兼容到(dào)另一(yī)個(gè)設備。

簡約風(fēng)和(hé)極簡風(fēng)能(néng)成為(wèi)設計(jì)✘‌±趨勢是(shì)有(yǒu)道(dào)理(lǐ)的(de×↕¶)。用(yòng)戶可(kě)以更輕松理(lǐ)解這(zhè)一(yī)切。簡約的∏✔(de)視(shì)覺設計(jì)更容易交互。沒有(yǒu)複雜(zá)信息并©↔©÷且被精心設計(jì)的(de)界面能(néng)更好(hǎo)地(dì♦σδ)運作(zuò)，賦予更好(hǎo)的(de® )體(tǐ)驗。

蘋果的(de)官方App Store 和(hé)Google Play 都δ↕(dōu)推薦過的(de)遊戲 Two Dots 就(jiù)是(shì)個(gè)典β≤≥型案例。誰都(dōu)可(kě)以拿(ná)起手機(jī)毫無障礙地(dì)開(kāΩ¥≤★i)始玩(wán)兒(ér)，它設計(jì)簡單幹淨，容易互動，視(shì)覺元素周圍"≤∑有(yǒu)足夠的(de)空(kōng)間(jiān)，無需擔心誤觸。

同時(shí)，其他(tā)遊戲所具備的(de)東(dōng)西(xī)它也(yě)  有(yǒu)——有(yǒu)趣好(hǎo)玩(wán"∞¥)，可(kě)以共享得(de)分(fēn)， ≤∑能(néng)分(fēn)享到(dào)社交媒體(tǐ)。

結語

界定一(yī)個(gè)網站(zhàn)的(de)體(tǐ)驗與否有(yǒu)的(de)時(  shí)候并不(bù)是(shì)單一(yī)的(de)标準，而今天所推薦¥∏的(de)7條秘訣本身(shēn)也(yě)更接近(jìn)于基本的(de)G≠☆uideline，了(le)解用(yòng)戶，熟悉趨勢才能(néng)提供優秀的(de)體(tǐ¶←↓)驗。

原文(wén)地(dì)址：designshack

原文(wén)作(zuò)者： CARRIE COUSINS 

優設譯文(wén)：@陳子(zǐ)木(mù)

注：本文(wén)均來(lái)自(zì)百度搜索，如(rú)涉及π↔♣版權問(wèn)題，請(qǐng)聯系我們，我們會₩↑σ(huì)第一(yī)時(shí)間(jiān)解決。