首頁(yè)

App引導(dǎo)用戶使用的八個(gè)技巧

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

 

開(kāi)發(fā)者要在智能手機(jī)有限的空間發(fā)揮無(wú)限的創(chuàng)意和價(jià)值,這的確不是一件容易的事。為了使用戶更有效地使用app,開(kāi)發(fā)者的app必須要做到精簡(jiǎn)和直觀。另外,開(kāi)發(fā)者更要巧妙地引導(dǎo)用戶去發(fā)現(xiàn)和使用app的功能,本文為開(kāi)發(fā)者提供了一些小技巧。

創(chuàng)建安裝向?qū)?/strong>

 


安裝技巧如果你的app對(duì)用戶輸入依賴(lài)程度比較高,一個(gè)不錯(cuò)的辦法是設(shè)置安裝向?qū)?,在用戶第一次使用的時(shí)候,就可以收集不少有用的信息。創(chuàng)建一個(gè)自定義安裝向?qū)В憧梢园堰@個(gè)單調(diào)乏味的過(guò)程變得有趣和充滿創(chuàng)造力。

提供app攻略





提升網(wǎng)站檔次的時(shí)尚 jQuery 圖片滾動(dòng)插件

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

這篇文章向大家推薦8款時(shí)尚的 jQuery  圖片滾動(dòng)插件。jQuery 是最流行和使用最廣泛的 JavaScript  框架,它可以讓幫助你在你的項(xiàng)目中加入一些很炫的圖片滾動(dòng)效果。希望這些插件對(duì)你有所幫助,能夠幫助你節(jié)省時(shí)間和精力。

Smooth Div Scroll

效果非常平滑的鼠標(biāo)懸浮圖片切換效果,提供了非常詳細(xì)的使用幫助文檔和示例。

jqueryimage

Elastic Image Slideshow

最后這款也是帶縮略圖功能 jQuery 幻燈片插件,效果很炫。

Responsive jQuery Slider Plugins

移動(dòng)用戶體驗(yàn)要素

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

移動(dòng)用戶數(shù)和手機(jī)使用量都在逐年增加。隨著越來(lái)越多的用戶使用手機(jī)完成任務(wù)(參見(jiàn)The Future of Mobile ),如何改進(jìn)移動(dòng)用戶體驗(yàn)的各個(gè)影響要素,便成為值得關(guān)注的焦點(diǎn)。

  移動(dòng)用戶體驗(yàn)是指用戶使用低端功能機(jī)到高清平板電腦間的任意設(shè)備中,與移動(dòng)產(chǎn)品(瀏覽器或App )互動(dòng)之前、之時(shí)及之后的認(rèn)知和感受。

  為了創(chuàng)建令移動(dòng)用戶愉悅的體驗(yàn),我們必須重新思考那些長(zhǎng)期以來(lái)被認(rèn)為理所當(dāng)然的桌面端設(shè)計(jì)。移動(dòng)用戶體驗(yàn)的復(fù)雜性源于移動(dòng)設(shè)備的特性,主要包括:小屏幕,設(shè)備特性的巨大差異,電量和網(wǎng)絡(luò)的限制,難以定位又永遠(yuǎn)變化的移動(dòng)使用場(chǎng)景。

通過(guò)解析移動(dòng)用戶體驗(yàn)的重要組成部分,我們可以得到一個(gè)概念框架來(lái)構(gòu)建和評(píng)估好的移動(dòng)體驗(yàn)。這些部分在文章《以用戶為中心的移動(dòng)設(shè)計(jì)方法》
中有所提及 
(參見(jiàn)
user-centered approach to designing for mobile
)。下圖組成要素決定了移動(dòng)用戶體驗(yàn),包括:功能、情境、用戶輸入、內(nèi)容和營(yíng)銷(xiāo)等等。

1_elements-of-mobile-ux

   以上這些要素的重要性會(huì)根據(jù)設(shè)備類(lèi)型不同(如非智能手機(jī)、智能手機(jī)、平板電腦)和界面顯示不同(如 App Web )發(fā)生變化。本文將簡(jiǎn)要介紹這些要素,并詳細(xì)說(shuō)明相關(guān)的重要準(zhǔn)則。

2012年度最佳網(wǎng)頁(yè)設(shè)計(jì)作品出爐

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

