首頁(yè)

簡(jiǎn)約時(shí)尚的電商網(wǎng)站設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)的小編

小型電子商務(wù)網(wǎng)站設(shè)計(jì)能享受這樣的:不用像很多大型連鎖商店那樣必須使用預(yù)先規(guī)定的界面設(shè)計(jì)樣式,他們不需要內(nèi)容繁多的登錄頁(yè)面,也不需要有著成百上千條分類的大型菜單欄,甚至不需要一個(gè)建議性或可選擇的產(chǎn)品鏈接。
所有小型商店的好商品需要的是一位很棒的設(shè)計(jì)師來為它們建立一個(gè)簡(jiǎn)潔且現(xiàn)代感十足的網(wǎng)站。當(dāng)然,一枚”立即購(gòu)買”的按鈕會(huì)很有用。
我相信當(dāng)你看完藍(lán)藍(lán)設(shè)計(jì)這些簡(jiǎn)約時(shí)尚的電商網(wǎng)站設(shè)計(jì)后,你會(huì)對(duì)視覺營(yíng)銷,電子商務(wù)有全新的認(rèn)識(shí)!

或者會(huì)發(fā)自肺腑的感嘆:原來這就足夠了,購(gòu)物真的不需要那么復(fù)雜。

Tatchies

39

如何避免犯哪些網(wǎng)頁(yè)設(shè)計(jì)最常見的可用性錯(cuò)誤

藍(lán)藍(lán)設(shè)計(jì)的小編

在過去十年中高品質(zhì)的網(wǎng)頁(yè)可用性一直是業(yè)內(nèi)討論的核心,因?yàn)樗鼘?duì)用戶來說越來越重要。好的可用性也可以幫助建立品牌知名度,從而提升用戶對(duì)一個(gè)網(wǎng)站設(shè)計(jì)或者是一家公司的評(píng)價(jià)。今天人們依然高度關(guān)注可用性,是因?yàn)榇蟠笮⌒〉墓疽呀?jīng)證明了好的可用性策略是多么重要。

在過去幾年中,良好的可用性成為那些成功的初創(chuàng)公司的核心。多數(shù)情況下,簡(jiǎn)單的想法最具創(chuàng)造性,可用性主要是指:使一個(gè)功能或者產(chǎn)品易于使用,但同時(shí)也要保持產(chǎn)品質(zhì)量維持在高水平上。

如今,很多文章會(huì)談到普遍意義。在對(duì)該話題年復(fù)一年的討論之后,似乎UI設(shè)計(jì)者們?nèi)匀缓茈y去理解它。可用性早已不再是一個(gè)玩笑,下面藍(lán)藍(lán)設(shè)計(jì)這些建議應(yīng)當(dāng)被打印出來并粘到你桌子對(duì)面的墻上。

鏈接的顏色

我經(jīng)常發(fā)現(xiàn)自己在瀏覽網(wǎng)頁(yè)時(shí),有些頁(yè)面上的鏈接沒有以某種形式高亮顯示。這是我見過的最愚蠢的錯(cuò)誤。我愿意訪問那些鏈接使用默認(rèn)藍(lán)色的頁(yè)面,而不是鏈接和 普通文字一個(gè)顏色的頁(yè)面。用戶需要知道如何在頁(yè)面之間導(dǎo)航、在哪兒能點(diǎn)擊鏈接。你不能指望他們把鼠標(biāo)一行行的掠過所有文字去找鏈接,直到發(fā)現(xiàn)鼠標(biāo)箭頭變成 “小手兒”。

網(wǎng)頁(yè)設(shè)計(jì)中那些不容忽視的細(xì)節(jié)

藍(lán)藍(lán)設(shè)計(jì)的小編

你有沒有經(jīng)歷過看到一個(gè)頁(yè)面的時(shí)候馬上就被它的界面設(shè)計(jì)吸引并且留下了深刻的印象呢?然后你進(jìn)一步細(xì)看這個(gè)頁(yè)面發(fā)現(xiàn)真正使這個(gè)頁(yè)面變得神奇的是一些小細(xì)節(jié),在藍(lán)藍(lán)設(shè)計(jì)這篇文章中我們將看到幾種把細(xì)節(jié)設(shè)計(jì)做到完美的頁(yè)面。

