首頁(yè)

導(dǎo)航設(shè)計(jì)趨勢(shì)!關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

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

不知不覺的,很多網(wǎng)頁(yè)設(shè)計(jì)中采用了圖標(biāo)式導(dǎo)航(Navigation)——一般使用三道杠作為圖標(biāo),用以導(dǎo)航。
這種導(dǎo)航的好處是節(jié)省空間,讓界面更簡(jiǎn)潔。

圖標(biāo)式導(dǎo)航的案例

這是YouTube的圖標(biāo)式導(dǎo)航(移動(dòng)版):

為導(dǎo)航瘦身!關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

這是Squarespace的圖標(biāo)式導(dǎo)航:

為導(dǎo)航瘦身!關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

AWARD的圖標(biāo)式導(dǎo)航不拘一格:

為導(dǎo)航瘦身!關(guān)于圖標(biāo)式導(dǎo)航的改進(jìn)

問題所在

問題在于,點(diǎn)擊圖標(biāo)式導(dǎo)航之后,圖標(biāo)本身沒有任何變化。也就是說:操作缺乏反饋。

 

想讓網(wǎng)站動(dòng)感十足?試試網(wǎng)頁(yè)設(shè)計(jì)中的韻律線條

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

網(wǎng)頁(yè)設(shè)計(jì)中,橫向和豎向的直線非常常見,利用整齊的線條可以打造出有序的視覺路徑以及信息層級(jí)。
當(dāng)然,有些時(shí)候,可以不按理出牌,設(shè)計(jì)一些傾斜的線條,讓你的網(wǎng)站不拘一格,更加與眾不同。

打破傳統(tǒng)布局,創(chuàng)造動(dòng)態(tài)的自由視感,讓構(gòu)成更加復(fù)雜——無(wú)論是利用簡(jiǎn)約的幾何圖形,或是精致的傾斜圖像。
讓你的設(shè)計(jì)更具吸引力,不妨試試斜線。

Paseo Itaigara

形狀感很強(qiáng),整體設(shè)計(jì)的很成功,顯得并不雜亂。菱形無(wú)處不在,拼嵌式的菱形,裝飾性的菱形,按鈕的菱形,很好的主題一致性。

Paseo Itaigara
 

Impero

交互式網(wǎng)站,積極的氛圍、極簡(jiǎn)的色彩。設(shè)計(jì)師利用兩組對(duì)角線(粗細(xì)交織)打造了視覺路徑。

Impero
 

Alpina

強(qiáng)烈推薦!利用視覺滾錯(cuò),加上美輪美奐的照片。來(lái)感受這趟視覺盛典吧。流暢優(yōu)美的照片美景。斜線分割的很巧妙(試想用直線風(fēng)格,效果不會(huì)這么到位)

Alpina
 

android中px、dp和sp,這些單位有什么區(qū)別?

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

相信每個(gè)Android新手都會(huì)遇到這個(gè)問題,希望這篇帖子能讓你不再糾結(jié)。

px:

即像素,1px代表屏幕上一個(gè)物理的像素點(diǎn);

px單位不被建議使用,因?yàn)橥瑯?00px的圖片,在不同手機(jī)上顯示的實(shí)際大小可能不同,如下圖所示。

dp:

這個(gè)是最常用但也最難理解的尺寸單位。它與“像素密度”密切相關(guān),所以首先我們解釋一下什么是像素密度。假設(shè)有一部手機(jī),屏幕的物理尺寸為1.5英寸x2英寸,屏幕分辨率為240x320,則我們可以計(jì)算出在這部手機(jī)的屏幕上,每英寸包含的像素點(diǎn)的數(shù)量為240/1.5=160dpi(橫向)或320/2=160dpi(縱向),160dpi就是這部手機(jī)的像素密度,像素密度的單位dpi是Dots Per Inch的縮寫,即每英寸像素?cái)?shù)量。橫向和縱向的這個(gè)值都是相同的,原因是大部分手機(jī)屏幕使用正方形的像素點(diǎn)。