這篇文章向大家展示2012年里在紋理應(yīng)用,圖像選擇,文字排版和導(dǎo)航設(shè)計(jì)等各個(gè)方面都特別優(yōu)秀的網(wǎng)站作品。你需要花時(shí)間慢慢瀏覽這些優(yōu)秀的設(shè)計(jì),看看2012年里這些讓人難忘的創(chuàng)意網(wǎng)站作品能帶給你哪些啟發(fā)。

Yardsale

Textures and Patterns in Web Design

D10studio

21 Examples of Inspiring Typography in Web Design

40套很漂亮的紋理背景圖片

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

這篇文章向大家分享40套很漂亮的紋理背景圖片素材,如果你正在尋找高質(zhì)量的紋理背景,那么這篇文章你一定要記得收藏。紋理背景圖片對(duì)設(shè)計(jì)師來(lái)說(shuō)非常有用,個(gè)性的紋理背景可以讓你的網(wǎng)站看起來(lái)更加優(yōu)雅時(shí)髦,脫穎而出。

  紋理背景圖片通常都是高質(zhì)量的圖片,一般有木質(zhì)紋理、布質(zhì)紋理、金屬紋理和石質(zhì)紋理等形式

紋理背景圖片通常都是高質(zhì)量的圖片,一般有木質(zhì)紋理、布質(zhì)紋理、金屬紋理和石質(zhì)紋理等形式。

Texture Backgrounds

Texture Backgrounds

一組精美的折疊效果名片設(shè)計(jì)

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

這篇文章收集了一批非常精美的,充滿創(chuàng)造性的立體折疊效果的名片設(shè)計(jì)作品。這些設(shè)計(jì)新穎的企業(yè)名片能夠給客戶留下深刻的印象,對(duì)于推介公司的產(chǎn)品和業(yè)務(wù)有非常大的幫助,一起欣賞。

Ayako Okada

 

Luciano Balzano

從iOS到Metro - 重新設(shè)計(jì)應(yīng)用的交互模式

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

在本篇案例當(dāng)中,我們將幫助各位使用Metro風(fēng)格的設(shè)計(jì)原則對(duì)原有的iOS應(yīng)用設(shè)計(jì)方案進(jìn)行重新構(gòu)思,大家會(huì)了解到怎樣將iPad當(dāng)中一些常見(jiàn)的界面元素及體驗(yàn)?zāi)J睫D(zhuǎn)換成為Metro風(fēng)格,以打造全新的Windows 8應(yīng)用。我們將對(duì)同一款應(yīng)用在兩個(gè)平臺(tái)中的不同設(shè)計(jì)方式進(jìn)行對(duì)比,幫助各位了解怎樣將你的應(yīng)用與Windows 8以及Metro設(shè)計(jì)原則進(jìn)行完美的融合。

我們將要研究的是一款相片日志應(yīng)用,用戶可以在線查看和管理他們的照片或視頻。下圖是這款應(yīng)用的Metro版本:

點(diǎn)擊查看原圖  

這款應(yīng)用最初是為iPad設(shè)計(jì)的,如下圖所示。

點(diǎn)擊查看原圖  

從設(shè)計(jì)及體驗(yàn)?zāi)J降慕嵌瘸霭l(fā),該應(yīng)用可以大致被解構(gòu)為六個(gè)方面:

  1. 布局和導(dǎo)航
  2. 命令與行為
  3. 契約(Contract):搜索、分享及其他
  4. 觸控與手勢(shì)
  5. 屏幕定向與視圖模式
  6. 消息通知

為了觸屏移動(dòng)設(shè)備而設(shè)計(jì)

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

于移動(dòng)設(shè)備的操作系統(tǒng)及應(yīng)用來(lái)說(shuō),判斷其用戶界面設(shè)計(jì)方案是否優(yōu)秀的一個(gè)重要衡量標(biāo)準(zhǔn),就是看它對(duì)于手指觸控操作的友好程度。相比于桌面計(jì)算設(shè)備及相關(guān)的軟件環(huán)境,觸屏移動(dòng)設(shè)備所具有的交互特性幾乎將用戶體驗(yàn)設(shè)計(jì)師們帶入了工業(yè)設(shè)計(jì)的領(lǐng)域;設(shè)計(jì)方案更多是在體現(xiàn)著人機(jī)工學(xué)方面的原理,而不再是僅僅用來(lái)規(guī)劃內(nèi)容與功能的視覺(jué)呈現(xiàn)方式。

拇指熱區(qū)與底部原則

