国产日本中文字幕网_久热免费视频_秋霞2016午夜限制电影在线_www色视频还会玩转热点_欧美中日韩免费专区在线_亚洲AV色噜噜男人的天堂吃奶_亚洲人成无码网址_国产成人主播在线观看_欧美韩日精品一区_久久精品国产亚洲AV高清色三区

公司新聞

將想法與觀點,與您一起分享~

開發(fā)案例插畫 插畫-樹 插畫-樹

如何設(shè)計出優(yōu)秀的網(wǎng)頁

潤雪科技 時間:2018-07-05 10:01 瀏覽量:2606

 不論這個奇異的點子落腳在一個微小的元素上,還是貫徹到整體的設(shè)計里,這種專屬于腦洞的奇特魅力會自然地吸引這用戶。許多奇妙的設(shè)計常見于女性化和兒童化的設(shè)計,但是它們的作用不僅止于這兩個類型。許多不同類型的設(shè)計項目都能夠融入奇思妙想,不過近期這類創(chuàng)意腦洞最容易同摩登復(fù)古設(shè)計風(fēng)的網(wǎng)頁結(jié)合起來使用。

說一千道一萬,我們不如看看設(shè)計師們都是怎么做的吧。

手寫字體

image.png

 相比于我們常用的襯線體和非襯線體,手寫字體常常顯得更加真實,更加情緒化,相比之下也更加富有魅力,能夠?qū)⒄麄€設(shè)計的情感最大化。

當(dāng)然,過猶不及。在使用手寫字體的時候,有些老生常談的問題值得注意:不要使用那些被用濫了的手寫字體。為了效果最大化,越接近于手寫效果的字體,越真實,效果就越好。而絕大多數(shù)的計算機(jī)設(shè)計的字體就正好缺乏這種真實性。所以,下面的幾個問題值得你考慮:

1. 盡量挑選擁有多種樣式可替換的字體族。當(dāng)同一個字母使用多次又需要有細(xì)微差別的時候,可以通過替換同族不同樣式的字體來實現(xiàn)這種差異。

2. 不要大規(guī)模使用手寫字體,盡量最低限度的使用確保效果最大化,比如只在標(biāo)題中使用。

3. 請務(wù)必保持風(fēng)格和基調(diào)的一致性。纖細(xì)的字體盡量和細(xì)體一起搭配使用,而粗體則盡量和粗體組合使用。

水彩畫

image.png

水彩畫屬于那種上手并不那么容易,但是用好了又特別贊的設(shè)計元素。它的使用方式很多,從背景到插畫都很不錯,像上面的網(wǎng)站就是很好的例子。

當(dāng)你使用水彩畫的時候,應(yīng)當(dāng)明確你的目的:拿它來干什么。想要充分用好它,要么盡可能讓界面全套的元素都沿用水彩元素,要么僅僅在較小的元素上使用水彩元素。

當(dāng)然,如果沒有其他對比強(qiáng)烈的視覺效果的時候,使用水彩元素也無傷大雅。如果你覺得水彩元素會喧賓奪主的話,不妨適當(dāng)?shù)氐鼈儭?/span>

插畫

image.png

沒有什么比漂亮精致的插畫更抓人眼球的了。插畫本身就是高識別度的設(shè)計元素,而你的設(shè)計則可以借此更好的被用戶所認(rèn)識。所以,一份設(shè)計優(yōu)秀的插畫能夠成為你的重要的身份識別

你并不需要用大面積、整幅的插畫來證明什么,一個小的插畫,甚至是草圖就足夠了。這個頁面僅僅只是使用幾幅小的插畫,就很好的營造出整體效果,展現(xiàn)出設(shè)計者的奇妙思路。

鮮艷的色彩

image.png

沒有什么比鮮艷的色彩更能能營造輕松愉悅的氛圍了。色彩本身就能讓用戶第一時間感受到,而大膽明亮的配色在情緒表達(dá)上也有著先天的優(yōu)勢,用戶能從中直接感受到有趣或者愉悅的情緒。

設(shè)計師的奇思妙想常常會用高飽和度的黃色、橙色和綠色來表現(xiàn)。實際上,即使是只使用這些色彩就已經(jīng)能夠達(dá)到效果了,并非必須使用高飽和度。

