首頁

小技巧幫你完成創(chuàng)意十足的網(wǎng)頁設(shè)計(jì)

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

作為一名UI設(shè)計(jì)師,每年都會(huì)沉浸在一些新的界面設(shè)計(jì)趨勢中興奮不已。接下來,我們將探尋2014年的設(shè)計(jì)趨勢,這絕對(duì)是意義非凡的事情。Web設(shè)計(jì)師必須洞悉所有相關(guān)領(lǐng)域的新趨勢,緊跟時(shí)尚潮流。

這些新趨勢讓設(shè)計(jì)變得妙趣橫生。但是很多專家還會(huì)倡導(dǎo)那些并非最時(shí)髦、最震撼世界的設(shè)計(jì)。當(dāng)然,響應(yīng)式設(shè)計(jì)不僅去年是熱點(diǎn),今年依然還會(huì)被人們重視。同樣,柵格化設(shè)計(jì)作為最基本的設(shè)計(jì),也會(huì)被繼續(xù)延續(xù)下去。

這次,藍(lán)藍(lán)設(shè)計(jì)想探索一下那些逐漸發(fā)展起來的設(shè)計(jì)潮流。也許過去我們只是偶爾嘗試一下這些UI設(shè)計(jì)風(fēng)格,但是今年我們會(huì)真正關(guān)注它們。

更多留白/負(fù)空間

Nate Hanson

如何才能設(shè)計(jì)出用戶真正愿意買單的產(chǎn)品

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

做為UI設(shè)計(jì)師的你怎么確保你花時(shí)間設(shè)計(jì)的所有軟件產(chǎn)品都讓你的用戶真正愿意去買單?你花幾周時(shí)間去寫代碼實(shí)現(xiàn)一個(gè)好創(chuàng)意是一回事。但你確定你所編程出的產(chǎn)品有用戶群么?

最終你想做的事情就是創(chuàng)造些東西,投資廣告,卻沒有給你的潛在用戶帶來任何附加值,然后用戶就會(huì)開走,永遠(yuǎn)不再回來。在你寫代碼之前,最重要的一點(diǎn)就是你需要跳出鍵盤之外,想一想你的用戶真正想要使用的和真正愿意買單的產(chǎn)品是什么。

有點(diǎn)難度的就是是:了解你的用戶愿意為什么買單。容易的是:這里有一個(gè)步驟你可以嘗試:1,瞄準(zhǔn)一個(gè)特殊的用戶群,2,學(xué)會(huì)如何設(shè)計(jì)出一個(gè)產(chǎn)品來解決他們的問題,3,并漸漸形成習(xí)慣。

藍(lán)藍(lán)設(shè)計(jì)這里有個(gè)很著名的例子。當(dāng)你使用 Instragram時(shí),實(shí)際上有這樣一個(gè)過程,你每一次瀏覽你用智能手機(jī)拍的一張很有藝術(shù)氣質(zhì)的照片的時(shí)候(這個(gè)動(dòng)作每天有數(shù)百萬人去做),并且將它分 享給你的朋友們,這就是形成習(xí)慣。Instragram,還有 Facebook, 是兩個(gè)產(chǎn)品滿足用戶關(guān)鍵需求的經(jīng)典案例——與盡可能多的朋友分享他們的生活,同時(shí)也形成了習(xí)慣。這些應(yīng)用都有一個(gè)形成用戶習(xí)慣的過程,這個(gè)過程正是源于深 入觀察用戶的需求然后整合到界面設(shè)計(jì)中。

如何自適應(yīng)不同的分辨率界面?

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

隨著移動(dòng)端設(shè)備的猛漲,現(xiàn)在UI設(shè)計(jì)師們做網(wǎng)站設(shè)計(jì)也要經(jīng)常考慮如何適應(yīng)這些不同分辨率的屏幕了。今天藍(lán)藍(lán)設(shè)計(jì)分享一些關(guān)于自適應(yīng)不同分辨率界面設(shè)計(jì)的幾個(gè)技巧,非常實(shí)用,建議同學(xué)們學(xué)習(xí)一下 :)到的頁面效果是一樣的。

一、PC端