首先,我們需要了解人們通常會(huì)以怎樣的方式將手指??吭谠O(shè)備上。拿手機(jī)來(lái)說(shuō),普通青年們多數(shù)會(huì)使用拇指來(lái)進(jìn)行觸控操作,所以觸屏手機(jī)的界面交互方案基本是圍繞著拇指來(lái)進(jìn)行打造的。

拇指是很不可思議的,據(jù)說(shuō)它是將我們與動(dòng)物區(qū)分開(kāi)來(lái)的重要標(biāo)志之一...拇指的功能具有相當(dāng)?shù)膹椥?,同時(shí)也受到一定的局限。對(duì)于常規(guī)的觸屏手機(jī)來(lái)說(shuō),我們可以使用拇指掃過(guò)屏幕當(dāng)中的大部分區(qū)域,但其中大約只有三分之一屬于真正有效的觸控區(qū)域。所以在設(shè)計(jì)當(dāng)中,要盡量將最重要的界面交互元素放置在這個(gè)范圍當(dāng)中。在右手持機(jī)的狀況下,有效觸控區(qū)域位于屏幕的左下方:

點(diǎn)擊查看原圖

這也正是移動(dòng)系統(tǒng)或應(yīng)用中一些重要的工具欄或?qū)Ш浇Y(jié)構(gòu)通常被放置在界面底部的原因。與此相反的是,在傳統(tǒng)的桌面設(shè)備系統(tǒng)環(huán)境中,導(dǎo)航菜單一類(lèi)的界面元素通常被放在界面頂部,無(wú)論是本地軟件還是網(wǎng)頁(yè)基本都是如此。對(duì)于我們有限的拇指作用范圍來(lái)說(shuō),這種傳統(tǒng)布局方式顯然不能在移動(dòng)設(shè)備的用戶界面當(dāng)中很好的適用。

相比之下,左下角還是右下角的問(wèn)題略顯次要。我們?cè)趯?shí)際當(dāng)中經(jīng)常會(huì)更改左右手持機(jī)方式,想想看是不是這樣,譬如對(duì)于右撇子來(lái)說(shuō),當(dāng)他們正在寫(xiě)字或是需要同時(shí)使用鼠標(biāo)操作桌面設(shè)備時(shí),通常會(huì)將手機(jī)交于左手操作;而左撇子們則正相反。不過(guò)在多數(shù)時(shí)間內(nèi),使用右手持機(jī)的用戶還是要相對(duì)較多一些。

底部原則可以幫助我們對(duì)界面當(dāng)中的可觸控元素進(jìn)行更好的組織。最常用的功能按鍵應(yīng)該被放在拇指最容易觸摸到的熱點(diǎn)區(qū)域當(dāng)中,而其它相對(duì)次要或是比較敏感的控制元素則應(yīng)該盡量避開(kāi)這個(gè)區(qū)域。以iOS中的“編輯”按鈕來(lái)說(shuō),它通常被置于界面右上方,這個(gè)位置即可以保證它清晰可見(jiàn),同時(shí)又不會(huì)被很容易的觸碰到,以免發(fā)生誤操作。

點(diǎn)擊查看原圖

10套精美的免費(fèi)網(wǎng)站后臺(tái)管理系統(tǒng)模板

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

大部分的 Web 應(yīng)用和動(dòng)態(tài)網(wǎng)站都需要一個(gè)后臺(tái)管理系統(tǒng)用于管理前臺(tái)界面的信息展示以及用戶信息。管理后臺(tái)的設(shè)計(jì)雖然不像前臺(tái)界面那樣要求設(shè)計(jì)精美,但是也需要有清晰的管理模塊劃分,這樣使用后臺(tái)管理系統(tǒng)的人員才能夠方便的進(jìn)行操作和管理。下面收集了十款非常漂亮的網(wǎng)站后臺(tái)管理系統(tǒng)模板分享給大家,歡迎免費(fèi)下載使用。

Admin Panel Template

這個(gè)后臺(tái)管理模板的導(dǎo)航設(shè)計(jì)非常漂亮,頭部還有未讀的短消息和提醒的條數(shù)顯示。

Admin Panel Template

在線演示     PSD下載     HTML&CSS下載

 

Charisma Admin Template

Charisma 是基于 Twitter Bootstrap 制作的響應(yīng)式網(wǎng)站管理后臺(tái)模板,包含9套漂亮的主題。

Charisma Admin Template

在線演示     免費(fèi)下載

日歷

鏈接

個(gè)人資料

存檔