不同的手機(jī)/平板可能具有不同的像素密度,例如同為4寸手機(jī),有480x320分辨率的也有800x480分辨率的,前者的像素密度就比較低。Android系統(tǒng)定義了四種像素密度:低(120dpi)、中(160dpi)、高(240dpi)和超高(320dpi),它們對(duì)應(yīng)的dp到px的系數(shù)分別為0.75、1、1.5和2,這個(gè)系數(shù)乘以dp長(zhǎng)度就是像素?cái)?shù)。例如界面上有一個(gè)長(zhǎng)度為“100dp”的圖片,那么它在240dpi的手機(jī)上實(shí)際顯示為80x1.5=120px,在320dpi的手機(jī)上實(shí)際顯示為80x2=160px。如果你拿這兩部手機(jī)放在一起對(duì)比,會(huì)發(fā)現(xiàn)這個(gè)圖片的物理尺寸“差不多”,這就是使用dp作為單位的效果,見下圖。

網(wǎng)絡(luò)營(yíng)銷常用方法及術(shù)語(yǔ)

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

最近看到一些剛接觸網(wǎng)絡(luò)營(yíng)銷的朋友,對(duì)于網(wǎng)絡(luò)營(yíng)銷一些常用的方法以及概念性的東西都不是很了解,在交談中說到軟文營(yíng)銷、IM推廣等這些的方法時(shí)他們就不知道是什么意思。在此小篇整理一部分常用的網(wǎng)絡(luò)營(yíng)銷方法和術(shù)語(yǔ),希望對(duì)新人有幫助,高手看到就請(qǐng)繞行。

網(wǎng)絡(luò)營(yíng)銷常用方法

什么是網(wǎng)絡(luò)營(yíng)銷?以國(guó)際互聯(lián)網(wǎng)絡(luò)為基礎(chǔ),利用數(shù)字化的信息和網(wǎng)絡(luò)媒體的交互性來(lái)輔助營(yíng)銷目標(biāo)實(shí)現(xiàn)的一種新型的市場(chǎng)營(yíng)銷方式。簡(jiǎn)單的說,網(wǎng)絡(luò)營(yíng)銷就是以互聯(lián)網(wǎng)為主要手段進(jìn)行的,為達(dá)到一定營(yíng)銷目的的營(yíng)銷活動(dòng)。(摘自百度百科)

搜索引擎優(yōu)化/SEO:利用搜索引擎的搜索規(guī)則來(lái)提高網(wǎng)站關(guān)鍵詞排名的方式。

搜索引擎營(yíng)銷/SEM:利用搜索引擎進(jìn)行營(yíng)銷推廣的,比如SEO、競(jìng)價(jià)推廣等都屬于SEM。

百度網(wǎng)盟推廣:在百度的聯(lián)盟網(wǎng)站上以圖片或文字的形式展現(xiàn)廣告。

軟文營(yíng)銷:以文章為主,專門通過文字去宣傳推廣產(chǎn)品,或以新聞稿來(lái)提升品牌知名度。

數(shù)據(jù)庫(kù)營(yíng)銷:通過收集和積累會(huì)員信息,經(jīng)過分析篩選后有針對(duì)性的使用電子郵件、短信、電話等方式進(jìn)行客戶嘗試挖掘與關(guān)系維護(hù)的營(yíng)銷方式。

郵件營(yíng)銷:在用戶事先許可的前提下,通過電子郵件的方式向目標(biāo)用戶傳遞有價(jià)值信息的一種網(wǎng)絡(luò)營(yíng)銷手段。

IM/即時(shí)通信營(yíng)銷:利用QQ、MSN、YY等即時(shí)工具營(yíng)銷推廣的。

博客營(yíng)銷:利用新浪博客、百度空間等平臺(tái)進(jìn)行推廣的方法。

超贊!設(shè)計(jì)師完全自學(xué)指南

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

超贊!設(shè)計(jì)師完全自學(xué)指南