【舉例1】http://up.qq.com/2014/life/  1920*1080下顯示。

adaptive-resolution-interface-how

優(yōu)秀手機(jī)應(yīng)用設(shè)計(jì)需要遵循的8大原則

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

產(chǎn)品設(shè)計(jì)的原則有點(diǎn)太泛哈,今天藍(lán)藍(lán)設(shè)計(jì)這里想結(jié)合自己的工作心得來小結(jié)一下手機(jī)應(yīng)用設(shè)計(jì)8原則:

原則1:用戶界面應(yīng)該是基于用戶的心里模型,而不是基于工程實(shí)現(xiàn)模型

就是把后臺(tái)本來很復(fù)雜的事情通過界面設(shè)計(jì)符合用戶日常生活中常用的瀏覽方式或操作方式。其實(shí)這一點(diǎn)是UI設(shè)計(jì)師把生活中的細(xì)節(jié)和數(shù)據(jù)結(jié)合的凝聚點(diǎn),用戶的心理模型抓的越準(zhǔn),界面就會(huì)越優(yōu)秀。

產(chǎn)品設(shè)計(jì)的八個(gè)原則

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

產(chǎn)品設(shè)計(jì)中,產(chǎn)品界面、使用情景、用戶操作等都會(huì)影響用戶對(duì)產(chǎn)品的體驗(yàn)。因此我們?cè)?a href="/" target="_blank">界面設(shè)計(jì)的過程中應(yīng)遵循一定的原則,避免UI設(shè)計(jì)者片面的根據(jù)自己主觀認(rèn)識(shí)對(duì)產(chǎn)品做出抉擇。藍(lán)藍(lán)設(shè)計(jì)收集到的產(chǎn)品設(shè)計(jì)的八個(gè)原則!

原則1:用戶界面應(yīng)該是基于用戶的心里模型,而不是基于工程實(shí)現(xiàn)模型

就是把后臺(tái)本來很復(fù)雜的事情通過設(shè)計(jì)符合用戶日常生活中常用的瀏覽方式或操作方式。其實(shí)這一點(diǎn)是UI設(shè)計(jì)師把生活中的細(xì)節(jié)和數(shù)據(jù)結(jié)合的凝聚點(diǎn),用戶的心理模型抓的越準(zhǔn),界面就會(huì)越優(yōu)秀。

一個(gè)讓人癡迷網(wǎng)站教給你的四條設(shè)計(jì)原則

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

通過與設(shè)計(jì)者進(jìn)行接觸,藍(lán)藍(lán)設(shè)計(jì)興奮地了解到這項(xiàng)設(shè)計(jì)的 成功之處,其中四個(gè)最基本的成功要素如下:

一、首頁越長越好,絕不允許廣告出現(xiàn)

Brand42首先介紹了傳統(tǒng)的網(wǎng)站設(shè)計(jì)對(duì)顯著位置和不顯著位置的處理,以及很多新聞網(wǎng)站采取的UI設(shè)計(jì)模式。他們介紹說,Mail Online的首頁很長,甚至需要向下滾動(dòng)很長才能看到全部內(nèi)容。這里采取的界面設(shè)計(jì)模式就是越多越好,也就是在首頁放置盡可能多的內(nèi)容。Brand42另一 個(gè)與眾不同的舉措就是在首頁去除所有廣告,而在網(wǎng)站其他頁面上投放加倍的廣告量。

二、就像一個(gè)沒有盡頭的迷宮

Mail Online上每篇報(bào)道的側(cè)邊欄平均有70篇報(bào)道,每個(gè)報(bào)道都配有自己的圖片。當(dāng)讀者閱讀一篇報(bào)道時(shí),側(cè)邊欄的花絮新聞就好像一個(gè)個(gè)錨將讀者吸引到另一篇 報(bào)道。“我們創(chuàng)造了一種獨(dú)具特色的信息結(jié)構(gòu),為讀者提供更多的接入口和信息渠道。”Brand42團(tuán)隊(duì)寫道。側(cè)邊欄的大小及比例通過視線追蹤技術(shù)反復(fù)測 試,使得設(shè)計(jì)團(tuán)隊(duì)能夠依照讀者的平均閱讀速度設(shè)計(jì)。根據(jù)這些數(shù)據(jù), Brand42還創(chuàng)建了追求搜索引擎最優(yōu)化的模板,借助這些模板,編輯們可以方便發(fā)布鏈接,預(yù)防死鏈接的出現(xiàn)。當(dāng)前,Mail Online超過一半的頁面閱讀量并非來自主頁,但是通過網(wǎng)頁間的交叉點(diǎn)擊獲得。

