首頁

設(shè)計(jì)響應(yīng)式網(wǎng)站的十個(gè)熱門框架

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

設(shè)計(jì)一個(gè)響應(yīng)式網(wǎng)站設(shè)計(jì)時(shí),運(yùn)用到的計(jì)算是費(fèi)時(shí)費(fèi)力的,不過還好,國外有一系列的響應(yīng)式框架模板可以使界面設(shè)計(jì)過程變得更便捷。這些框架或模板都有現(xiàn)成的柵格,布局和媒介,然后你可以盡情填充自己的設(shè)計(jì)理念。藍(lán)藍(lán)設(shè)計(jì)這篇文章匯總了國外UI設(shè)計(jì)師所推崇的大量熱門框架模板,收藏之前,先來瞧瞧吧:)

 

Bootstrap

Bootstrap

提高網(wǎng)站可用性的經(jīng)驗(yàn)指南

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

我想每個(gè)人都會(huì)贊成,網(wǎng)站的可用性是它能否受歡迎的一個(gè)重要方面,無論你進(jìn)行的是公司網(wǎng)站、在線商店還是其他,讓你的界面變得容易操控,使用時(shí)令人舒服是關(guān)鍵,近幾年已經(jīng)有很多針對(duì)網(wǎng)站界面優(yōu)化的研究,而且這些研究的成果對(duì)于提高網(wǎng)站可用性是非常有價(jià)值的?,F(xiàn)在藍(lán)藍(lán)設(shè)計(jì)這里有10個(gè)超實(shí)用的經(jīng)驗(yàn)分享,相信我,這些建議會(huì)極大地提高你那個(gè)網(wǎng)站的用戶體驗(yàn),讓用戶愛上你的網(wǎng)站設(shè)計(jì)!

 

一、善用人物配圖,使用戶專注于你想呈現(xiàn)的

當(dāng)進(jìn)入你的網(wǎng)站,我們會(huì)本能地關(guān)注網(wǎng)站上人物圖片中的臉和眼睛,這倒是為我們提供了一個(gè)想法,是不是可以用人物配圖吸引小伙伴的注意力呢?當(dāng)然,但這僅是第一步,我們還可以這樣做,你瞧,是不是大不相同?。ㄒ娤聢D)

這是第一步:

如何改善您的網(wǎng)站可用性測(cè)試

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

在最初的一次網(wǎng)站設(shè)計(jì)可用性測(cè)試實(shí)驗(yàn)中,我遇見了一位和藹可親的老大媽,她從來沒用過鼠標(biāo)。在測(cè)試過程中,她一直用手比劃著,一邊對(duì)著屏幕在空氣中比劃,一邊對(duì)著光標(biāo)說著建議的話。在測(cè)試最后,我當(dāng)然沒有得到任何結(jié)果,但是她堅(jiān)持認(rèn)為我是一個(gè)“可愛的男孩”,并且應(yīng)該認(rèn)識(shí)一下她的孫女。很快地,我學(xué)習(xí)到了如何設(shè)置實(shí)驗(yàn)者招募的核心標(biāo)準(zhǔn)。

如果你之前做過一個(gè)可用性測(cè)試,你就會(huì)知道這個(gè)不是看起來那么容易的。雖然這不是火箭科學(xué),但其中也包含一些舉足輕重的復(fù)雜性。在這篇文章里,我會(huì)分享一些我學(xué)到的關(guān)于如何幫助你避免你的可用性測(cè)試者在測(cè)試時(shí)最后進(jìn)入一個(gè)令人泄氣的結(jié)果的課程。

在我事業(yè)開始的第一年里有非常多我本可以學(xué)習(xí)的可貴的經(jīng)驗(yàn),并且我認(rèn)為在錯(cuò)誤中學(xué)習(xí)是學(xué)習(xí)的最好方法,我們并不是總有機(jī)會(huì)去失敗。這里有一些藍(lán)藍(lán)設(shè)計(jì)學(xué)習(xí)道路上的小技巧,可以幫助你快速提升可用性測(cè)試的技巧并且避免一些陷阱。

設(shè)計(jì)你的可用性測(cè)試腳本來回答具體的研究問題

