首頁(yè)

那些迷人的按鈕設(shè)計(jì)

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

按鈕是網(wǎng)頁(yè)設(shè)計(jì)最重要的組成元素之一,是用戶(hù)和網(wǎng)站進(jìn)行交互的重要橋梁。要設(shè)計(jì)出優(yōu)秀的按鈕設(shè)計(jì)是一件非常困難的事情,因?yàn)樵O(shè)計(jì)師們需要從整體設(shè)計(jì)的角度考慮按鈕設(shè)計(jì)成什么樣的風(fēng)格才能和頁(yè)面的其它部分很好的融合,同時(shí)按鈕的設(shè)計(jì)要操持風(fēng)格的一致性。下面和大家分享網(wǎng)頁(yè)設(shè)計(jì)中15個(gè)迷人的按鈕設(shè)計(jì)案例,一起欣賞。

Radio fm buttons

Iphone Camera App Ui

BT UI Facelift

30有吸引力的搜索框設(shè)計(jì)PSD免費(fèi)下載

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

網(wǎng)頁(yè)設(shè)計(jì)中其實(shí)有個(gè)很重要的設(shè)計(jì)元素常常被大家忽視,呃!它就是搜索框!別看一個(gè)搜索框就是一個(gè)小盒子、一個(gè)小方框!它可有著莫大的用處。它經(jīng)常會(huì)出現(xiàn)在角落或者側(cè)邊欄,它能迅速幫助你的訪問(wèn)者找到資料(靠用戶(hù)自己腦海的習(xí)慣記憶以及和你網(wǎng)站匹配的關(guān)鍵字)。

國(guó)外的網(wǎng)站上,大家都可以看到,這個(gè)小框子的交互和設(shè)計(jì)越來(lái)越別出心裁了。那些交互和細(xì)節(jié)優(yōu)化不僅僅是為了吸引訪客的眼球,更多時(shí)候,是在培養(yǎng)用戶(hù)對(duì)搜索框的使用,上留住訪客,并把你的網(wǎng)站上的每一個(gè)干貨展現(xiàn)給訪客。

那么,今天我們收集了一些漂亮的搜索框設(shè)計(jì),來(lái)細(xì)細(xì)品味一下吧!它們從字體、顏色、陰影、梯度等不同角度做了改變!希望對(duì)您的項(xiàng)目有幫助!

Free Custom Search Boxes (PSD)

Free Custom Search Boxes (PSD)

Source

Search Bar PSD

Search Bar PSD

22個(gè)iPhone食譜APP!餐飲類(lèi)界面設(shè)計(jì)參考

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

各色各樣的餐飲類(lèi)app界面設(shè)計(jì)

Recipes and Grocery List – BigOven

超過(guò)250000種食譜(包括你的和你朋友的),有了它,你的手機(jī)就是一個(gè)可移動(dòng)的食品雜貨鋪和菜單!超過(guò)七億下載,圍起來(lái)可繞地球N圈!

Real Recipes

Real Recipes(iPhone和iPod touch有)為你提示做美食需要的工具、簡(jiǎn)單的食材等。里面有灰常多其他用戶(hù)分享的食譜或者你自己的哆啦a夢(mèng)菜譜口袋、食物計(jì)時(shí)器的鬧鐘等~對(duì)了!還有一個(gè)配方微調(diào)器,就是你可以在短時(shí)間內(nèi)根據(jù)自己的需要調(diào)配完美的食譜,還有詳細(xì)的烹飪教程哦~

交互設(shè)計(jì)師必藏:50個(gè)線(xiàn)框圖套件和在線(xiàn)設(shè)計(jì)工具

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

當(dāng)開(kāi)始進(jìn)行新項(xiàng)目時(shí),一般都會(huì)起步于線(xiàn)框圖。本文收集了大量的線(xiàn)框圖設(shè)計(jì)工具和套件。
交互設(shè)計(jì)師必備哦!

推薦閱讀:
《推薦!交互細(xì)節(jié)中的那些變形金剛》 
《iOS用戶(hù)體驗(yàn)設(shè)計(jì):如何構(gòu)建交互模式》 
《20個(gè)專(zhuān)為無(wú)線(xiàn)端設(shè)計(jì)提供靈感的資源站》

在線(xiàn)設(shè)計(jì)模板

Wirefy

以?xún)?nèi)容優(yōu)先為原則的線(xiàn)框圖在線(xiàn)設(shè)計(jì)工具。允許你運(yùn)用標(biāo)準(zhǔn)元素設(shè)計(jì)出響應(yīng)式線(xiàn)框圖。

Wirefy in 50 Free Wireframe Kits and Web Apps

Lumzy

網(wǎng)頁(yè)設(shè)計(jì)和界面設(shè)計(jì)的原型設(shè)計(jì)工具。

Lumzy in 50 Free Wireframe Kits and Web Apps

Mockup Builder

誰(shuí)說(shuō)設(shè)計(jì)師不會(huì)寫(xiě)代碼?超簡(jiǎn)單Photoshop腳本語(yǔ)言介紹

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