提高網(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)站可用性測試

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

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

如果你之前做過一個(gè)可用性測試,你就會(huì)知道這個(gè)不是看起來那么容易的。雖然這不是火箭科學(xué),但其中也包含一些舉足輕重的復(fù)雜性。在這篇文章里,我會(huì)分享一些我學(xué)到的關(guān)于如何幫助你避免你的可用性測試者在測試時(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í)道路上的小技巧,可以幫助你快速提升可用性測試的技巧并且避免一些陷阱。

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

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

幫你完成創(chuàng)意十足的網(wǎng)頁設(shè)計(jì)的小技巧

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

作為一名UI設(shè)計(jì)師,每年都會(huì)沉浸在一些新的界面設(shè)計(jì)趨勢中興奮不已。接下來,我們將探尋2014年的設(shè)計(jì)趨勢,這絕對(duì)是意義非凡的事情。Web設(shè)計(jì)師必須洞悉所有相關(guān)領(lǐng)域的新趨勢,緊跟時(shí)尚潮流。

這些新趨勢讓設(shè)計(jì)變得妙趣橫生。但是很多專家還會(huì)倡導(dǎo)那些并非最時(shí)髦、最震撼世界的設(shè)計(jì)。當(dāng)然,響應(yīng)式設(shè)計(jì)不僅去年是熱點(diǎn),今年依然還會(huì)被人們重視。同樣,柵格化設(shè)計(jì)作為最基本的設(shè)計(jì),也會(huì)被繼續(xù)延續(xù)下去。

這次,藍(lán)藍(lán)設(shè)計(jì)想探索一下那些逐漸發(fā)展起來的設(shè)計(jì)潮流。也許過去我們只是偶爾嘗試一下這些界面設(shè)計(jì)風(fēng)格,但是今年我們會(huì)真正關(guān)注它們。

更多留白/負(fù)空間

I think I might -

如何提升企業(yè)產(chǎn)品(WEB APP)的用戶體驗(yàn)?

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

一般人對(duì)於企業(yè)產(chǎn)品的預(yù)期,可能僅停留在功能要強(qiáng)大,信息要安全,能夠幫助企業(yè)提高工作效率。但今時(shí)已不同往日,除此以外,人們開始更注重產(chǎn)品的用戶體驗(yàn)。那么,在面對(duì)企業(yè)產(chǎn)品的界面設(shè)計(jì)上,有什么方法可以提升用戶體驗(yàn)呢?接下來,藍(lán)藍(lán)設(shè)計(jì)為大家?guī)硪恍﹪鴥?nèi)外的優(yōu)秀案例以及一些設(shè)計(jì)Web App時(shí)的思考方向。

Web App 設(shè)計(jì)要點(diǎn)

1. 配色

顏色作為UI設(shè)計(jì)師傳達(dá)情感的主要元素之一。一個(gè)明確的品牌顏色,對(duì)信任度,認(rèn)知度都會(huì)有大大的提升。顏色除了能為界面提升美感,也能作為功能上的輔助。在普遍頁面信息量大的企業(yè)產(chǎn)品中,往往一個(gè)有顏色的按鈕就很容易吸引用戶的視覺焦點(diǎn)。

Lovely是Dribbble大神Kerem Suer設(shè)計(jì)的Web App。橙色主,藍(lán)色輔助,淡灰色為底色。這個(gè)配色既色彩鮮明,淡淡的感覺更讓人長時(shí)間使用也不覺累。整體感覺和諧舒服,簡潔耐看。

如何提升企業(yè)產(chǎn)品(Web app)的用戶體驗(yàn)

日歷

鏈接

個(gè)人資料

存檔