當(dāng)我們開始一個(gè)新的可用性測(cè)試時(shí),不要遲疑,你所要做的就是挑選出網(wǎng)站的主要區(qū)域,然后讓用戶完成那些測(cè)試。在這個(gè)過程中你會(huì)發(fā)現(xiàn)一些有用的見解,但是也許當(dāng)你呈現(xiàn)出這些發(fā)現(xiàn)時(shí),你因?yàn)闊o法回答網(wǎng)站盈利者提出的問題而被圍得團(tuán)團(tuán)轉(zhuǎn),你也別因此而驚訝。

響應(yīng)式網(wǎng)頁中如何安置和處理圖片及視頻

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

響應(yīng)式網(wǎng)頁界面設(shè)計(jì),是一種正在流行的網(wǎng)頁開發(fā)思想,它是利用靈活可變的柵格系統(tǒng),令網(wǎng)頁的顯示模式可以根據(jù)訪問設(shè)備的屏幕尺寸規(guī)格而進(jìn)行自適應(yīng)。預(yù)計(jì)2015年的時(shí)候,移動(dòng)端的用戶數(shù)量將會(huì)從目前的8億,增長(zhǎng)到19億,而這也意味著目前我們?yōu)樽烂鏋g覽器而設(shè)計(jì)的網(wǎng)頁,將會(huì)在他們的手機(jī)和平板上呈現(xiàn)出非常糟糕的使用體驗(yàn)。

但是隨著實(shí)際應(yīng)用狀況的改變,響應(yīng)式網(wǎng)頁設(shè)計(jì)還是會(huì)出現(xiàn)一系列復(fù)雜的并發(fā)癥。藍(lán)藍(lán)設(shè)計(jì)本文余下的部分,就是詳細(xì)闡述如何在響應(yīng)式網(wǎng)頁中安置和處理多媒體元素,諸如圖片和視頻,最終的目的是幫你做出一個(gè)靠譜的網(wǎng)站,能讓這些元素?zé)o縫地在各種手持設(shè)備上加載運(yùn)行,提升用戶體驗(yàn)

響應(yīng)式網(wǎng)頁設(shè)計(jì)中的圖片處理

先說說響應(yīng)式圖片的處理方法。在響應(yīng)式網(wǎng)頁設(shè)計(jì)中,圖片處理的問題或多或少地和傳統(tǒng)網(wǎng)頁中的導(dǎo)航欄設(shè)計(jì)有相似之處。隨著新的移動(dòng)設(shè)備的普及,更高像素密度的屏幕使得網(wǎng)頁的任何一個(gè)瑕疵都顯得無比明顯,因此,圖片處理的核心問題在于如何確保網(wǎng)站(尤其是圖片)的各個(gè)方面都能盡可能靈活,并且確保每個(gè)像素不會(huì)在高分屏下模糊。

華麗麗的模糊大背景網(wǎng)頁設(shè)計(jì)

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

現(xiàn)在大模糊背景圖像的界面設(shè)計(jì)網(wǎng)站設(shè)計(jì)中越來越受歡迎,高斯模糊的加入不僅創(chuàng)建了一個(gè)朦朧彌漫的效果,具備高端觀賞性的同時(shí),它還可以強(qiáng)制性引導(dǎo)用戶關(guān)注主要信息內(nèi)容,大大提升了信息的易讀性。和藍(lán)藍(lán)設(shè)計(jì)一起來欣賞這些網(wǎng)站吧:)

更多模糊大背景網(wǎng)站設(shè)計(jì)欣賞http://sillybuy.com/

Color

View the website

網(wǎng)站設(shè)計(jì)應(yīng)該如何駕馭黑色?

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

這篇文章藍(lán)藍(lán)設(shè)計(jì)傾力推薦了許多多個(gè)美麗的黑色系網(wǎng)站設(shè)計(jì),微妙的色調(diào)和戲劇性的黑白圖像一定會(huì)讓你陷入這一場(chǎng)低調(diào)奢華的視覺盛宴里,來嘗嘗吧:)

另外也希望大家?guī)е鴨栴}去欣賞這些網(wǎng)站界面設(shè)計(jì),這些UI設(shè)計(jì)師是如何把黑色設(shè)計(jì)的更有國際范?如果是你來,布局、素材、輔助色又會(huì)怎么選用呢?

更多黑色網(wǎng)站設(shè)計(jì)欣賞:http://sillybuy.com/

DASSEL UND WAGNER

DASSEL UND WAGNER