正在影響整個設(shè)計領(lǐng)域的扁平化設(shè)計和Material Design 為我們貢獻(xiàn)出許多奇妙的配色方案,如果你想調(diào)出不同凡響的配色方案,不妨從這里開始:

線條和筆觸

image.png

想要讓你的設(shè)計顯得輕盈的另外一種手法的就是將細(xì)線和纖細(xì)的筆觸貫穿整個設(shè)計。從主視覺元素、圖片的邊緣到字體的筆畫都使用線條和細(xì)筆觸來表現(xiàn),最關(guān)鍵的是,這些元素營造出輕盈的感覺的同時,還擁有強(qiáng)大的包容性,承載你的奇妙構(gòu)思,加入更多自定義的、獨特的元素。

舉個最簡單的例子,即使是纖細(xì)的元素貫穿始終,你依然可以使用一些不那么纖細(xì)的元素與之搭配,形成對比??纯?/span>這個設(shè)計,它就很好的融入了一些相對厚重的字體(注意背景),鮮亮的色彩和深沉的黑色文字、淺灰的背景形成了很好的對比,不單調(diào)也不繁復(fù),陰陽調(diào)和。

簡單的動效

image.png

雖然動效主要是用來同用戶進(jìn)行交互、引導(dǎo)交互、呈現(xiàn)效果,但是也可以純是為了有趣而進(jìn)行設(shè)計。懸停特效、舞臺效果、跳動、拉伸、擬物的運(yùn)動等等等等,它們都能夠給用戶以情緒上的觸動。

當(dāng)你要將一種獨特的想法注入到你的動畫中的時候,務(wù)必記住它是要用來取悅用戶的。這也是為什么許多設(shè)計師在這么做的時候會選擇明亮的色彩或者結(jié)合有趣的插畫——用戶吃這一套。

網(wǎng)站就集成了許多不錯的動效,動態(tài)磁貼式的布局,鮮艷的配色和各式各樣的懸停效果,它們不僅讓用戶讀取到更多的而內(nèi)容,而且更好的引導(dǎo)用戶去尋找他們想要的內(nèi)容。

有目的性的設(shè)計缺陷

image.png

通過設(shè)計來呈現(xiàn)完美和有目的性的設(shè)計出缺陷是同樣的道理。那些小瑕疵、小缺陷惹人注意,令人側(cè)目,是設(shè)計師故意為之,從而達(dá)到特定的目的。就像動畫和電影中的各種致敬一樣,這些缺陷會成為你的優(yōu)勢。

這些缺陷可以以不同的形式存在于不同的地方:

① 一條線比其他的線都要粗或者細(xì)

② 文本中某幾個字和其他的字的字體明顯不同

③ 某個線條或者插畫和其他的部分明顯不對齊或者不一致

④ 明顯不匹配的元素相互混合

⑤ 不對稱的圖形和不一致的比例

⑥ 現(xiàn)實的元素和幻想的元素相互混合搭配

如果你拿不準(zhǔn)你的奇妙想法能否迎合用戶,那么就從小的元素開始嘗試,一點一點嘗試中打磨這些元素。不要怕腦洞大,在這個時代想法很重要。有人習(xí)慣于平庸,不過更多的人在尋求不同,也許你的腦洞正好合用。


來源聲明:本文【如何設(shè)計出優(yōu)秀的網(wǎng)頁】由潤雪科技編輯原創(chuàng)或采編整理,如需轉(zhuǎn)載請注明來自潤雪科技。以上內(nèi)容部分(包含圖片、文字)來源于網(wǎng)絡(luò),如有侵權(quán),請及時與本站聯(lián)系。

TAG標(biāo)簽:網(wǎng)站開發(fā) 網(wǎng)站設(shè)計

相關(guān)文章
如果您感覺我們的案例非常不錯,請與我們?nèi)〉寐?lián)系~
立即咨詢
獲取方案及報價 023-6288-5285
網(wǎng)站建設(shè)流程 需求溝通
網(wǎng)站建設(shè)流程 簽訂合同
網(wǎng)站建設(shè)流程 項目開發(fā)
網(wǎng)站建設(shè)流程 上線/運(yùn)營維護(hù)

張經(jīng)理

186-9655-6121

鄒經(jīng)理

188-1980-6503

潤雪科技二維碼
電話咨詢 在線咨詢 微信咨詢