今天我們會(huì)跟大家聊10個(gè)設(shè)計(jì)簡(jiǎn)單易用網(wǎng)頁(yè)的技巧，還會(huì)分享一波美國(guó)設(shè)計(jì)師團(tuán)隊(duì)Ramotion的網(wǎng)頁(yè)設(shè)計(jì)大作（含具體配色方案）。

坦率的講，在網(wǎng)頁(yè)設(shè)計(jì)這件事情上，簡(jiǎn)單的設(shè)計(jì)往往更好。一個(gè)簡(jiǎn)單易用的界面更容易為用戶所掌握，也更容易將一個(gè)新用戶轉(zhuǎn)化為一個(gè)活躍用戶。

面對(duì)龐雜的需求，許多設(shè)計(jì)師總會(huì)身不由己地向著復(fù)雜的方向來設(shè)計(jì)網(wǎng)頁(yè)，那么到底要如何將一個(gè)已經(jīng)比較復(fù)雜的網(wǎng)站簡(jiǎn)化下來呢？其實(shí)思路并不復(fù)雜，訣竅在于根據(jù)用戶目標(biāo)，重新審視整個(gè)路徑，將妨礙用戶達(dá)成目標(biāo)的障礙都清除掉。

而今天我們要聊的10個(gè)簡(jiǎn)化技巧都是圍繞著這個(gè)思路來推進(jìn)的。無論你是正在設(shè)計(jì)一個(gè)全新的網(wǎng)站，還是針對(duì)現(xiàn)有的網(wǎng)站進(jìn)行簡(jiǎn)化，這10個(gè)簡(jiǎn)化技巧都非常值得嘗試。

1、專注于做行為召喚設(shè)計(jì)

網(wǎng)站上的每一處設(shè)計(jì)都應(yīng)該是有目的的，都相應(yīng)地迎合用戶的某個(gè)行為或者需求，這是顯而易見的。

這也為行為召喚的設(shè)計(jì)提供了依據(jù)。引導(dǎo)用戶的文案、按鈕和鏈接都應(yīng)該清晰、明顯，永遠(yuǎn)不要讓用戶錯(cuò)過。

2、簡(jiǎn)化分頁(yè)

你所設(shè)計(jì)的頁(yè)面是否需要分很多不同的頁(yè)面？這些頁(yè)面有沒有分割的必要呢？你可以重新思考這個(gè)問題了。

將多頁(yè)面的內(nèi)容簡(jiǎn)化為可管理的區(qū)塊，不要讓用戶為了查看內(nèi)容而多點(diǎn)擊，將相關(guān)的內(nèi)容保存到一起，方便用戶集中閱讀和查看。

刪除過期的、過時(shí)的內(nèi)容和信息、小插件和第三方的信息都合并到相應(yīng)的區(qū)塊當(dāng)中，不要零散的放置。

3、統(tǒng)一配色方案

雖然很多色彩確實(shí)很有吸引力，但是它們也很容易喧賓奪主。堅(jiān)持將配色方案控制在兩到三個(gè)色彩，這樣能讓你盡可能好的控制整個(gè)設(shè)計(jì)的配色。

如果你想讓你的配色盡可能簡(jiǎn)單，那么你可以采用單色配色，你會(huì)發(fā)現(xiàn)這種簡(jiǎn)單的色調(diào)搭配是如此的漂亮，較少的色彩對(duì)于用戶的心理負(fù)荷更小，尤其是當(dāng)你的整個(gè)視覺設(shè)計(jì)足夠和諧的時(shí)候。

4、采用標(biāo)準(zhǔn)的導(dǎo)航設(shè)計(jì)

雖然隱藏式的導(dǎo)航看起來很酷，而非常規(guī)的創(chuàng)意導(dǎo)航也非常的贊，但是這些導(dǎo)航模式對(duì)于用戶并不是那么友好。偏離常規(guī)的設(shè)計(jì)雖然容易讓人記住，但是在使用體驗(yàn)上，常常相對(duì)更加困難。選擇標(biāo)準(zhǔn)模式的導(dǎo)航，能夠讓你的網(wǎng)站更加易用。

最常規(guī)的導(dǎo)航模式，是將導(dǎo)航欄置于頁(yè)面頂端，通常是3到8個(gè)不同的選項(xiàng)，當(dāng)然，不要選擇10年前流行的復(fù)雜、全面的大型導(dǎo)航菜單，除非你是京東淘寶這樣的大型零售電商。