完美的像素線

Image Spark UI設(shè)計(jì)師用一個(gè)像素的線條來分割頂部導(dǎo)航,搜索輸入框,導(dǎo)航底欄。任何時(shí)候一個(gè)較淺的顏色緊挨著一個(gè)較深的顏色會(huì)使人出現(xiàn)有一個(gè)凸起的邊緣的錯(cuò)覺。請(qǐng)注意這種線條只能比背景色稍微淺一點(diǎn)點(diǎn)。如果使用一條白線那將失去這種效果。

如何設(shè)計(jì)有范兒的個(gè)人作品時(shí)間軸網(wǎng)頁(yè)

藍(lán)藍(lán)設(shè)計(jì)的小編

藍(lán)藍(lán)設(shè)計(jì)這個(gè)教程中我們將使用Photoshop CS6設(shè)計(jì)一個(gè)簡(jiǎn)單、干凈、三列的作品集時(shí)間軸。在這個(gè)過程中,我們將著眼于自定義網(wǎng)格,排版樣式,并利用不同的顏色和對(duì)比度實(shí)現(xiàn)我們想要的美感。

同學(xué)們可以從這個(gè)教程學(xué)習(xí)如何在一個(gè)頁(yè)面平衡不同的元素,使整個(gè)界面設(shè)計(jì)富有韻律感與呼吸感??飚厴I(yè)的童鞋們可以嘗試這樣展示你的作品集喲。

上效果圖:

1p

 

不同風(fēng)格的設(shè)計(jì)師個(gè)人網(wǎng)站欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

如果要在一個(gè)UI設(shè)計(jì)師的眾多作品當(dāng)中挑選一個(gè)最接近該設(shè)計(jì)師的界面設(shè)計(jì)思想及風(fēng)格的,那么這個(gè)作品基本上就是設(shè)計(jì)師的個(gè)人網(wǎng)站設(shè)計(jì)。因?yàn)樵O(shè)計(jì)師個(gè)人網(wǎng)站在某種意義上來說可以不用顧及任何受眾群體,不用考慮任何商業(yè)約束之類的,基本上是一種隨心所欲的完全自我風(fēng)格的呈現(xiàn)。

因此,UI設(shè)計(jì)師們的個(gè)人網(wǎng)站設(shè)計(jì)成為了另一抹艷麗的風(fēng)景,來欣賞藍(lán)藍(lán)設(shè)計(jì)今天為您帶來的這道靚麗風(fēng)景線吧。

Sushi & Robots

Sushi & Robots

25個(gè)超贊的色塊化、模塊化網(wǎng)頁(yè)

藍(lán)藍(lán)設(shè)計(jì)的小編

藍(lán)藍(lán)設(shè)計(jì)強(qiáng)烈推薦:這些超贊的色塊化、模塊化網(wǎng)頁(yè)設(shè)計(jì)!
Web設(shè)計(jì)的8大趨勢(shì)中,其中就包含了色塊設(shè)計(jì)、超大號(hào)的圖片、聚焦簡(jiǎn)潔、響應(yīng)式設(shè)計(jì)、視差滾動(dòng)、強(qiáng)調(diào)字體。
辣!這些鮮活靈動(dòng)的界面設(shè)計(jì)案例,絕對(duì)會(huì)有打動(dòng)你的一個(gè)!在這個(gè)激動(dòng)人心的周五,會(huì)心收藏吧!

Mercer Tavern

View the live website design

十個(gè)國(guó)外黃色網(wǎng)站欣賞

藍(lán)藍(lán)設(shè)計(jì)的小編

在中國(guó)清朝,明黃色的衣服只有皇子才有資格穿,慢慢的黃色在中國(guó)就成了高貴的顏色。在人們的色彩印象中,黃色界面設(shè)計(jì)也表現(xiàn)為暫停。所以當(dāng)你的網(wǎng)頁(yè)設(shè)計(jì)采用黃色的時(shí)候,會(huì)讓人們?cè)谀愕木W(wǎng)頁(yè)前停留。今天藍(lán)藍(lán)設(shè)計(jì)就推薦一些國(guó)外黃色網(wǎng)站設(shè)計(jì),希望對(duì)UI設(shè)計(jì)師們有所幫助!

