當(dāng)你第一次打開(kāi)一款應(yīng)用的時(shí)候常常會(huì)看到精美的引導(dǎo)頁(yè)設(shè)計(jì)，它們?cè)谀阄词褂卯a(chǎn)品之前提前告知你產(chǎn)品的主要功能與特點(diǎn)，第一次印象的好壞會(huì)極大地影響到后續(xù)的產(chǎn)品使用體驗(yàn)。因此各個(gè)公司都在努力將這幾個(gè)頁(yè)面設(shè)計(jì)好，從一開(kāi)始就引人入勝。那接下來(lái)我跟大家一起來(lái)探討關(guān)于引導(dǎo)頁(yè)的設(shè)計(jì)。

一、 目的區(qū)分

根據(jù)引導(dǎo)頁(yè)的目的、出發(fā)點(diǎn)不同，可以將其分為功能介紹類(lèi)、使用說(shuō)明類(lèi)、推廣類(lèi)、問(wèn)題解決類(lèi)，一般引導(dǎo)頁(yè)不會(huì)超過(guò)5頁(yè)。

1.功能介紹類(lèi)

功能介紹類(lèi)引導(dǎo)頁(yè)主要是對(duì)產(chǎn)品的主要功能進(jìn)行展示，讓用戶對(duì)產(chǎn)品主功能有一個(gè)大致的了解。采用的形式大多以文字配合界面、插圖的方式來(lái)展現(xiàn)。

以易信為例，采用文字與水彩插圖結(jié)合的方式，文字分為2個(gè)層次，大標(biāo)題與小標(biāo)題，大標(biāo)題是對(duì)主功能的概括，小文字是對(duì)其功能模塊的詳細(xì)描述或進(jìn)一步補(bǔ)充說(shuō)明。

什么是細(xì)節(jié)設(shè)計(jì)？在討論這個(gè)問(wèn)題前先來(lái)看個(gè)案例。如果你手里恰巧有 iPhone 4s / 5 / 5s，請(qǐng)隨便打開(kāi)一個(gè)可以調(diào)出虛擬鍵盤(pán)的應(yīng)用「比如短信」。注意觀察鍵盤(pán)的最后一行，相信看這篇文章的人都是中文用戶，所以在你的 Space 鍵「空格鍵」左邊一定有 Globe 鍵「用于切換輸入法的那個(gè)小地球按鍵」和 Dictation 鍵「畫(huà)著麥克風(fēng)的語(yǔ)音輸入鍵」。然后去到 Settings「設(shè)置」- General「通用」- Keyboard「鍵盤(pán)」- Keyboards「鍵盤(pán)」，將除 English「英文」之外的輸入法全部移除后再回到之前的虛擬鍵盤(pán)，你就會(huì)得到下面的兩幅圖。

編者按：動(dòng)效現(xiàn)在是扁平化身邊的大紅人，哪里都有它的身影，動(dòng)效能否為扁平化增光？設(shè)計(jì)師有什么利器可以繪制動(dòng)效？昨天發(fā)現(xiàn)一篇好文，關(guān)于這兩方面都有實(shí)在的干貨分享，建議同學(xué)們當(dāng)機(jī)立斷，先轉(zhuǎn)后贊，特別要記得看。

作為一個(gè)網(wǎng)頁(yè)設(shè)計(jì)師，我們需要努力讓我們的技術(shù)與技巧與時(shí)俱進(jìn)。我們不用追隨每一個(gè)時(shí)代潮流（比如長(zhǎng)投影），但是我們的確需要隨著網(wǎng)絡(luò)的發(fā)展與成熟，不斷學(xué)習(xí)并提高我們的技巧。

網(wǎng)頁(yè)設(shè)計(jì)產(chǎn)業(yè)最近開(kāi)始火熱的新發(fā)展之一便是動(dòng)效，越來(lái)越多的公司在他們的應(yīng)用和網(wǎng)站中放入動(dòng)效以取悅用戶，從競(jìng)爭(zhēng)對(duì)手中脫穎而出以及提升產(chǎn)品的可用性。

動(dòng)效需求如此之高的另一個(gè)原因在于網(wǎng)頁(yè)扁平化的潮流。扁平化設(shè)計(jì)整體來(lái)說(shuō)是挺不錯(cuò)的，而且使得人們尋求新的方式來(lái)改善它為數(shù)不多的問(wèn)題。

有時(shí)候看到有人說(shuō)國(guó)外的網(wǎng)站風(fēng)格不適合用在國(guó)內(nèi)，這是不對(duì)的，網(wǎng)頁(yè)重點(diǎn)是布局排版和配色，而歐美的網(wǎng)頁(yè)有很多創(chuàng)新的布局，配色也很棒，這些都可以參考，今天我們整理20+排版超贊的歐美網(wǎng)頁(yè)設(shè)計(jì)PSD模板，無(wú)論是新手或是進(jìn)階設(shè)計(jì)師都可以下載來(lái)學(xué)習(xí)，還允許免費(fèi)商用呦！

下面一起來(lái)看看這組免費(fèi)的網(wǎng)站模板素材，有很多不同的行業(yè)類(lèi)型供你參考噢！

1. 元素對(duì)齊與邊距

所有的頁(yè)面都應(yīng)遵循左邊距12px或24px。

內(nèi)容，標(biāo)題，標(biāo)頭以及標(biāo)頭的圖標(biāo)也應(yīng)左對(duì)齊，距離左邊界為12px或是24px。

如果有需要進(jìn)行右對(duì)齊，右邊距也應(yīng)該是12px或是24px。

快來(lái)學(xué)習(xí)下這些界面設(shè)計(jì)的技巧吧！

本文將介紹一些UI界面與設(shè)計(jì)使用的元素、軟件和網(wǎng)站。內(nèi)容很豐富，適合用戶體驗(yàn)設(shè)計(jì)師、界面設(shè)計(jì)師、產(chǎn)品設(shè)計(jì)師、JS前段開(kāi)發(fā)、手機(jī)產(chǎn)品設(shè)計(jì)以及iPad和平板電腦產(chǎn)品設(shè)計(jì)等使用。

UI即User Interface（用戶界面）的簡(jiǎn)稱(chēng)。UI設(shè)計(jì)的魅力在于，你不僅需要適當(dāng)?shù)募记桑斫庥脩襞c程序的關(guān)系。一個(gè)有效的用戶界面關(guān)注的是用戶目標(biāo)的實(shí)現(xiàn)，包括視覺(jué)元素與功能操作在內(nèi)的所有東西都需要完整一致。為了實(shí)現(xiàn)這個(gè)目標(biāo)，在設(shè)計(jì)的過(guò)程中，你需要注意下面12個(gè)最基本的問(wèn)題。

如果你是一個(gè)狂熱的Android粉絲，那么在未來(lái)幾個(gè)月中一定會(huì)發(fā)現(xiàn)很多變化。其中，便是Material Design全新設(shè)計(jì)語(yǔ)言帶來(lái)的界面效果，這是一個(gè)簡(jiǎn)潔、流暢、多彩的新界面，將橫跨手機(jī)、平板、智能手表等多種平臺(tái)，實(shí)現(xiàn)統(tǒng)一的使用體驗(yàn)。事實(shí)上，除了整體外觀的變化，Material Design還擁有各種交互及視覺(jué)上的變化，很多部分都要比蘋(píng)果的iOS 8更加賞心悅目，下面就是幾個(gè)值得關(guān)注的部分：