5、采用80/20原則

請(qǐng)記住，你的網(wǎng)站中20%的內(nèi)容將會(huì)觸發(fā)用戶80%的操作，這意味著你的內(nèi)容應(yīng)當(dāng)有輕重緩急之分，行為召喚用語和行為召喚按鈕等界面元素將是引導(dǎo)用戶交互的重要組成部分。

考慮到這一點(diǎn)，在你進(jìn)行設(shè)計(jì)的時(shí)候，應(yīng)該將設(shè)計(jì)的重心放在這20%的內(nèi)容上，而剩下的80%的內(nèi)容則根據(jù)需求進(jìn)行調(diào)整。這20%的元素通常都是最吸引用戶點(diǎn)擊的那部分內(nèi)容：按鈕、圖片和行為召喚文本。

如果你覺得20/80原則聽起來很熟悉，那么你可能是在別的地方曾經(jīng)聽到過它，它是經(jīng)濟(jì)學(xué)家 Vilfredo Pareto 所提出，幾乎在所有領(lǐng)域都適用，它也被稱為Pareto原則，或者重要少數(shù)法則。

6、有目的地使用UI元素

圖標(biāo)、圖片等每一個(gè)UI元素在整個(gè)設(shè)計(jì)中都有其作用，有些元素的使用是有約定俗成的規(guī)則，不要因?yàn)槟承┰乜雌饋砜?，或者單純“為了有”而加上，最好通盤考慮，在合適的地方，合理地使用UI元素。

7、仔細(xì)挑選字體

字體和排版同樣遵循少即是多的原則。

最容易閱讀的字體，通常都有著標(biāo)準(zhǔn)的外觀造型，均勻的筆觸，樸實(shí)無華而無需多余的裝飾。一套完整的字體通常有著多樣的字重和可選的樣式，不需要你再去尋找其他的字體來搭配。而在排版的問題上，文本需要同背景有著充分的對(duì)比，

在設(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，通常會(huì)用到兩套字體，一套應(yīng)用到正文上，另外一套字體則用到標(biāo)題上，用作展示。

8、增大文本尺寸

在進(jìn)行排版設(shè)計(jì)的時(shí)候，你需要在合適的時(shí)候增加文本尺寸。隨著我們?nèi)粘？吹降钠聊怀叽绲脑黾?，我們需要讓用戶看到我們所提供的信息，并不是堆砌更多的?nèi)容，而是要合理的增加文本的尺寸。

雖然在移動(dòng)端設(shè)計(jì)上這種需求并不明顯，但是根據(jù)實(shí)際情況，適當(dāng)?shù)奶嵘煮w尺寸能讓文本的易讀性有明顯的提升。當(dāng)然，置于首屏的關(guān)鍵詞要明顯，吸引用戶滾動(dòng)，而不是將所有的內(nèi)容都堆在首屏。

9、創(chuàng)建易讀的文案

排版能夠從視覺上控制內(nèi)容的復(fù)雜度，而文字則能夠控制在信息傳達(dá)上的復(fù)雜度。兩者其實(shí)是同等重要。每個(gè)詞匯都應(yīng)該和視覺保持意義和信息上的一致性。

文案和視覺一樣，都需要反復(fù)推敲。

網(wǎng)站是可傳達(dá)、可閱讀的媒介，因此文案和內(nèi)容都應(yīng)當(dāng)干凈、簡(jiǎn)介，且高度可讀。你可以根據(jù)網(wǎng)站的風(fēng)格，使用符合相應(yīng)調(diào)性的文案。

10、打破一項(xiàng)規(guī)則

有的時(shí)候規(guī)則是用來打破的，但是如果你想讓你的設(shè)計(jì)保持簡(jiǎn)單，那么你在設(shè)計(jì)的時(shí)候，應(yīng)該有意識(shí)的打破一條規(guī)則，但是只能是一條。

如果你需要讓你的設(shè)計(jì)在簡(jiǎn)單的同時(shí)，又不是始終循規(guī)蹈矩，那么打破一條規(guī)則是讓你不走尋常路的最快的方法。它會(huì)讓你的設(shè)計(jì)看起來不那么尋常，但是又能有跡可循，打破太多的規(guī)則會(huì)很容易讓訪客覺得混亂。

結(jié)語