自動(dòng)化對(duì)每個(gè)設(shè)計(jì)師的工作來(lái)說(shuō)是很有用的。它可以在重復(fù)的任務(wù)上節(jié)省寶貴的時(shí)間,還能夠幫我們更快捷、更容易的解決一系列問(wèn)題。

你可以使用photoshop的動(dòng)作來(lái)使工作流程自動(dòng)化,這是很流行的,大多數(shù)人都知道并且已經(jīng)在使用的方法。今天,我們將介紹給你一種高級(jí)的自動(dòng)化技巧:腳本語(yǔ)言。所有的這一切僅僅需要你有一點(diǎn)點(diǎn)關(guān)于JavaScript的基本知識(shí),這對(duì)于我們中的一些網(wǎng)頁(yè)設(shè)計(jì)師往往都是具備的。

我很多年前就知道Photoshop的腳本語(yǔ)言,但是我?guī)讉€(gè)月前才開(kāi)始決定研究它。我忽視了它是因?yàn)槲艺J(rèn)為那是聰明的具有數(shù)學(xué)思維能力的程序員的領(lǐng)域。但是我錯(cuò)了,今天我將要來(lái)告訴大家,盡管它需要一些基本的程序技巧,腳本語(yǔ)言并不是那么難掌握。

但是,一開(kāi)始,我們得回答以下這幾個(gè)明顯的問(wèn)題:

為什么我們需要腳本語(yǔ)言?

為什么我們?cè)赑hotoshop已經(jīng)有了很棒的動(dòng)作之后還要需要學(xué)習(xí)腳本語(yǔ)言?答案是交互性!當(dāng)你使用動(dòng)作時(shí),你不能真正的控制它在不同情況下的表現(xiàn),就像錄像帶不停的一遍又一遍的播放而沒(méi)有任何改變。

00

一個(gè)腳本語(yǔ)言更靈活,它表現(xiàn)形式的改變?nèi)Q于你輸入的參數(shù)或者是應(yīng)用程序的內(nèi)容。聽(tīng)起來(lái)很有用?不是么?

要求

你不需要是一個(gè)會(huì)寫(xiě)腳本語(yǔ)言的高級(jí)的程序員。我就僅僅是一個(gè)平面設(shè)計(jì)師,就像你們大多數(shù)人一樣。但是你需要對(duì)JavaScript至少有一個(gè)基本的了解,以及一些屬性和方法的經(jīng)驗(yàn)去領(lǐng)悟這篇文章的大部分內(nèi)容。

01

如果你對(duì)JavaScript一點(diǎn)都不了解,別害怕!有很多地方你可以了解程序的一些基本知識(shí)。例如:Codecademy,有很棒的完整的交互式課程。

翻滾吧網(wǎng)頁(yè):30個(gè)漂亮視差滾動(dòng)網(wǎng)站賞析

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

大概一年前,我們還在預(yù)測(cè)視差滾動(dòng)能否成為趨勢(shì),現(xiàn)在,視差滾動(dòng)網(wǎng)站已經(jīng)紛繁多樣了,到處都有它的影子,除了新奇的體驗(yàn),網(wǎng)站的縱深感也令人置身其中。在5月份的時(shí)候,優(yōu)設(shè)推薦了一篇視差滾動(dòng)指南,當(dāng)下是讓它真正大展身手的時(shí)候了,對(duì)這個(gè)技術(shù)感興趣的同學(xué)移步:《滾動(dòng)視差設(shè)計(jì)指南》閱讀學(xué)習(xí),同時(shí)誠(chéng)摯推薦這《11個(gè)超炫的視差滾動(dòng)網(wǎng)站》,先感受一下它的魅力何在。

今天推薦的視差滾動(dòng)網(wǎng)站有點(diǎn)特別,是縱橫向兼有的,還包括了flickr、tumblr、bahance等知名網(wǎng)站,希望你能在這里找到靈感,創(chuàng)建一個(gè)自己的視差滾動(dòng)網(wǎng)站 : )

Fendi Life

Fendi Life

Twibfy


Twibfy

The Girl Effect

新鮮熱辣:48枚扁平化圖標(biāo)免費(fèi)下載

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

今天藍(lán)藍(lán)設(shè)計(jì)跟您分享一組免費(fèi)的扁平化圖標(biāo),共有48個(gè),包含了辦公,社交和旅行三種風(fēng)格,由Vecteezy設(shè)計(jì)。老規(guī)矩,讀完readme后使用更放心哦!

微盤(pán)下載

WDD_IconsPreview

原文鏈接:webdesignerdepot

30個(gè)高端大氣的電影宣傳網(wǎng)站欣賞

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