推薦給設(shè)計(jì)師的美觀實(shí)用的網(wǎng)站

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

藍(lán)藍(lán)設(shè)計(jì)灰常樂意每周在網(wǎng)頁設(shè)計(jì)佳作列表中展現(xiàn)界面設(shè)計(jì)精美的網(wǎng)站,不斷為你提供靈感。而今天藍(lán)藍(lán)設(shè)計(jì)打算另辟蹊徑,為網(wǎng)頁設(shè)計(jì)收集了既能提供UI設(shè)計(jì)靈感又實(shí)用的優(yōu)秀案例,與過往選擇單一”主題”的例子有所不同。我們將為你呈現(xiàn)不同的工具和技術(shù)分享網(wǎng)站,可讓你在得到靈感的同時(shí)還能發(fā)現(xiàn)不錯(cuò)的工具或服務(wù)。在這篇文章中你將看到美觀又實(shí)用的網(wǎng)站,全部都不容錯(cuò)過哦親!

unroll.me

免費(fèi)且簡(jiǎn)單地取消郵件訂閱,還能將剩下的訂閱匯總,并以有組織的概覽形式專門提供給你。

22 Inspiring and Useful Websites

慈善及非營利組織官網(wǎng)欣賞

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

許多的慈善和非營利組織嘗試籌集善款并設(shè)法讓大家知道他們的特殊存在。以前,他們沒有設(shè)計(jì)和開發(fā)好網(wǎng)站的資源,不得不湊合著搭個(gè)樸素、單調(diào)、無聊的網(wǎng)站,這些網(wǎng)站自然沒法吸引新的訪問者。

然而今時(shí)不同往日,UI設(shè)計(jì)者和開發(fā)者會(huì)幫助某些組織搭建網(wǎng)站,這些組織或慈善目的能引起他們的興趣,或讓他們聯(lián)想到自身經(jīng)驗(yàn),或他們的家人和朋友有參與的。最終就有了專門為這些慈善和非營利組織搭建的漂亮網(wǎng)站設(shè)計(jì),且非常值得一看。跟著藍(lán)藍(lán)設(shè)計(jì)一起來欣賞下吧!

 

Glocal Ventures

1-glocal-ventures

網(wǎng)頁設(shè)計(jì)新趨勢(shì)!出眾的響應(yīng)式導(dǎo)航設(shè)計(jì)

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

響應(yīng)式設(shè)計(jì)是當(dāng)前網(wǎng)站設(shè)計(jì)的趨勢(shì),針對(duì)不同的設(shè)備,提供布局解決方案。而且很多技術(shù)狂人正在不斷的進(jìn)行各種實(shí)驗(yàn),爭(zhēng)取讓響應(yīng)式設(shè)計(jì)越來越好。響應(yīng)式設(shè)計(jì)的難點(diǎn)是導(dǎo)航菜單??刹荒芟窨s放頁面那樣縮放導(dǎo)航菜單。在UI設(shè)計(jì)之前,要謀劃好導(dǎo)航菜單在手機(jī)、平板、桌面上的布局。藍(lán)藍(lán)設(shè)計(jì)收集了許多例出眾的響應(yīng)式設(shè)計(jì),大家可以使用響應(yīng)式在線測(cè)試工具Responsinator來看看,他們的導(dǎo)航菜單,是怎樣界面設(shè)計(jì)的。

Gold Interactive

Gold Interactive | Intro

將滾屏玩出新奇花樣的網(wǎng)站

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

曾經(jīng)有一段時(shí)間,大伙兒都在努力把網(wǎng)頁界面設(shè)計(jì)內(nèi)容全部塞進(jìn)首屏。今時(shí)不同往日,網(wǎng)站UI設(shè)計(jì)師和開發(fā)者們不再害怕滾屏,而是將背景漸進(jìn)展示、頁面元素動(dòng)畫以及其它基于滾屏動(dòng)作的酷炫效果融入其中,把滾屏當(dāng)作一個(gè)吸引訪客的絕佳靚點(diǎn)來好好展現(xiàn)。

為了給親們帶來新的靈感,藍(lán)藍(lán)設(shè)計(jì)特意收集了一系列把滾屏玩出新花樣的網(wǎng)站設(shè)計(jì),跟我來感受一下吧!

ISL

19 Websites with Extremely Creative Scrolling Effects

日歷

鏈接

個(gè)人資料

存檔