目前分類:設計 (23)

瀏覽方式: 標題列表 簡短摘要

摘要:測試發現中國和西方用戶在瀏覽複雜網頁時都遇到了相同的困難,不同的是,中國用戶更少抱怨網頁的複雜性,且似乎更喜歡相當高密度的內容。

老外經常說中文網站設計得太過複雜擁擠。但是,他們看不懂中文,也不怎麼使用中文網站,那麼這樣的評價往往來自於他們直觀的感覺,而不是真正的使用體驗,這種評價是不客觀的。

為了探究中文網站是否真的格外複雜,以及中國用戶是否真的具備處理複雜信息的東方神秘力量,我們決定用一種更合適的可用性研究方法:針對目標用戶的實證檢驗(Empirical Testing)。我們的研究還另有一個小動機:在當今這個響應式設計的世界,低信息密度及簡約頁面的設計趨勢已經很好地運用到小屏幕上(大屏幕稍次),我們很好奇這樣的趨勢是否已蔓延到中國,這種輕簡風的大趨勢又會與傳統設計中可能存在的複雜風產生怎樣的化學反應。

 

根據實驗設計,我們分別測試了本土中國用戶和移居中國的外國用戶。外國用戶測試中國網站的英文版,而中國用戶測試原版中文網站。網站的中英文兩個版本控制了同等程度的複雜度。總共12位用戶參與了這次測試,每組6人。

整個過程以“ 發聲思考(Think aloud) ”的方式進行,用戶需要在8個網頁(共14個)中完成2項任務,並對網頁設計的複雜程度從簡單到復雜進行評級。中國用戶用普通話闡述他們的想法,外國用戶用英語。所有用戶的測試都在PC上進行。

uxrenyi-146-01

中新網(China News)是我們測試的網站之一,它那擠到爆的首頁設計正是被老外們吐槽又擁擠又復雜的典型例子。

 

uxrenyi-146-02

Teambition是我們測試的另一個網站;它具有響應式設計,信息排布稀疏,極簡主義設計風格(包括扁平的按鈕,菜單及圖標)

 

 

沒錯,中文網站通常是複雜的

即使謹慎地下結論,測試表明,中文網站設計複雜,而中國用戶通常更能容忍這種複雜。這樣的一個設計風格被認為是“普遍的”“正常的”,甚至“一直以來都是這樣的”。

一項評估顯示信息高密度樣式特別流行於門戶網站和新聞網站。

外國用戶也認為複雜的設計在中文網站中很常見,他們覺得看到復雜風格的網站已經成了家常便飯。部分外國用戶稱讚這種擁擠的設計形式,認為這是一種把信息坦誠而直接呈現出來的好方法。另一部分外國用戶卻認為這樣的中文網站超級難用。在可用性測試中,老外們基本上都認為簡約風的網站比複雜的體驗要好。

另一方面,參與測試的中國用戶對簡約風的網站接受度要較差一點。就像一個參與者說的“純粹從設計的角度,像圖標、圖片、版式,這個網站是很棒,符合人們(至少是年輕人)的喜好。它簡單、清爽,也沒有廣告和無用的信息。