復(fù)雜的網(wǎng)站太多，想要讓你通過網(wǎng)站同用戶進(jìn)行順暢的溝通，設(shè)計(jì)是否夠簡(jiǎn)單是相當(dāng)重要的影響因素。無論是填寫表單還是下載APP，每個(gè)設(shè)計(jì)元素都應(yīng)當(dāng)恰到好處，而不會(huì)因?yàn)樨?fù)責(zé)而讓用戶覺得厭煩。

雖然有時(shí)候用戶喜歡看起來“飽滿”的復(fù)雜的設(shè)計(jì)，可是涉及到具體的交互與功能的時(shí)候，簡(jiǎn)單的設(shè)計(jì)每次都能讓用戶愛不釋手。

原文地址：uxplanet

原文作者：CARRIE COUSINS

譯者：陳子木

除此之外，湖湖還給大家整理了一波美國(guó)著名設(shè)計(jì)師團(tuán)隊(duì)Ramotion的網(wǎng)頁(yè)設(shè)計(jì)作品，含具體配色方案。

bank landing page, ?branding identity, ?credit debit card, ?financial pictogram, ?online banking, ?security level, ?simplicity, usability, ?special offer,?website, interface, ?web site, service,? html css javascript,? deposit,? investor,? investment,? capital,? html5 css3

bank selection,?fintech startup,?loading bar,?onboarding transitions,?payment flow,?popup interface,?ux ui, web design,?website animation,?wizard layout

application, code scan, confirmation, illustration simplicity, ios demo, mobile app, online instructions, user experience, user interface, ux ui, web animation, website transitions, ?authentication, ?two factor, ?demo, ?marketing

car racing, driver profile, landing page, path checkpoint, pictogram set, product cards, smart transaction, team reports, web animation, website design, ?parallax effect

conference room, illustration, landing animation, meeting deals management, planning, organizing, user experience, user interaction, ux ui, web application, website design, ?communication, ?tracker, ?performance, ?kpi

animated transition, aquarelle color combination, art studio website, clean web site, contacts section landing, gallery startup, motion simplicity, multimedia content, ramotion design, simple outline icons, user experience improvement, ux ui navigation, blur, ?webgl, ?web gl, ?rendering

3d,?apartment overview,?booking,?full immersion,?hotel review,?innovative technologies,?room description,?ux ui,?virtual reality experience,?vr ar,?website, tour, ?hotel, ?plan,? rent,? lease,? house,? apartment,? room

album ux ui, audio music player,?country tracks playlist,?equalizer animation,?mac interaction design,?macos service app,?material design,?soundcloud spotify osc,?streaming application,?tycho artist genre,?user experience prototype,?web radio interface

account landing page,?app registration pages,?final bank account,?financial platform site,?getfinal credit card,?magnifying glass,?material design interface,?morphing illustrations icons,?onboarding animation,?silicon valley web,?startup website designer,?ux ui list, ?signup, ?registration, flow, ?finances

business,?clean,?dashboard,?graph,?interface,?ipad pro,?pie chart,?side menu,?table view,?ux ui, ?erp, ?radial, ?analyze, ?research

animation,?clean,?design,?flower market,?online purchase,?simplicity,?startup landing,?transitions,?ux ui,?website,?web site, ?delivery, ?flowers, ?love, ?tulip, rose, ?birthday, ?holiday

mobile and web app,?application, booking service, simple?interface,?landing page,?luxury classic rent, online?platform,?responsive design,?ui?ux,?webdesign,?web site, automotive, ?car, ?specs

clean?interface service,?eco cooking solutions, thousands of?free recipes,?healthcare lifestyle,?healthy food,?meal plans,?responsive application,?simple navigation,?ux ui,?vegan nutrition,?web design, nutrition, ?recipes, ?vegetarian, ?blog, ?database

app interaction design,?booking retail settings,?crm dashboard questionnaire,?date stats,?interface ux ui,?material design,?responsive app application,?startup product,?user experience,?webdesign animation,?web site calendar,?website cms analytics

airplane aircraft icons,?flight illustration,?hosting provider,?material design,?payment price plans,?server startup,?storage pro account,?user experience,?user interface,?ux ui site,?web landing page,?website design

bookmarks,?cloud links,?cms crm,?flat design,?homepage,?icons,?landing page,?ramotion,?service platform,?squirrel,?webdesign,?web site design

????