黃色,就像橙色和紅色,黃色也是一個(gè)暖色。它有大自然、陽(yáng)光、春天的涵義,而且通常被認(rèn)為是一個(gè)快樂和有希望的色彩。不過話雖如此,它可能是一個(gè)難以應(yīng)付的色彩,而且貌似并不像之前討論的那幾種色彩流行。黃色是所有色相中最能發(fā)光的顏色,給人輕快,透明,輝煌,充滿希望的色彩印象。

如何設(shè)計(jì)清楚明了的對(duì)話框

藍(lán)藍(lán)設(shè)計(jì)的小編

對(duì)話框(Dialog)是個(gè)好用又方便的工具,通常用來再三確認(rèn)使用者的操作動(dòng)作與決策,以避免一時(shí)的手誤或誤會(huì)操作動(dòng)作的意思,常用于重要?jiǎng)幼鞯拇_認(rèn),例如:「你確定要?jiǎng)h除這個(gè)聯(lián)絡(luò)人嗎?」,但若對(duì)話框搭配了不適當(dāng)?shù)幕貞?yīng)選項(xiàng)文字,反而可能會(huì)造成使用者的困擾與誤解,有時(shí)還可能做了錯(cuò)誤的決定。

對(duì)話框界面設(shè)計(jì)最常見的不當(dāng)UI設(shè)計(jì)就是選項(xiàng)上的文字出現(xiàn):「是(YES)與否(NO)」,回想在學(xué)生時(shí)期考試的時(shí)候,O與X在是非題中是唯二的兩個(gè)答案,而出題者會(huì)透過文字?jǐn)⑹錾险吹恼`導(dǎo),來測(cè)驗(yàn)學(xué)生是否真的清楚了解,先不論這樣的測(cè)驗(yàn)方式到底對(duì)學(xué)習(xí)以及知識(shí)的建立到底有沒有明顯的幫助,使用者可不想在開心的使用你的程式或服務(wù)時(shí),還要小心翼翼的了解你對(duì)話框的內(nèi)容。

我們當(dāng)然可以細(xì)心的UI設(shè)計(jì)對(duì)話框中的文字,讓使用者清楚明了對(duì)話框的訊息,但是在大部分的情況下,我們幾乎根本不會(huì)逐字去閱讀訊息的內(nèi)容。你必須要假設(shè)使用者除了對(duì)話框上的按鈕外,不會(huì)閱讀任何其他訊息(對(duì)話框的標(biāo)題或是訊息內(nèi)容)。 – John Gruber of Daring Fireball

dialog

企業(yè)網(wǎng)站建設(shè)如何減少跳出率

藍(lán)藍(lán)設(shè)計(jì)的小編

毋庸置疑,造成用戶跳出率高的真正殺手是網(wǎng)站設(shè)計(jì)元素的雜亂和干擾。 總而言之,網(wǎng)站上任何惱人的元素都有可能造成用戶蜻蜓點(diǎn)水般離去,這些干擾可能是任何不和諧因素,包括過多的動(dòng)畫效果、過于雜亂的配色設(shè)計(jì)。只有層次分明、清晰明了的網(wǎng)站設(shè)計(jì)才能讓用戶把視線聚集在網(wǎng)站內(nèi)容的價(jià)值上,從而達(dá)到網(wǎng)站建設(shè)的目的。而用戶的煩惱就在于網(wǎng)站不合時(shí)宜的排版、不恰當(dāng)?shù)膶?dǎo)航以及錯(cuò)誤的信息把用戶統(tǒng)統(tǒng)拒之門外。

優(yōu)秀的網(wǎng)站設(shè)計(jì)是能最大化降低用戶跳出率,并提供良好的用戶體驗(yàn)和有價(jià)值的信息。為了避免界面設(shè)計(jì)的悲劇,藍(lán)藍(lán)設(shè)計(jì)總結(jié)了六大要素試圖降低網(wǎng)站跳出率:

 

1. 良好的用戶界面

日歷

鏈接

個(gè)人資料

存檔