但是問題是,當沒有任何多餘信息時,它有用的信息也同樣被減少了,我沒看到任何有助於我了解這些鏈接的信息內容。所有這些功能的介紹都只是冷冰冰的文字,沒有真實的實質內容。”(所有中國用戶的引述都已被此文作者之一翻譯成英文

 

不該這樣,中文網站不該生而復雜

就算中國土著們已經對複雜網站習以為常,也覺得還能應付,事實是他們依然會遇到許多可用性及交互上的問題。他們經常談到一些細節上使用很不爽的過於復雜的設計。

舉個例子,一個中國用戶談到中新網(見上圖),“當我閱讀新聞時,我就讀了網頁上居於頂部特別顯眼的新聞,絕不會再滾下去看其他的新聞了。有那麼多新聞發生,我卻只關注到了頭條,最多10條,特別是那些帶圖帶視頻的。”在許多複雜的網頁上,廣告被穿插在文章中,使得更加複雜更加難用並進一步激怒了用戶。引用一個中國用戶說的“所有新聞網站都這樣,這個'中新網'更過分,頂部都有廣告!太討厭了。”

在測試工商銀行網站時,我們從一個中國用戶那得到以下的反饋:“我認為整個網站設計得不是很乾淨。這些信息設計沒有與普通用戶相關聯。我從來用不到這上面的大部分信息,看上去真的太多了。”一個僑民用戶說“我覺得像銀行網站,界面對普通用戶並不友好,他們只是符合了銀行內部人士的需求。”另一個老外說“這些頁面就是想搞暈你,這樣一來才能從你那裡賺錢。”

uxrenyi-146-03

中國工商銀行是世界上最大的銀行,中國研究參與者們發現這網站實在是太複雜了。

 

可用性上有問題=爛網站(適用於任何語言)

太過複雜的設計經常使得用戶找不到內容。舉個例子,很多用戶沒法在一個”JiaThis”的彈窗內選擇通過郵件分享文章,一方面是因為彈窗是通過“+”圖標訪問的(+很少用來表示分享功能),另一方面,彈窗內塞滿了太多功能。

uxrenyi-146-04

我們的測試用戶在那麼擁擠的彈窗上很難一下看到郵件分享按鈕選項。

 

一個中國用戶說“哪有郵件分享的按鈕,我不知道啊……這有那麼多選項。”對於這一點,如出一轍的是,一個外國用戶也說“我猜這是一個中國的網站,因為他們有那麼多選項可以選擇。Yeah,我發現了郵件按鈕,但我認為它該居於首位。”

在這次測試中還復寫了很多我們曾經發現的問題,即在對西方用戶的外國網站測試中發現過的問題。例如,中國用戶在測試清華大學網站的圖片輪播頁上說,“這頁有很多清華大學不同的圖片,我之前不知道有一組圖片可以動,以為只有一張圖書館的圖呢。”

另一個例子,聯合國網站違背了通用導航的規範:我們讓用戶找關於秘書長的內容,但到了相關信息的這一頁,用戶們卻發現他們找不到返回主頁的方式了。(我們測試了中文版和英文版的聯合國網站,發現同樣的缺陷)

 

以下是一些在我們測試的知名網站上令中國用戶頭疼的可用性問題:

  • “相關文章”鏈接導向的並不是讓用戶感覺與當前文章有關的文章
  • 搜索框沒放在頁面的頂部
  • 搜索框被一個圖標取代了——這個問題是我們早就知道的對網站可用性很不利的一點
  • 用戶滾動網頁時,導航位置變了(居於廣為人知的信息構架錯誤榜單前十)
  • 半隱藏式導航只有在靠近以後才完全顯示出來
  • 買完東西就完事了的錯覺使得用戶忽略了折疊在底部的運輸選項
  • 不夠充分的以用戶為中心的內容並沒有擊中用戶最關心的事。舉個栗子,一個中國用戶談到清華大學網站:“我要是要瀏覽這個網頁,我肯定是看一些有關於入學申請或其他有用的信息。可是,這上面有太多廣告和關於學校多麼牛的陳詞濫調。很難找到一些實際有用的細節信息。這個網站是給觀光客看的,不是給學生看的。”(在我們做了對57個非中國大學網站調查後聽到用戶的一個真實共鳴)
  • 不規範的用戶界面元素會被忽略,就像下圖所示的截屏

 

uxrenyi-146-05

在守望先鋒遊戲網站上,導航沒設在標準導航區域,而是在頁面右邊緣垂直排了一組小按鈕。測試的5人全都沒用這個導航。

 

令人欣慰的是,從多方面來看,我們這次關於中國的研究結果,重現了西方用戶20年間的測試中記錄的許多可用性問題。

  1. 首先,它表明中國人也是凡人而不是能違背用戶界面心理學原則的超人,更不是比世界上其他的用戶更易精通設計的聖人。
  2. 其次,我們的研究表明,針對中國受眾的網頁設計師們最好更關注可用性,並降低其設計的複雜性。
    是的,中國用戶更習慣於復雜的網頁,也不怎麼抱怨,但是我們測試的參與者在越複雜的頁面上花費時間越長,而且在瀏覽時呈現出更多的猶豫和焦慮。
  3. 最後,在中國,簡約的響應式的設計風格正呈現上升趨勢,且必定要挑戰傳統的高複雜性的設計期待。
    頁面上信息密度過低並不能帶來好的可用性,而且中國用戶甚至可能比西方用戶,更容易反感過於稀疏的設計。因此,更簡約的設計,但不是過分簡單或極簡主義的簡約設計,將會造福於中國用戶,並可能增加企業的收入。

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

HTML,CSS,font-family:中文字體的英文名稱(宋體微軟雅黑)
宋體SimSun

黑體SimHei 

微軟雅黑 Microsoft YaHei

微軟正黑體Microsoft JhengHei

新宋體NSimSun

新細明體PMingLiU

細明體MingLiU

標楷體DFKai-SB

仿宋FangSong

楷體KaiTi仿宋_GB2312FangSong_GB2312

楷體_GB2312KaiTi_GB2312

宋體:SimSun css中中文字體(font-family)的英文名稱

Mac OS的一些:
華文細黑:STHeiti Light [STXihei] 
華文黑體:STHeiti 
華文楷體:STKaiti 
華文宋體:STSong 
華文仿宋:STFangsong 
儷黑Pro:LiHei Pro Medium 
儷宋Pro:LiSong Pro Light 
標楷體:BiauKai 
蘋果儷中黑:Apple LiGothic Medium 
蘋果儷細宋:Apple LiSung Light 
Windows的一些:
新細明體:PMingLiU 
細明體:MingLiU 
標楷體:DFKai-SB 
黑體:SimHei 
新宋體:NSimSun 
仿宋:FangSong 
楷體:KaiTi 
仿宋_GB2312:FangSong_GB2312 
楷體_GB2312:KaiTi_GB2312 
微軟正黑體:Microsoft JhengHei 

微軟雅黑體:Microsoft YaHei 裝Office會生出來的一些: 隸書:LiSu 幼圓: YouYuan 

華文細黑:STXihei 

華文楷體:STKaiti 

華文宋體:STSong 

華文中宋:STZhongsong 

華文仿宋:STFangsong 

方正舒體:FZShuTi 

方正姚體:FZYaoti 

華文彩雲:STCaiyun

華文琥珀:STHupo 

華文隸書:STLiti 

華文行楷:STXingkai 

華文新魏:STXinwei Windows中的中文字。 

在默認情況下,Windows XP SP3宋體-PUA

Windows Vista/7/2008宋體/新宋體、黑體、楷體、仿宋、微軟雅黑、SimSun- ExtB

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

图片素材

免費
Unsplash — www.unsplash.com
Picjumbo — www.picjumbo.com
Gratisography — www.gratisography.com
Superfamous — www.superfamous.com
Little Visuals — www.littlevisuals.co
Split Shire — www.splitshire.com
Pixabay — www.pixabay.com
I’m Free — www.imcreator.com/free
New Old Stock — www.nos.twnsnd.co
Function Free Photos — http://wefunction.com/category/free-photos/
Paul Jarvis Free Photos — http://pjrvs.com/a/photos
Zoomy Images — http://zoomyimages.com/

收費
Dollar Photo Club — http://www.dollarphotoclub.com
Compfight — www.compfight.com
Stocksy — www.stocksy.com
Placeit Product Shots — www.placeit.net
iStockphoto — http://istockphoto.com
offset — http://www.offset.com
Corbis — http://www.corbisimages.com
Facebox — http://facebox.io

排版設計

Okay Type — www.okaytype.com
Typekit — www.typekit.com
My Fonts — www.myfonts.com
Fonts — www.fonts.com
Font Squirrel — www.fontsquirrel.com
Da Font — www.dafont.com
Google Fonts — www.google.com/fonts
1001 Free Fonts — www.1001freefonts.com
Lost Type Co-op — www.losttype.com
Ico Moon — www.icomoon.io
Font-To-Width — http://font-to-width.com/

視覺設計工具

InVision — www.invisionapp.com
Mockupr — www.mockupr.com
Flinto — www.flinto.com
Flinto Icon Strike! — www.flinto.com/strike
Webflow — www.webflow.com
Mockuuups — www.mockuuups.com
Red Pen — https://redpen.io
PSD Covers — http://www.psdcovers.com/

框線圖

Moqups — www.moqups.com
Wireframe.cc — ww.wireframe.cc
Mockflow — www.mockflow.com
Mockingbird — www.gomockingbird.com
Flair Builder — http://flairbuilder.co
Balsamiq — http://balsamiq.com/products/mockups/
Axure — http://www.axure.com/
Justinmind — http://www.justinmind.com/
UX Pin — http://uxpin.com

原型設計

InVision — http://www.invisionapp.com
Mixture — www.mixture.io
Flinto — www.flinto.com
Gridset — www.gridsetapp.com
Marvel — https://marvelapp.com
Webflow — https://webflow.com
Red Pen — https://redpen.io
Proto — http://proto.io
Iconii — http://iconii.com
Macaw — http://macaw.co/
Froont — http://froont.com

響應式設計

Responsive.is — http://responsive.is/typecast.com
Gridpak — www.gridpak.com
Responsive Nav — www.responsive-nav.com
Off Screen Navigation — http://tympanus.net/Development/MultiLevelPushMenu/
Responsive Web Design Test — www.designmodo.com/responsive-test/
Media Queries — www.mediaqueri.es
Foundation by Zurb — www.foundation.zurb.com
Jetstrap — www.jetstrap.com
Webflow — www.webflow.com
Gridset — www.gridsetapp.com
BrowserStack — www.browserstack.com
Sassaparilla — http://sass.fffunction.co
Sidebar Transitions — http://tympanus.net/Development/SidebarTransitions/
Dimensions (Chrome Extension) — https://chrome.google.com/webstore/detail/dimensions/hdmihohhdcbejdkidbfijmfehjbnmifk?hl=en
Responsive Grid System — http://responsive.gs/
Responsi — http://respon.si

色彩

0 to 255 — www.0to255.com
Colour Lovers — www.colourlovers.com
Brand Colors — www.brandcolors.net
Adobe Kuler Color Wheel — https://kuler.adobe.com/create/color-wheel/
Color Scheme Designer — www.colorschemedesigner.com
Hex to RGB Converter — http://hex.colorrrs.com
Coleure — http://coleure.com/
Colllor — http://colllor.com/
Palette for Chrome — https://chrome.google.com/webstore/detail/palette-for-chrome/oolpphfmdmjbojolagcbgdemojhcnlod

CSS

Animate.css — www.daneden.me/animate
CSS3 Animation Cheat Sheat — http://www.justinaguilar.com/animations/index.html
Can I Use? — www.caniuse.com
Animation Fill Code — www.animationfillcode.com
Pure — http://purecss.io/
The Magic of CSS — http://adamschwartz.co/magic-of-css/

HTML 5

HTML5 Please — www.html5please.com
Can I Use? — www.caniuse.com

JavaScript/jQuery

Unheap — http://www.unheap.com
Touchy Js — http://touchyjs.org/
FitText — http://fittextjs.com
Touche.js — http://benhowdle.im/touche/
Cortado.js — http://benhowdle.im/cortado/
FlickFeed — http://benhowdle.im/flickfeed/
Heisenburg.js — http://heisenbergjs.github.io/heisenberg/
Pickadate.js — http://amsul.ca/pickadate.js/
Lettering.js — http://letteringjs.com/
Freetile — http://yconst.com/web/freetile/
Backstretch — http://srobbin.com/jquery-plugins/backstretch/
Hook — http://usehook.com
Echo JS — http://www.echojs.com/
Up to date — http://uptodate.frontendrescue.org/
JS Fiddle — http://jsfiddle.net/

免費PS素材

PSDS.co — www.psds.co
Fribbble — www.fribbble.com
Premium Pixels — www.premiumpixels.com
Teehan+Lax iOS 7 Gui PSD (iPhone)— www.teehanlax.com/tools/iphone
Teehan+Lax iOS 7 Gui PSD (iPad) — www.teehanlax.com/tools/ipad/
iPhone Mockuuups — www.mockuuups.com
Freebiesbug — http://freebiesbug.com/
Marvel — https://marvelapp.com/resources/
Ui Space — http://uispace.net
DB Freebies — http://dbfreebies.co
365 PSD — http://365psd.com/
Pixel Buddha — http://pixelbuddha.net/
Pixels Daily — http://pixelsdaily.com/

圖標設計

Other Icons — www.othericons.com
Batch — www.adamwhitcroft.com/batch/
Icon Sweets — www.iconsweets.com
Ico Moon — www.icomoon.io
Flat Icon — http://www.flaticon.com
The Noun Project — http://thenounproject.com
Perfect Icons — http://perfecticons.com/
Iconfinder — www.iconfinder.com

壓縮圖片

Tiny Png — www.tinypng.com
JPEGmini — www.jpegmini.com
ImageOptim — www.imageoptim.com

PS工具和插件

Mac Rabbit Slicy — www.macrabbit.com/slicy/
Renamy — www.renamy.com
Blendme.in — www.blendme.in

靈感

Siteinspire — www.siteinspire.com
Land Book — www.land-book.com
Awwwards — www.awwwards.com
The Best Designs — www.thebestdesigns.com
Dribbble — www.dribbble.com
Behance — www.behance.com
Niice — http://niice.co
One Page Love — http://onepagelove.com/

工作平台

Crew — www.pickcrew.com
Juiiicy — www.juiiicy.com
Dribbble Jobs — www.dribbble.com/jobs
Authentic Jobs — www.authenticjobs.com
Workfu — www.workfu.com
Onsite — www.onsite.io

在線學習平台

Steer — www.steer.me
Lynda — www.lynda.com
Codeacademy —www.codecademy.com
Code School — www.codeschool.com
Udacity — www.udacity.com
Code.org — http://code.org/
WebPlatform — http://www.webplatform.org/

設計社區

Designer News — https://news.layervault.com/
Designers Talk — http://www.designerstalk.com/forums/
Quora — https://www.quora.com/
Stack Exchange — http://stackexchange.com/sites
Reddit /Design — http://www.reddit.com/r/Design/
Reddit /Web Design — http://www.reddit.com/r/web_design

寫作平台

Medium — www.medium.com
Svbtle — https://svbtle.com/
Ghost — https://ghost.org/
WordPress — www.wordpress.com / www.wordpress.org
Squarespace — http://squarespace.com
Roon — https://roon.io/

便捷工具

Copy Paste Character — www.copypastecharacter.com
JustDelete.me — www.justdelete.me
What’s my UDID? — www.whatsmyudid.com
Shapecatcher — www.shapecatcher.com
UI Names — http://uinames.com/
UI Faces — http://uifaces.com/
UI Blurbs — http://uiblurbs.com
Density Converter — http://density.brdrck.me
LayerVault — https://layervault.com
Nice Entity — http://nice-entity.com
PlaceIMG — http://placeimg.com/
lorempixel — http://lorempixel.com/
Facebox — http://facebox.io

圖書

Grid Systems in Graphic Design — http://amzn.to/1aNQC8B
HTML & CSS: Design and Build Web Sites — http://amzn.to/1biuvJi
How to be a Graphic Designer, Without Losing Your Soul — http://amzn.to/1eooTjo
The Shape of Design — http://www.buyolympia.com/q/Item=frank-chimero-the-shape-of-design
A Practical Guide to Designing for the Web — http://www.fivesimplesteps.com/products/a-practical-guide-to-designing-for-the-web
Hardboiled Web Design — https://shop.smashingmagazine.com/hardboiled-web-design.html
Designing for the web (Free) — http://designingfortheweb.co.uk/
Smashing Book #4 — https://shop.smashingmagazine.com/smashing-book-4-new-perspectives-on-web-design.html
The Geometry of Type — http://amzn.to/1ekRiSV
Insites: The Book — http://viewportindustries.com/insites-the-book
Don’t Make Me Think — http://amzn.to/1ekRul6
Above the Fold — http://amzn.to/1cLAIdv
Design is a Job — www.abookapart.com/products/design-is-a-job
Thinking with Type, Second Revised and Expanded Edition: A Critical Guide for Designers, Writers, Editors, and Students — http://amzn.to/1ixVKOc
The Visual Display of Quantitative Information — http://amzn.to/1n8vezb

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

韓文、中文和日文文字外形相似,所以國內的網站除了中國風之外,還能借鑑日韓的風格。韓國網站我想大家也見過不少,他們特別喜歡使用Flash來製作,效果超弦(Why? 因為他們網速比我們快7、8倍…)。而日本網站呢,他們用Flash?響應式?還是扁平化設計呢?

接下來@設計達人網 小編為大家精選一組優秀的日本酷站,在收集日本網站的同時也讓小編驚嘆了,日本的網站設計以及使用的Web技術相當不錯,本以為日本的工業設計好,想不到網站設計水平也相當高。

日本網頁設計:很多已經使用新的網頁設計趨勢,如視差滾動、全屏背景、全屏視頻等等,很少使用Flash,特別注重網頁的配色、版式和交互設計,整體網頁佈局新穎,不少網站使用了可愛的漫畫式手繪風格。

Web前端技術方面:已有部分網站開始HTML5、CSS3技術,雖然使用這些新技術,但在IE8兼容方面還是做得很好的,有的不兼容IE8的會做一個瀏覽器兼容提示。

下面一起來欣賞這些優秀的日本網頁設計作品,希望對你的新項目帶來靈感吧,Enjoy!

Hanamichiya

很漂亮的水彩背景,網站的右側菜單效果很贊!看來很多日本設計師的手繪功底都很厲害啊!各位小夥伴,你懂手繪了嗎?

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Dascorp

該網頁使用了響應式設計,基本兼容IE8,當用戶向下滾動網頁設計,內容會漸變顯示出來。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Mitsugashi

設計簡約的糕點食品網站,但這種簡約在國內很容易飛機稿。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Regettacanoe

明快的藍色與黃色的時尚配色,很符合網站主題。左上角菜單藍色的曲線好像和鞋跟一樣,這是令人印象深刻的設計。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Ca4la

很獨特的小型電子商務網站,瀏覽時注意看那些動畫,好玩之餘更有意義。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Hotakubo-Seikei

一所醫院網站,網站整體頁面設計得很精美,就連圖片質量也很注重,這醫院看起來很高檔次啊。

醫院類網站在國內肯定不會這麼做了,都會做成門戶式,做內容,搞SEO,什麼內容都有…… 不過大家可以參考他的設計,相當不錯。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Hishiken

漂亮的圖像+視差特效,很美的網頁啊。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Asitanosikaku

網站前面那個有點手繪風格的橢圓是用html5 Canvas做出來的,鼠標經過帶有一些彈性效果,其次這個橢圓還能根據瀏覽器分辨率來自適應大小哦。

點擊每個連接的內容都是AJAX加載,總體的交互設計體驗真的很不錯。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Kataomoi3

網站使用文字飄落來做視差效果,很漂亮,做個人博客類的網站推薦。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Kiyomizudera

用全屏視頻作為背景的網頁,視頻的景色超贊,文字使用垂直排版,垂直字體是日本常用的一種排版方式,其實古時中文也是垂直的,從首頁點擊進去後,默認是全屏幻燈片展示,整體感覺很有Feel,有木有?

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

學習院女子大學

首頁Flash banner做得不錯呢。整體色調很符合網站的主題,即使是粉色也不會流俗。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Q-Co

不得不說,裡面的創意很贊,進入首頁後,用筆畫一個圓圈,然後圓圈裡會有動態圖像顯示。其次網站視差技術做得很好,

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Tokyonohatakekara

甜品店的網站,手繪元素比較多,也很可愛。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

K-Associates

一家室內設計公司的網站,他們的作品展示方便很特別,使用了垂直色塊,然後從右向左的水平慢移。

點擊作品的圖像展示以全屏方式展示。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Japan

只想說,這網站不是FLash做的。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Kamomepark

首頁使用全屏幻燈展示,菜單和新聞用方塊固定在邊欄,方塊設計簡約,所以不影響整體外觀。

產品展示頁是使用不間斷水平浮動圖片方式,功能很強大,支持鼠標中鍵來控制滾動,用戶點小圖後全屏顯示大圖,還有一點細節做得不錯,就是你瀏覽大圖時,本來水平滾動的圖片將會停止滾動,這樣用戶關閉大圖後也能看到剛才點擊的位置。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

C-Gp

強烈建議大家點擊一下TEAM鏈接看看。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Gooddesigncompany

日本一家設計機構網站,首頁直接顯示作品,但展示的方式很有趣,不知道是怎麼實現的。

該網頁的佈局能自適應寬度,普屏和寬屏瀏覽效果很佳。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Kotobanoie

全屏視屏背景網頁,你要一邊看視頻一邊瀏覽這個網站上的內容。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Wamokei

一家模型製作公司的官方網站,單頁面網站設計,首頁的第一屏使用了全屏照片作為背景,另外當用戶點擊其它頁面時,其實也是全屏的哦!

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

100tokyo

這個100tokyo使用了扁平化設計,也支持響應式,整個網站配色以淺棕色為主。使用了簡單的CSS3樣式,比如鼠標經過漸變效果。

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

Santepc

全屏Flash網站,看起來有沒有」潮」的感覺?

来一场华丽的冒险!创意与技术齐飞的日本网页设计欣赏,互联网的一些事

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

Photoshop升級到cs版本以後,原來7.0時,可以直接在windows系統窗口中預覽psd文件的功能就沒有了。

解決方法:原因是生成縮略圖的psicon.dll不再包括在CS版的安裝程序中,如果是從老版本升級到CS的話就可以。

把psicon.dll拷貝到:C:\Program Files\Common Files\Adobe\Shell文件夾下,就可以預覽了。

在這提供psicon.dll文件的下載

點我下載

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

最近幾年,針對多設備進行設計已成為Web設計領域最令人興奮的開發工作。以前主要關注網站是否可以在兩個不同瀏覽器上運行正常,現在則轉移到它是否可以在具有完全不同特性的多種設備上正常運行,這些設備具有不同的屏幕尺寸、不同的性能、不同的使用環境及不同的界面。

 

觸摸優先設計

具有"統一元素"特性的網站已經將觸摸式界面應有到了最近的桌面網站設計中。

在佔用面積上,手指要大於鼠標指針,所以手指需要更大的觸控區域。為了確保可用性,互動元素需要更大。當互動元素的面積增大後,其他元素也需要相應的增大以保持平衡。這就需要通過margin和padding兩個屬性來設定。

新版Gmail設計有大量的空白區域,對按鈕設定了額外的Padding。雖然它只是針對桌面的設計,但也可以很好地兼容觸摸設備。

iPad在觸摸界面和不同大小桌面屏幕之間搭建了橋樑。而iPad的流行加速了觸摸屏在桌面界面設計中的影響。如果你觀察一些剛經過重新設計的著名產品,如Gmail,Twitter,你就會發現Web設計已有明顯的不同。他們看上去更"豐滿"。有更多的空白區域,按鈕有更多的Padding,上面的元素整體看來增大了不少。當然,其他的因素也在發揮作用,比如桌面屏幕尺寸的穩定增長。

當為鼠標提供了"過多"的空間,而對於手指來說,空間剛剛好時,我們的設計就算完成了。我們允許與某體驗的標準有稍稍的偏差,以獲得對所有可能體驗的更好支持。

有一點值得提出,對觸摸友好的UI對於使用桌面鼠標的用戶來說,更易用。容易觸摸操控的按鈕,更容易被點擊。

微軟Metro風格的設計受到了觸摸優先思想的影響

響應式設計,達到統一設計的目的

雖然關於響應式設計的很多討論都是關於響應式設計技術的,但響應能力本身並不是最終目標。它是達到目的的一種手段。設計具有響應能力,是為了達到其他的一些目的。可能為了支持不同的內容,服務於低寬帶中傳輸的圖片,在更小的屏幕中更好地展示佈局。也可能為了在大範圍不同的設備上提供統一的體驗。

搭載響應式設計的潮流,可以到達統一的用戶體驗設計的目的地。Boston Globe網站在這方面做得很棒。

Boston Globe出色地將響應式設計應用到了大型網站中

響應式設計策略可以使一個簡單的設計適應用戶閱讀Boston Globe所使用的任何設備(即便是Apple Newton)。這不僅僅是前端工程師的功勞。配合使用Media Queries和JavaScript兩種技術,也可以達成這種效果。

移動優先設計

之前的案例主要針對圖片設計,但"統一元素"的概念應該應用於產品設計、用戶體驗、信息架構中——幾乎設計的其他任何領域。讓我們看看產品設計及移動優先的設計思想。

從手持裝置移動設備角度出發開始設計過程,構建可以滿足移動環境中各種限制的產品,你需要專注於產品的最重要元素上。正如Luke Wroblewski所表述的: 

"當團隊進行移動手持裝置優先設計時,最終是要打造一種體驗,該體驗主要專注於用戶希望完成的最主要任務,沒有任何的曲線與界面碎片。這對於用戶體驗和商務都是有利的。"

Twitter最近的一次改版驗證了這些原則。

新版Twitter採用了簡約化設計,在各種設備上具有一致的體驗。

Twitter改版的目標之一是為了向用戶提供一致體驗,無論在電腦上還是在各種手持裝置移動設備上。獲得一致的視覺和感受體驗對於UI來說是一個挑戰,但整個產品在不同設備上獲得一致的體驗則是更大的挑戰。針對這兩方面的挑戰,移動優先設計可以幫我們實現。

在Twitter的改版中,我發現了一件很有趣的事,即移動體驗對整個產品設計的影響。例如,除了"Tweet"按鈕外,所有的動作按鈕均佈置在"Home"、"Connect"、"Discover"、"Me"四個標籤下面。該簡單化的設計在小屏幕設備中運行完美,四個項目​​也能在標籤欄中融洽"相處"。

在桌面網站中,雖然新增了一些其他特性,但建立在移動版本基礎上的簡潔仍需存在。雖然桌面版本上有大量的空間來完成更多的複雜設計,但設計仍要有所約束、有更好的適應性,以確保達到一致的多設備體驗。

小心有"狼"

在巴赫之前的調音系統中,被同時演奏出的不和諧間隔的音符會產生側耳、咆哮般的聲音。音樂家把這種聲音稱為"狼嚎"。

在界面設計中,當針對某一種體驗設計的視覺或互動元素轉移到另一種體驗環境中就會失效,那麼我們稱這種元素為"狼"。回想一下,你曾經費力地用手指點擊一個很小的針對鼠標設計的鏈接,還有痛苦地在手持裝置移動設備、觸摸設備上閱讀著字體很小的文本,而這些設備上的界面元素只依靠鼠標點擊。這些都是UI上的"狼"。

這些文章的鏈接只依靠鼠標完成互動。當在觸摸式的手持裝置移動設備中瀏覽時,它們的可能性就會減低。

New York Magazine提供了一個好用、美觀的下拉式選單,但你只能使用鼠標來點擊它。

注意事項

響應式設計,提供針對設備的特定體驗,確實可以解決很多此類問題。如果我們能調整一個按鈕的大小以適應某一特定的環境,那麼我們就不必接受這種笨重、顧及全局的方法。但是我們需要支持的設備數量只會增加,客製化設計所有可能的方案即將變得不合理。

即便我們可以在執行層面訂製完美的設計,但仍有必要在概念層面考慮一下可調節的、可統一瀏覽的設計。

下面列出了幾個注意事項

● 響應式地思考

即便你並不正在實現一個完全響應式設計,簡單地用響應式的方式去思考將會對實現可用的、統一的設計大有幫助。

● 觸摸優先式思考

針對手指點觸設計的按鈕,同樣可以用鼠標來點擊。但針對鼠標設計的按鈕,用手指觸控時就會顯得太小了。觸控優先式設計,可以確保你的網站和應用很好的遷移到其他環境中。

● 統一式思考

正如"早測試,經常測試"一樣。在設計過程中,應該儘早並經常思考你的設計如何成功運行在不同的設備之上。

● 移動優先式思考

移動優先設計,可以讓你專注於那些關乎你成功的事情上。保持對最重要特性的關注,在不同設備上實現統一的體驗就變得更加容易了。

● 小心

互動行為不會在各種界面中得到統一支持。通過鼠標來完成的功能在觸摸設備上可能會有問題。通過觸摸來完成的操作可能用鼠標就無法執行。但這並不意味者我們不能使用它們,只是我們應該清楚它們的使用限制。

 

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

Adobe發布了一款名為Edge Reflow的工具,可以用於響應式設計的可視化創作,提高通過HTML5和CSS3技術在不同設備上所進行的網頁開發效率。

目前Reflow提供了免費的下載,而通過註冊成為Adobe Creative Cloud付費會員可以繼續獲得免費的軟件更新。

Reflow的主要功能是通過在設計的過程中將所有的“斷點”“模組”進行可視化的展示,讓開發者可以在工具中一邊進行間距的調試,一邊測試展示效果。

這些功能在佈局、樣式的調試效率上都有很大的改進。

edge_reflow_hero

開發者通過Reflow的幫助,可以更加輕鬆的在同一個界面中完成多項開發工作,調試各種尺寸的設備上所展示的網頁。

在佈局上使用直觀的用戶界面,可以在設計的過程中針對不同的屏幕尺寸設置斷點。

 

edge_reflow_feature_layout

 

edge_reflow_feature_style

在樣式的設計上,Reflow提供的調試功能,能準確的實現你的設計,用更直觀的界面幫助開發人員進行細節變換。這些功能可以讓多種設備上設計流程變得更加便捷,協助開發人員改進效率。

Adobe一直在設計工具上提供多種便捷的功能,這次在Adobe Edge Reflow上也保留了這樣的特性。而至於RF在響應式設計的領域裡能佔據怎樣的地位,還要我們拭目以待。

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

介面設計

 

User Interface簡稱 UI,亦稱用戶介面,定義廣泛,包含了人機互動圖形使用者介面,凡參與人類與機械的訊息交流的領域都存在著使用者介面。UI設計的核心價值是Usability易用性。構成Usability易用性的元素為

  • 可學習性 (Learnability)
  • 效率 (Efficiency)
  • 可記憶性(Memorability
  • 很少出現嚴重錯誤 (Errors)
  • 滿意度 (Satisfaction)

 

人機介面 MMI: Man–Machine Interface或人機互動介面

Human–Computer InterfaceHuman–Machine Interface)大量運用在工業與商業上,簡單的區分為「輸入」(Input)與「輸出」(Output)兩種,輸入指的是由人來進行機械或設備的操作,如把手、開關、門、指令 (命令)的下達或保養維護等,而輸出指的是由機械或設備發出來的通知,如故障、警告、操作說明提示等,好的人機介面會幫助使用者更簡單、更正確、更迅速的操作機械,也能使機械發揮最大的效能並延長使用壽命,而目前市面上所指的人機介面則多是狹義的指在軟體人性化的操作介面上。

 

圖形使用者介面GRAPHICAL USER INTERFACE,簡稱GUI

 

 

以「各種美觀、而不單調的視覺訊息」提示使用者「狀態的改變」,勢必得比簡單的文字訊息呈現,花上更多的計算能力,計算「要改變顯示器哪些光點,變成哪些顏色」。

 

結論:介面+互動+視覺;利用程式觸發器來快速達到執行的目的。使用者面對所需使用的資訊產品介面,僅需當下進行「辨識」工作,一看便知,而不需要耗費腦力去「回想」這工作有什麼意義?如何進行?

 

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

國外網站配色參考  

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

Art by Empk Atelier

Link to Website – www.empk.net
Link to Barbara’s Behance profile – Barbara Allain on Behance
Link to Diego’s Behance profile – Diego Bellorin on Behance

Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier
Art by Empk Atelier

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

Ariel Di Lisio's Designs & Typography

Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography
Ariel Di Lisio's Designs & Typography



































































文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

大設計師 Steve Goodin 的平面設計作品

 manner 3D +C4D+PS

3D 字海報設計

04 (2)

05 (2)

06 (1)

08 (1)

09 (1)

10 (1)  

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

FeelMe Crew Business Card

creative business cards

 

 

creative business cards

 

 

creative business cards

 

Casabella Furniture: Sofa by Amanda Casabella

creative business cards

creative business cards

 

Creative business card by REACTOR

creative business cards

creative business cards

 

Lose Your Belly by Leo Burnett

creative business cards

 

Lens Shape Business Card by Nathan Jones

creative business cards

 

NationBuilder Pop-up Business Card by Lori Boos

creative business cards

 

ACME estudio Business Card

creative business cards

 

Thielen Designs Business Card

creative business cards

 

Heinz Wild Business Card

creative business cards

 

Business card

creative business cards

 

Business Cards for Sage Media

creative business cards

 

Business cards for Pulcemercato by cut&paste

creative business cards

 

Base One Business Cards by dan.osman

creative business cards

 

NetPlus by alekchmura.com

creative business cards

creative business cards

 

Michael But Business Card by Michael But

creative business cards

creative business cards

creative business cards

 

Business card for Daniel V J Sweeney Limited Edition Photography by Total Brand

creative business cards

 

FirstView Business Card by FirstView

creative business cards

 

Easel Business Card by egil.paulsen

creative business cards

 

Rhino Studio Business Card by Contreforme

creative business cards

creative business cards

 

MIXTAPE GENERATION Business Card by kozzy

creative business cards

creative business cards

 

Sattom Media Business Card by tom

creative business cards

 

Personal Business Card by cmcerniglia

creative business cards

 

Keo Business Card by ORGANI STUDIOS

creative business cards

creative business cards

 

Basta Business Cards by Kristina Miletieva

creative business cards

creative business cards

 

Business Card by Light PLague

creative business cards

 

Business Card by julius.ponozka

creative business cards

 

Colokial Business Cards by amarillomagenta

creative business cards

 

DKNG Business Cards

creative business cards

 

Yoga One Business Card by Marked for Trade

creative business cards

 

Business Card by Junge Schachtel

creative business cards

 

Laser Printing: Google Business Card

creative business cards

 

Wet Business Card by BBDO

creative business cards

 

Business Card by Ethan Martin

creative business cards

creative business cards

 

Meat Card

creative business cards

 

Chris Fisher Business Card by TBWA\RAAD

creative business cards

creative business cards

 

Luice Design Business Card

creative business cards

 

Akufen Business Card

creative business cards

 

Tactix Business Cards by DenaDesigns

creative business cards

 

SupaFly.Designs Business Card

creative business cards

creative business cards

creative business cards

 

Max Steiner – Everyday Hero

creative business cards

 

Sergio Delgado Business Card

creative business cards




文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

08品牌形象設計-酒類香檳

 

 

 



02 (1)

03 (1)

04 (1)

05 (1)

06

07

 

09

10

general

Nanocrystalline_Diamond_Coatings_1226942829  

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

 

20個蘋果風格的教程

joomla佈景主題

 

 

蘋果標籤導航 - Photoshop教程

蘋果標籤導航

創建一個蘋果風格的選單和jQuery - Photoshop HTML / CSS,jQuery的教程

創建一個蘋果風格的菜單和改善它通過jQuery

蘋果導航欄 - Photoshop教程

蘋果導航欄

在Photoshop創建蘋果的選單 - Photoshop教程

從頭開始創建蘋果電腦公司在Photoshop導航欄

製作蘋果按鈕 - Photoshop教程

製作蘋果按鈕

MAC按鈕 - Photoshop教程

MAC按鈕教程

MAC OSX的按鈕 - Photoshop教程

MAC OSX的按鈕

Mac風格網頁按鈕 - Photoshop教程

Mac風格網頁按鈕

iPhone的樣式圖標 - Photoshop教程

iPhone風格圖標教程

創建一個自定義的Mac OSX風格的環形裝訂通訊簿圖標 - Photoshop教程

創建自定義的Mac OSX風格的環形裝訂通訊簿圖標

iTune的圖標 -插畫教程

iTune的圖標

Mac操作系統燒傷的圖標 - Photoshop教程

的Mac OS燒傷圖標

MAC OS X的Mail圖標樣式 - Photoshop教程

Mac OS X的郵件圖標樣式

設計的Mac OS X Leopard的文件夾 - Photoshop教程

設計的Mac OS X Leopard的文件夾

iTunes圖標設計 - Photoshop教程

在iPhone的iTunes圖標

如何繪製一個Mac網路地球圖標 - Photoshop教程

如何繪製一個Mac互聯網地球圖標

如何在Illustrator中創建的iTunes圖標 -插畫教程

如何在Illustrator中創建的iTunes圖標

創建蘋果滑鼠 - Photoshop教程

創建的蘋果鼠標

創建一個iPod Shuffle - Photoshop教程

創建的iPod Shuffle

蘋果iMac - Photoshop教程

蘋果iMac教程

設計一個閃亮的真實感Apple Remote遙控器 - Photoshop教程

設計了一個閃亮的真實感Apple Remote遙控器

創建一個從無到有的矢量風格的MacBook - Photoshop教程

從頭開始創建一個矢量風格的MacBook

現實的iPod - Photoshop教程

現實的iPod

iPod的耳塞Adobe Illustrator的教程 -插畫教程

iPod的耳塞Adobe Illustrator的教程

蘋果iPhone手機設計 - Photoshop教程

蘋果iPhone手機設計

 

Mac風格模板 [免費CSS模板]


免費網頁模板



文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

 Grunge style

來自80年代後期的音樂風格-最初是1900年年中的音樂專輯和海報的處理,常用於音樂界。國外仍有許多設計師和設計工作室持續發展grung風格設計。
這種風格的特點是由某些色調的顏色,外觀骯髒的背景,紙張撕裂的邊緣元素,破碎/損壞的圖標,塗鴉般的和許多其他與效果圖形元素用於排版裡。也大量使用舊照片復古元素。

以下是各種 Grunge Style 的風格收集

Chris Sharp

 

 

Ready Photo Site

 

Matt Mullenweg

 

 

Sprocket House

 

 

EdgePoint Church

 

 

(Ctrl+N)

 

 

James Lai Creative

 

 

Huxley Prairie Festival

 

 

Textilla Artes Têxteis

 

 

Kevin Lucius

 

 

MacTarnahan's Brewing Company

 

 

Loukotka Design

 

 

Rocket Club

 

FortySeven Media

 

 

Pain is Good

 

 

Clickfarm Interactive

 

 

Energy Cell

 

 

Bush Theatre

 

 

Brunet-Garcia Advertising Inc.

 

 

Jeff Sarmiento

 

 

AD Servizi Impresa

 

 

Freelenz

 

 

Canyon Creek Church

 

 

b*unique recordings

 

 

RIDERS NETWORK e.V.

 

 

Art of Dying

 

 

Christopher Scott Hernandez

 

 

Scratch22

 

 

iSpoil

 

 

Remedy Drive

 

 

Radio - The New York Moon

 

Blogsolid

 

 

evo design

 

 

Bristol Archive Records




文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

flash酷站欣賞

01a

02

02a

03

03a

04

04a

05

05a  

原站網址:http://www.immersive-garden.com/

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

1. First Button: White-Gray

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.button1{
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;

-moz-box-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.3);
box-shadow:0 1px 0 rgba(0,0,0,0.3);

background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);