得力于互聯(lián)網(wǎng)的進(jìn)步,電影宣傳網(wǎng)站也成為提升電影格調(diào)的重要方面,還記得《少年派的奇幻漂流》官方網(wǎng)站就令人贊不絕口,甚至有人因此選擇進(jìn)電影院觀看?,F(xiàn)在,有很多設(shè)計(jì)師也在為電影宣傳作努力,在國(guó)內(nèi),這是一個(gè)新興的宣傳方式,設(shè)計(jì)師必須在網(wǎng)站中平衡好視覺(jué)表現(xiàn)和信息傳遞,對(duì)經(jīng)驗(yàn)不足的設(shè)計(jì)師來(lái)說(shuō),可能還沒(méi)有頭緒,那么這里有30個(gè)熱門(mén)電影(饑餓游戲、了不起的蓋茨比、金剛狼2等)的優(yōu)秀宣傳范例,你可以學(xué)習(xí)借鑒一下  : )

說(shuō)到電影,推薦這10部:《設(shè)計(jì)師應(yīng)該看的10部電影》,找電影資源可以到這兒:《90%的人都不知道的電影資源下載站》,大多數(shù)是高清版唷。

The Hunger Games

The Hunger Games

The Heat


The Heat

We’re The Millers

銷(xiāo)售信是網(wǎng)絡(luò)營(yíng)銷(xiāo)文案的利器

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

網(wǎng)絡(luò)營(yíng)銷(xiāo)中撰寫(xiě)營(yíng)銷(xiāo)文案也是非常重要的,網(wǎng)絡(luò)營(yíng)銷(xiāo)不是寫(xiě)一篇軟文發(fā)布到博客、論壇,投稿到門(mén)戶(hù)就OK了。網(wǎng)絡(luò)營(yíng)銷(xiāo)也可以采取直銷(xiāo)的方式,利用郵件營(yíng)銷(xiāo)工具、QQ群郵件給潛在用戶(hù)發(fā)送營(yíng)銷(xiāo)信件。以及我們從B2B平臺(tái)時(shí),有潛在客戶(hù)訪問(wèn)了B2B平臺(tái),我們可以主動(dòng)給該用戶(hù)發(fā)送營(yíng)銷(xiāo)信件,促使用戶(hù)下單(記錄到訪的潛在用戶(hù)需開(kāi)通誠(chéng)信通)。

銷(xiāo)售信寫(xiě)作

銷(xiāo)售信就是直接向潛在用戶(hù)發(fā)送營(yíng)銷(xiāo)信件,直接向潛在用戶(hù)傳達(dá)有什么產(chǎn)品,能幫助到用戶(hù)什么等一種直銷(xiāo)的方式。下面分享網(wǎng)絡(luò)營(yíng)銷(xiāo)文案之銷(xiāo)售信是如何撰寫(xiě)的。

開(kāi)場(chǎng)白
開(kāi)場(chǎng)白需要在簡(jiǎn)短的1-2句話(huà)就調(diào)動(dòng)潛在用戶(hù)的興趣,肯花時(shí)間繼續(xù)閱讀你的營(yíng)銷(xiāo)信件內(nèi)容。也就是說(shuō)在信件正文中第一段不能打動(dòng)用戶(hù),那么你的營(yíng)銷(xiāo)信件就失敗。

表達(dá)意圖
引起用戶(hù)的興趣以后,就需要向用戶(hù)表達(dá)你的意圖是什么,能夠幫助到用戶(hù)什么。為什么可以幫助到用戶(hù),可以舉例說(shuō)明。

解決質(zhì)疑
分析用戶(hù)在使用這個(gè)產(chǎn)品之前會(huì)遇到一些哪些問(wèn)題,針對(duì)于這些問(wèn)題做出詳細(xì)的解答,解決用戶(hù)使用中遇到的疑難問(wèn)題,減少用戶(hù)購(gòu)買(mǎi)前顧慮。

激發(fā)行動(dòng)
用戶(hù)看到這個(gè)地方的時(shí)候,是有意向的用戶(hù)。我們必須將用戶(hù)采取行動(dòng)的步驟,使用不好又該如何操作等處理流程詳細(xì)寫(xiě)清楚。

9個(gè)免費(fèi)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)模板

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

隨著PC端、平板、智能手機(jī)等終端的發(fā)展,設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕分辨率等)更加復(fù)雜,網(wǎng)頁(yè)展示需要考慮到各個(gè)終端的具體差異。

因此,響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)受到了大家的推崇。通過(guò)文中的9個(gè)免費(fèi)的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)模板,希望能幫大家了解這種技術(shù)以及提高工作效率。

1、TXT

這個(gè)模板有一個(gè)主頁(yè)頁(yè)面以及一個(gè)博客頁(yè)面??煞譃橐涣谢騼闪?,你可以根據(jù)自己的意愿進(jìn)行設(shè)定。側(cè)邊欄的個(gè)數(shù)也可以自己自由設(shè)定。(演示 | 下載

1-TXT

 

2、VERTI

一個(gè)基于HTML5和CSS3的模板??梢苑至校瑫r(shí)提供博客和主頁(yè)的模板。(演示 | 下載

Verti

日歷

鏈接

個(gè)人資料

存檔