本文譯自國(guó)外高質(zhì)量問答社區(qū)Quora,原文作者Karen X. Cheng,原是微軟Excel的項(xiàng)目經(jīng)理,后通過自學(xué)轉(zhuǎn)型成為設(shè)計(jì)師。她講述的自學(xué)過程詳實(shí)細(xì)致且條理有序,讀完會(huì)發(fā)現(xiàn)與想象中的大不一樣,對(duì)于想自學(xué)設(shè)計(jì)但迷茫不知道從何入手的童鞋來(lái)說,可以遵循她的步驟去學(xué)習(xí),除了規(guī)劃得當(dāng),還能對(duì)設(shè)計(jì)有一個(gè)全局的了解 : )

做設(shè)計(jì)很慢?先來(lái)改正你使用PS的10個(gè)壞習(xí)慣

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

PS用途廣泛,方法多樣??梢杂貌煌姆椒▉?lái)實(shí)現(xiàn)同一種效果,有時(shí),大家會(huì)被思維局限住,采用”最笨”的辦法完成工作。

本文,便是面對(duì)這一問題,羅列出PS使用中的10條壞習(xí)慣,相信只要克服這10個(gè)壞習(xí)慣,你的工作會(huì)更有效率。

1. 在單一圖層內(nèi)工作

盡管有很多教程講述單圖層打造xxx效果,大家不妨學(xué)習(xí)一下作為練習(xí),掌握一下思路即可。
但是在工作中,這種習(xí)慣可真不好。

單一圖層制圖,缺乏靈活性,無(wú)法針對(duì)性的做出修改。
最安全的做法是:一種效果,一個(gè)新圖層,這樣以后修改起來(lái)會(huì)非常方便。

10 bad habits

無(wú)論如何,在工作中都盡可能的使用多個(gè)圖層,編輯更起來(lái)有效率,組織也更分明。
當(dāng)然也有牛人,完全在一個(gè)圖層實(shí)現(xiàn)很復(fù)雜的。譬如這篇《PS教程!教你用一個(gè)圖層制作相機(jī)圖標(biāo)》。

2. 直接刪除內(nèi)容,而不使用蒙版

這個(gè)非常常見。刪除和擦除圖層內(nèi)容幾乎是不可逆的,是一種破壞性的編輯方式。其實(shí)不如利用PS的像素蒙版、矢量蒙版、剪貼蒙版來(lái)”屏蔽”內(nèi)容。

蒙版僅僅會(huì)臨時(shí)隱藏選中的圖層部分,而不是性的刪除。

10 bad habits

記住咯,盡量使用蒙版,盡量少用刪除。

3. 點(diǎn)來(lái)點(diǎn)去(不會(huì)用快捷鍵)

20120711134546_vaEEM
 

4. 圖像轉(zhuǎn)換時(shí),不利用智能對(duì)象

掌握動(dòng)效設(shè)計(jì)!讓你的設(shè)計(jì)富有未來(lái)科技感(上)

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

掌握動(dòng)效設(shè)計(jì)!讓你的設(shè)計(jì)富有未來(lái)時(shí)尚科技感

為何有的產(chǎn)品、服務(wù)特別受歡迎?

是因?yàn)檫@些產(chǎn)品、服務(wù)在內(nèi)容、外觀、設(shè)計(jì)、可用性、功能等方面具有無(wú)可匹敵的優(yōu)勢(shì)。其實(shí),所有的這些層面都屬于交互設(shè)計(jì)的細(xì)節(jié),其中一個(gè)關(guān)鍵點(diǎn)便是動(dòng)效。

本文將介紹幾種常見的動(dòng)效模式(用GIF圖演示),分析一下為何這些簡(jiǎn)單的設(shè)計(jì)模式在實(shí)際應(yīng)用中能夠奏效。
當(dāng)我們?cè)O(shè)計(jì)數(shù)碼產(chǎn)品時(shí),我們一般用PS或者Sketch這種設(shè)計(jì)軟件來(lái)進(jìn)行設(shè)計(jì)。

了解設(shè)計(jì)的人明白這樣一個(gè)道理:設(shè)計(jì)不光只是視覺表達(dá)。設(shè)計(jì)也不應(yīng)該是靜態(tài)的。喬布斯說過這樣一句話:

設(shè)計(jì)并非外觀怎樣,感覺如何。核心在于,它是怎樣工作的。

影響用戶對(duì)產(chǎn)品的體驗(yàn)與印象的因素有很多,交互在其中扮演著關(guān)鍵性角色。我們不能再簡(jiǎn)單的把用戶界面當(dāng)成一種靜態(tài)界面而設(shè)計(jì)。我們應(yīng)該順應(yīng)互聯(lián)網(wǎng)動(dòng)態(tài)的本質(zhì),打造更加動(dòng)態(tài)的圖形用戶界面。
好了,廢話不多說,我們來(lái)看看,什么叫做更智能的交互、更精致的動(dòng)效??纯催@些設(shè)計(jì)模式是怎樣提高用戶體驗(yàn)的。

動(dòng)效滾動(dòng)

超鏈接是互聯(lián)網(wǎng)的雙刃劍,當(dāng)你點(diǎn)擊鏈接時(shí),你可以在互聯(lián)網(wǎng)中任意遨游,隨心所欲。

可是過度自由好嗎?不見得,比方說你在瀏覽一款精美的產(chǎn)品頁(yè)面,然后你點(diǎn)擊了一下頁(yè)面中的鏈接,突然導(dǎo)入了一款令人毛骨悚然的木偶商店頁(yè)面。這就是超鏈接的弊端,有時(shí)候的頁(yè)面轉(zhuǎn)換太突然,缺少過度,讓用戶一時(shí)不能接受。

我們可以看看書籍的用戶體驗(yàn):故事發(fā)展一般是線性的,每一章都和上文有所聯(lián)系。想要閱讀第二章,必須先閱讀第一章,以便大致了解書中的環(huán)境與人物關(guān)系。如果你”跳章”閱讀,不可避免的會(huì)錯(cuò)過一些關(guān)鍵劇情,因此無(wú)法理解有些內(nèi)容。

在網(wǎng)頁(yè)設(shè)計(jì)中,同理,尤其是那種內(nèi)容比較大,頁(yè)面比較長(zhǎng)得網(wǎng)站,這種情況經(jīng)常無(wú)意識(shí)的發(fā)生:用戶會(huì)錯(cuò)過之前的某些關(guān)鍵內(nèi)容,而且又缺少提示,因此很難理解當(dāng)前內(nèi)容,通過添加動(dòng)效滾動(dòng),可以修正這一問題。

告別平庸!新穎的表單設(shè)計(jì)賞析

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

一般來(lái)說,網(wǎng)頁(yè)設(shè)計(jì)師都極少關(guān)注表單設(shè)計(jì),這使得大多數(shù)表單看起來(lái)都差不多,普通至極,毫無(wú)特色。本文中的這些案例化腐朽為神奇,將枯燥的表單頁(yè)面設(shè)計(jì)的多姿多彩。一起來(lái)看一下吧。

還記得那篇備受好評(píng)的《向左走、向右走?表單元素設(shè)計(jì)大揭密》嗎?讓很多網(wǎng)頁(yè)設(shè)計(jì)師第一次認(rèn)識(shí)到表單設(shè)計(jì)的一些魔鬼細(xì)節(jié)。那么今天再來(lái)看看實(shí)際中的一些新穎案例吧。本文收集了一大批優(yōu)秀的聯(lián)系表單設(shè)計(jì),希望對(duì)你有所啟發(fā)。

Contact Page from Café Evoke

Contact Page from Café Evoke

Bold Contact Page from Mixd

Bold Contact Page from Mixd

Signup Form from Involvio Orientation

Signup Form from Involvio Orientation

Sliding Contact Page from Whoa Nelly Catering

Sliding Contact Page from Whoa Nelly Catering

Submission Form from Dear Mum

Submission Form from Dear Mum

Clean Contact Page from Mud

Clean Contact Page from Mud

Minimal Contact Form from Eduardo Nunes

Minimal Contact Form from Eduardo Nunes

Dark Minimal Contact Form from group94