background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));

color:#4A4A4A;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 15px;
text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);
}

.button1:hover{
background: -moz-linear-gradient(19% 75% 90deg,#D6D6D6, #FAFAFA);
background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#D6D6D6));
}
css3 互動式按鈕語法  

2. Second Button: Blue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.button2{
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;

-moz-box-shadow:2px 2px 0 #C6E5E7;
-webkit-box-shadow:2px 2px 0 #C6E5E7;
box-shadow:2px 2px 0 #C6E5E7;

background: -moz-linear-gradient(19% 75% 90deg, #CAEAFF, #e2f2ff);

background: -webkit-gradient(linear, left top, left bottom, from(#e2f2ff), to(#CAEAFF));

color:#637897;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
padding:10px 25px;
text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);
text-transform:uppercase;
border: 1px solid #C6E5E7;
}

.button2:hover{
background: -moz-linear-gradient(19% 75% 90deg,#C6E5FA, #e2f2ff);
background: -webkit-gradient(linear, left top, left bottom, from(#e2f2ff), to(#C6E5FA));
}

3. Third Button: Blue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.button3{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

-moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);

background: -moz-linear-gradient(19% 65% 90deg,#0087B4, #0099CC, #0099CC 51%);

background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0087B4));

color:#f0f0f0;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
padding:10px 25px;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #267ed4;
}

.button3:hover{
background: -moz-linear-gradient(19% 65% 90deg,#0082AD, #0099CC, #0099CC 51%);
background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0082AD));
color: #f1f1f1;
}

4. Fourth Button: Orange

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.button4{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);
-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);
box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);

background: -moz-linear-gradient(19% 75% 90deg, #FF4D01, #FF8924);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF8924), to(#FF4D01));

color:#fff;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:15px;
font-weight:bold;
padding:8px 20px;
}

.button4:hover{
background: -moz-linear-gradient(19% 75% 90deg, #EB4701, #F58423);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F58423), to(#EB4701));
}

5. Fifth Button: Blue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.button5{
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;

-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);
-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);
box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);