Dark Minimal Contact Form from group94

Clean Contact Form from Littlelines

Clean Contact Form from Littlelines

Contact Form from Mostly Serious

Contact Form from Mostly Serious

橫向的進(jìn)擊!網(wǎng)頁(yè)也可以橫著看

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

老實(shí)說,你瀏覽過幾個(gè)水平滑動(dòng)的網(wǎng)站?如果讓我來(lái)回答這個(gè)問題,我得說我沒瀏覽過幾個(gè)。而且水平滾動(dòng)網(wǎng)站似乎在網(wǎng)頁(yè)設(shè)計(jì)中并不流行?;蛘邥?huì)被一些專家說這是反人類的瀏覽體驗(yàn)。
好吧,對(duì)無(wú)創(chuàng)意毋寧死的設(shè)計(jì)師來(lái)說。咱們就是愛打破常規(guī),弄點(diǎn)新穎奇特的設(shè)計(jì)出來(lái)。

不過不得不說,水平滾動(dòng)網(wǎng)頁(yè)設(shè)計(jì)有點(diǎn)命途多舛,剛出來(lái)的時(shí)候短暫流行過一陣子,但后來(lái)漸漸消隱于大眾視線,
有人說這種風(fēng)格的網(wǎng)頁(yè),瀏覽起來(lái)非常不順暢,有人說他們就沒見過認(rèn)真設(shè)計(jì)的水平滾動(dòng)網(wǎng)站。但是本文將介紹幾例優(yōu)秀案例。

隨著設(shè)計(jì)技藝和風(fēng)格理解的提高,優(yōu)秀水平滾動(dòng)設(shè)計(jì)漸漸多了起來(lái)。
當(dāng)然,還有重要的一點(diǎn)需要考慮,不是每一種內(nèi)容都適合用水平滾動(dòng)的布局方式呈現(xiàn)。大多數(shù)采用水平滾動(dòng)方式設(shè)計(jì)的網(wǎng)站,內(nèi)容一般都是圖片和簡(jiǎn)潔的文字資料。

相較于垂直頁(yè)面設(shè)計(jì),圖片展示是水平滾動(dòng)設(shè)計(jì)唯一具有壓倒性優(yōu)勢(shì)的地方。在眾多的垂直布局網(wǎng)站中,如果出現(xiàn)一款水平滾動(dòng)設(shè)計(jì)的圖片網(wǎng)站,就會(huì)有鶴立雞群的效果。

Samuel Esteves

Samuel Esteves是采用水平滾動(dòng)設(shè)計(jì)的圖庫(kù)類網(wǎng)站范例。該網(wǎng)站中的很多圖庫(kù)都很有趣。

samuel esteves, great website design inspiration

Mariana Onate

正如我之前說的那樣,水平滾動(dòng)網(wǎng)頁(yè)設(shè)計(jì)極度適合圖片展示,看看Mariana Onate。采用了多種技術(shù),以及簡(jiǎn)單點(diǎn)擊的滾動(dòng)操作給圖像瀏覽帶來(lái)高雅體驗(yàn)。

horizontal scrolling web design

Lucuma

此作品集與眾不同,通過水平滾動(dòng)設(shè)計(jì),提供了更多作品的細(xì)節(jié),而作品本身也非常適合采用水平滾動(dòng)

nice web layout, websites layout examples

Asiance

Asiance是亞洲的數(shù)字服務(wù)商。通過水平滾動(dòng),用戶可以獲取大量有用的信息。

horizontal web design

Alex Flueras

對(duì)于Alex Flueras我無(wú)話可說。這是個(gè)非常棒的水品滾動(dòng)圖庫(kù)網(wǎng)站。

horizontal web design

C.L. Holloway

這是一位藝術(shù)家的網(wǎng)站,色彩非常的平滑,沒有突兀感。通過水平滾動(dòng),讓人有一種漫步于畫廊的感覺,創(chuàng)意和實(shí)際的完美結(jié)合。

horizontal webdesign, parallax scrolling

日歷

鏈接

個(gè)人資料

存檔