background: -moz-linear-gradient(19% 75% 90deg, #4183D4, #55a9e8);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#55a9e8), to(#4183D4));

color:#f0f0f0;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-weight:bold;
padding:5px 16px;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);
}

.button5:hover{
background: -moz-linear-gradient(19% 75% 90deg, #4183D4, #55a9e8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#378dcd), to(#20559A));
-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.6) inset;
-webkit-box-shadow: none;
box-shadow:0 0 8px rgba(0, 0, 0, 0.6) inset;
}

6. Sixth Button: Pink

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.button6{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

-moz-box-shadow:0 2px 0 #b7245a;
-webkit-box-shadow:0 2px 0 #b7245a;
box-shadow:0 2px 0 #b7245a;

background: -moz-linear-gradient(0% 50% 90deg,#E22E6D, #EB3373, #EB3373 15%);

background: -webkit-gradient(linear, 0% 0%, 0% 56%, from(#EB3373), to(#E22E6D), color-stop(.9,#EB3373));

color:#fff;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:7px 20px;
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
}

.button6:hover{
background: -moz-linear-gradient(0% 50% 90deg,#D62C67, #DE306D, #EB3373 15%);
background: -webkit-gradient(linear, 0% 0%, 0% 56%, from(#DE306D), to(#D62C67), color-stop(.9,#EB3373));
}

7. Seventh Color: White-Cream

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.button7{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

background: -moz-linear-gradient(19% 75% 90deg,#F0DEB8, #FDF0D1, #fff 100%);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F0DEB8), color-stop(.3,#FDF0D1));

color:#836d4d;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 70px;
border: 1px solid #d4c198;
}

.button7:hover{
background: -moz-linear-gradient(19% 75% 90deg,#EBD9B4, #F2E6C8, #F5F5F5 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#EBD9B4), color-stop(.3,#F2E6C8));
}

8. Eighth Button: Green

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.button8{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

-moz-box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);
-webkit-box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);
box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);

background: -moz-linear-gradient(19% 100% 90deg,#025C25, #038836, #5D9B75 100%);

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5D9B75), to(#025C25), color-stop(.2,#038836));

color:#E6F2EB;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 40px;
text-shadow:-1px -1px 1px #4F5B54;
}

.button8:hover{
background: -moz-linear-gradient(19% 100% 90deg,#025221, #037D32, #599470 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#599470), to(#025221), color-stop(.2,#037D32));
}

9. Ninth Button: Green

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.button9{
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;

background: -moz-linear-gradient(19% 50% 90deg,#55792F, #608736, #608736 0%);

background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#608736), to(#55792F), color-stop(0,#608736));

color:#f5f5f5;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 40px;
text-shadow:0 1px 0 #000000;
border-bottom:1px solid rgba(255, 255, 255, 0.7);
border-top:1px solid rgba(255, 255, 255, 0.7);
}

.button9:hover{
background: -moz-linear-gradient(19% 50% 90deg,#486628, #4E6E2C, #4E6E2C 0%);
background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#4E6E2C), to(#486628), color-stop(0,#4E6E2C));
}

10. Tenth Button: Yellow-Gold

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.button10{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

background: -moz-linear-gradient(0% 45% 90deg,#E0B324, #FAD121, #FFE678 100%);

background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#FFE678), to(#E0B324), color-stop(.2,#FAD121));

color:#312f30;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 20px;
text-shadow:1px 1px 0 #ebd663;
}

.button10:hover{
background: -moz-linear-gradient(40% 51% 90deg,#D4A922, #EBC41F, #EDD670 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#EDD670), to(#D4A922), color-stop(.2,#EBC41F));
}
文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

The HTML

To turn a regular link on your page into a fancy animated CSS3 button, you just need to assign the .buttonclass and one of the supported colors. See some examples below:

1 <a href="#" class="button blue big">Download</a>
2 <a href="#" class="button blue medium">Submit</a>
3 <a href="#" class="button small blue rounded">Submit</a>

There are four color classes available – blue, green, orange and gray. The rest of the classes, which you see assigned to the links above, are optional. You can choose a size from small, medium and big, and one more class – rounded, which creates a more rounded version of the button.

The class names are chosen so they are straightforward and easy to remember, but this raises the possibility of a clash with some of the classes on your page.

If, when implementing the buttons, you notice that they don’t look right, try changing the class names from “blue”, “big”, “rounded” etc. into something more unique. You’d need to modify buttons.css to do this.

Now lets take a closer look at the CSS classes that make this possible.

CSS3 Animated Buttons

CSS3 Animated Buttons

The CSS

All the CSS code for the animated buttons resides in buttons.css. This makes it easy to just drop it into an existing project and use it.

Notice that throughout the the code below, I’ve defined two versions of the same property in a number of places. This has to do with the way browsers handle CSS definitions. They parse the rules one by one and apply them, ignoring the ones they do not understand. This way we can have a plain version of the rule which is understandable by all, and a CSS3 enabled one which will be ignored by the older ones.

buttons/buttons.css

01 .button{
02     font:15px Calibri, Arialsans-serif;
03  
04     /* A semi-transparent text shadow */
05     text-shadow:1px 1px 0 rgba(255,255,255,0.4);
06  
07     /* Overriding the default underline styling of the links */
08     text-decoration:none !important;
09     white-space:nowrap;
10  
11     display:inline-block;
12     vertical-align:baseline;
13     position:relative;
14     cursor:pointer;
15     padding:10px 20px;
16  
17     background-repeat:no-repeat;
18  
19     /* The following two rules are fallbacks, in case
20        the browser does not support multiple backgrounds. */
21  
22     background-position:bottom left;
23     background-image:url('button_bg.png');
24  
25     /* CSS3 background positioning property with multiple values. The background
26        images themselves are defined in the individual color classes */
27  
28     background-position:bottom lefttop right0 00 0;
29     background-clip:border-box;
30  
31     /* Applying a default border radius of 8px */
32  
33     -moz-border-radius:8px;
34     -webkit-border-radius:8px;
35     border-radius:8px;
36  
37     /* A 1px highlight inside of the button */
38  
39     -moz-box-shadow:0 0 1px #fff inset;
40     -webkit-box-shadow:0 0 1px #fff inset;
41     box-shadow:0 0 1px #fff inset;
42  
43     /* Animating the background positions with CSS3 */
44     /* Currently works only in Safari/Chrome */
45  
46     -webkit-transition:background-position 1s;
47     -moz-transition:background-position 1s;
48     -o-transition:background-position 1s;
49     transition:background-position 1s;
50 }
51  
52 .button:hover{
53  
54     /* The first rule is a fallback, in case the browser
55        does not support multiple backgrounds
56     */
57  
58     background-position:top left;
59     background-position:top leftbottom right0 00 0;
60 }

The first thing we need to do is to define the button class. This is the backbone of the buttons as it applies positioning, font and background styles.

First are the font-related styles, after which follows the display property. It is set to inline-block, which allows it to sit on the same line as its surrounding text (like an inline element would), but also behave like a block in regard to the paddings and margins.

As you will see in a moment, each button has four background images applied to it. Although this sounds intimidating, only one file is actually requested from the server. The first two backgrounds are the bottom left and top right part of the bubble image, which you can see in the illustration below, and the other two are pure CSS gradients.

Bubble Background

Bubble Background

As I mentioned above, the bubble background is displayed as two individual images, offset with the background-position property. Using the CSS3 transition property, we define an animation in which the two versions of the background image slide to the top or bottom respectfully, which creates the bubble effect you see when hovering over the buttons.

Now lets say a few words about the size and rounded classes.

01 /* The three buttons sizes */
02  
03 .button.big        { font-size:30px;}
04 .button.medium    font-size:18px;}
05 .button.small    font-size:13px;}
06  
07 /* A more rounded button */
08  
09 .button.rounded{
10     -moz-border-radius:4em;
11     -webkit-border-radius:4em;
12     border-radius:4em;
13 }

Here are the three size classes – small, medium and big, and the rounded class. The buttons scale according to their text size. This way no explicit width and height has to be specified.

Now lets move on with the interesting part – the colors. Only the definition for the blue button is given below, as the rest are nearly identical.

01 /* BlueButton */
02  
03 .blue.button{
04     color:#0f4b6d !important;
05  
06     border:1px solid #84acc3 !important;
07  
08     /* A fallback background color */
09     background-color#48b5f2;
10  
11     /* Specifying a version with gradients according to */
12  
13     background-image:    url('button_bg.png'), url('button_bg.png'),
14                         -moz-radial-gradient(    center bottomcircle,
15                                                 rgba(89,208,244,1)0,rgba(89,208,244,0100px),
16                         -moz-linear-gradient(#4fbbf7#3faeeb);
17  
18     background-image:    url('button_bg.png'), url('button_bg.png'),
19                         -webkit-gradient(    radial, 50% 100%050% 100%100,
20                                             from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
21                         -webkit-gradient(linear, 0% 0%0% 100%, from(#4fbbf7), to(#3faeeb));
22 }
23  
24 .blue.button:hover{
25     background-color:#63c7fe;
26  
27     background-image:    url('button_bg.png'), url('button_bg.png'),
28                         -moz-radial-gradient(    center bottomcircle,
29                                            rgba(109,217,250,1)0,rgba(109,217,250,0100px),
30                         -moz-linear-gradient(#63c7fe#58bef7);
31  
32     background-image:    url('button_bg.png'), url('button_bg.png'),
33                         -webkit-gradient(    radial, 50% 100%050% 100%100,
34                                             from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
35                         -webkit-gradient(linear, 0% 0%0% 100%, from(#63c7fe), to(#58bef7));
36 }

Each color class defines a unique unique set of properties – the color of the buttons’ textual label, a text-shadow and a set of background images. Notice that we use the background property to add multiple images to the button. They are layered one on top of the other, with the ones defined first appearing on the top.

Only Mozilla and Webkit browsers support CSS gradients at the moment, but with quite different syntaxes. The rest of the browsers will display the fallback background color. You may have noticed that we are not including a prefix-free version of the gradient rules. This is due to the fact that gradients are not an official part of the CSS specification as of yet, and there is no agreement on the preferred syntax.

In the fragment above, you can see that we are defining a linear gradient and a radial one on top of it. To make the gradients blend more smoothly, in both the webkit and mozilla syntaxes we are defining the radial one with RGBA, which makes the outer color of the gradient completely transparent.

With this our CSS3 animated bubble buttons are complete!

Parting words

These buttons are entirely CSS based and integrating them is extremely simple – just drop the buttons folder somewhere in your project. You can create your own colors and shapes by modifying the CSS file.

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

Computer Graphics Design at RIT

John A. Jacob

fruute

Kyan

nest

Jopp

vlog.it

Australian Red Cross

Column Five

Zoo Advertising

Helen & Hard

Cloudberry

Mediovski

Dart St Louis

3Degrees Agency

Contrast Rebellion

Cookiesound

B3 Studios

aaugh

dotmick.com

 

 Cover Image by: Wang Qi@DamnDigital

文章標籤

AJlin-DES鼎益盛 發表在 痞客邦 PIXNET 留言(0) 人氣()

1 2
找更多相關文章與討論