咖啡类网页设计欣赏！
在美国，平均每个人每年会喝500~700杯咖啡，在中国虽然远达不到这个数目，但是整个开发行业正在以每年15%的速度告诉增长，作为设计师的你，想必也没少在咖啡馆中流连吧？咖啡文化的内涵和外延都非常丰富，不同档次的咖啡迎合着不同的消费群体，周边极为丰富，千奇百怪的咖啡馆更是令人应接不暇，所有的这些元素使得咖啡类的网站从来都不会单调，哪怕是千篇一律的咖啡豆+咖啡杯在设计的加持之下，能创造出无限的可能。
下面我们一起来看看这些网站，看看它们是如何在屏幕上为你创造出缱绻的氛围。
Coffee Beans Delivered
和时下流行的美食类网站近似，现代而时尚的风格，配合着颇为艺术化的细节处理，带有Grunge风格的图文混拍让页面丰满而富有质感，图片虽然多，但是视觉中心突出，图片和图章的组合是这类网站常见的特色，尽管常见，但是确实逼格满满。
Caffe Cimo
网站的设计师将大气的图片和流行的扁平风组合到一起，清爽的背景图有细节有景深，使得前景的内容呈现得更加清晰易读，最重要的是，这样的搭配使得网站氛围极其到位，值得学习~
Second Cup
这个名为Second Cup 的网站整体配色走的浅色系路线，干净清爽的背景也使得网站的精心打磨的布局颇为突出，加上咖啡类网站必备的图章设计，从细节到氛围一次都搞定了~
Jacu
一图胜千言，所以Jacu的设计师打算用大量美图来呈现他们的咖啡。左下角独特的矩阵式图片导航可以让你快速定位到不同的图片，那些精美的展示图足以让你直观感受到这个品牌的精致与细腻。有意思的是，他们依然准备好了足够的文字说明。点击左下角的+号，图片变为背景，并且加上了半透明的黑色蒙板，文字说明浮现，和谐而对比明显，保证可读性也营造了氛围。
SCR
SCR的网站设计同样时尚精致，扁平+大图的模式。不同于其他网站的地方在于，设计师融入了许多几何元素（正方形、三角形、菱形等），这些图形散落在页面的各个角落，让页面更丰富，又不会喧宾夺主。
Where Does Coffee Come From?
美图和故事永远是最抓人的，而这个网站就是以故事的形式为你讲述咖啡是从哪里来的。扁平风的插画+视差滚动效果+引人入胜的故事，并不新颖的手法创造出令人难忘的网页，大抵就是如此了。
De la Paz
独特的背景图是De la Paz 这个网站的标志性特征，不同系列的产品被精心摆放呈现在图片中。作为一个电商网站，美图就是生产力！
My First Coffee
如果你是咖啡的资深爱好者，如果没有什么比咖啡香更能提神，如果你的每天都是从一杯香浓的咖啡开始的，那么这个网站你一定不要错过，它就是为你所定制的。这个网站是典型的以干货内容为主，甚至连图片和图形都不多。但是这正好符合你的需求，不是么？
My Coffee My Barista
这个网站的独到之处就在于纹理、拟物插画/图形和手写风的字体，所有元素紧密地排列在页面上，模拟出咖啡馆中独有的手绘菜单的样子，不同寻常，但是绝对的有逼格~
Icons4Coffee
不同于其他网站，这个网站是一套名为“Icon4Coffee”的图标合集的官方站点，宣传语是“这是一套饱含咖啡因的图标集”，足以见得设计师是个资深咖啡控。如果你需要咖啡相关的图标，来这里就对了。
Café Cuba
这是献给开发者和极客的一个咖啡网站，经典的字符页面和复古的字体，能让每个高龄IT从业者情怀满满。这个网站的交互方式原始而经典，但是这就是情怀，不是么？
Pablo and Rusty’s
这个网站同样采用了相对经典的图文搭配方式，导航栏使用了简约的图标来引导用户，营造了充满活力的氛围，引诱你点击。
Coffee Surfing
这个网站是为全世界咖啡爱好者而设的，你在这里能看到他们和咖啡结缘的故事，耐人寻味，发人深省。
Ooze
咖啡和工作空间的图片总是让人百看不厌，两者结合更是如此。这个网站借助这样的图片营造出现代而时尚的氛围，令人喜爱。
The Bagel Bar Coffee House
网站配色基本全是取自咖啡，黑白灰和棕色。黑色和白色一样，都能凸显内容，这也是为什么网站上那些食物是如此的醒目。作为餐饮类网站，这种配色似乎偏门了点，但是实际效果很不错哦。
Little Cove Coffee
设计师在构建网站的时候，加入了富有质感的纸质风格的背景和质朴的外观，加上手写字体和立得拍照片的元素，从细节到风格都力图创造出“咖啡馆”的感觉。
有人说每个设计师都有一个开咖啡馆的梦想，咖啡馆确实有点遥远，可是创造一个关于咖啡的网站也不错啊！看看别人家的网站，挑个风和日丽的周末开始设计自己的网站也不错哦~
文章来源：优设
onextrapixel
优设译者：@陈子木
绛旓細杩欎釜鍚嶄负Second Cup 鐨勭綉绔欐暣浣撻厤鑹茶蛋鐨勬祬鑹茬郴璺嚎锛屽共鍑娓呯埥鐨勮儗鏅篃浣垮緱缃戠珯鐨勭簿蹇冩墦纾ㄧ殑甯冨眬棰囦负绐佸嚭锛屽姞涓鍜栧暋绫荤綉绔蹇呭鐨勫浘绔璁捐锛屼粠缁嗚妭鍒版皼鍥翠竴娆￠兘鎼炲畾浜唦Jacu 涓鍥捐儨鍗冭█锛屾墍浠acu鐨勮璁″笀鎵撶畻鐢ㄥぇ閲忕編鍥炬潵鍛堢幇浠栦滑鐨勫挅鍟°傚乏涓嬭鐙壒鐨勭煩闃靛紡鍥剧墖瀵艰埅鍙互璁╀綘蹇熷畾浣嶅埌涓嶅悓鐨勫浘鐗囷紝閭ｄ簺绮...
绛旓細鍥炵瓟锛氳壊璋冨氨浠鍜栧暋鑹蹭负涓,閫傚綋閰嶅悎鍜栧暋璞嗗仛鑳屾櫙, 杩樻湁鏇磋缁嗚璇存槑鏉愭枡 澶
绛旓細榛戣壊鑳屾櫙锛岃緟浠ラ珮娓呭僵鑹蹭骇鍝佸浘鐗囨垨瑙嗛锛岃兘澶熸瀬澶х殑寮鸿皟鍜岀獊鍑洪〉闈骇鍝侊紝鎻愬崌浜у搧閿鍞噺銆傝屼綔涓轰竴娆惧湪绾鍜栧暋绫浜у搧鍞崠鐨勭綉绔欙紝鏈綉椤碉紝灏卞湪榛戣壊鑳屾櫙涓婏紝灞曠ず浜嗗悇绉嶉珮娓呬骇鍝佸浘鐗囧拰瑙嗛锛岃交杞绘澗鏉惧皢璁╃敤鎴烽泦涓簬鎵鍞崠鐨勪骇鍝侊紝浠庤屾晥鐨勬彁鍗囩敤鎴疯喘涔扮殑鍙兘銆傛槸涓娆鹃潪甯稿煎緱鍟嗗姟绫荤綉椤妯′豢鐨勬渚嬨傚湪绾块瑙 7.Stu...
绛旓細coffee 鍜栧暋 coffee 鑻盵ˈkɒfi] 缇嶽ˈkɔːfi]n. (鐑樼儰杩囩殑) 鍜栧暋璞; 鍜栧暋绮; 鍜栧暋(鐑ギ鏂); 涓鏉挅鍟;[渚嬪彞]Brazil harvested 28m bags of coffee in 1991, the biggest crop for four years.1991骞达紝宸磋タ鐨勫挅鍟¤眴浜ч噺杈2,800涓囪锛屼负4骞存潵鏈...
绛旓細钃濈豢鑹层佹鑹插拰榛勮壊鐨勭粍鍚堣櫧鐒跺姣斿害楂橈紝浣嗗憟鐜板嚭闈炲父骞插噣鐨勬晥鏋溿備娇鐢ㄨ繖鏍风殑鑹插僵缁勫悎锛屽彲浠ヨ浣犵殑缃戠珯鐪嬭捣鏉ユ竻鏂般佺畝娲佷笖鍏呮弧娲诲姏銆 杩欐槸涓涓効绔绫荤綉绔锛岃櫧鐒朵娇鐢ㄤ簡寰堝棰滆壊锛屼絾閫傚綋鍦伴檷浣庝簡楗卞拰搴︼紝骞跺鍔犱簡璁稿鐣欑櫧璁捐銆傝繖涓綉绔欒櫧鐒惰壊褰╀赴瀵屽褰╋紝浣嗙粰鐪肩潧鐨勬劅瑙夊嵈闈炲父鑸掗傘 鏄庝寒鐨勮壊褰╃粍鍚堟...
绛旓細鎴戣繖鏈夎澶缃戦〉璁捐浣滃搧锛岄兘鏄痙iv+css妗嗘灦鍘熷垱浠ｇ爜鍐欑殑锛屾湁鐨勬湁js锛屾湁鐨勮棰戦煶涔恌lash鐨勭瓑鍏冪礌鐨勬彃鍏ワ紝鍚勭椋庢牸涓婚濡傞鏅佹牎鍥佺編椋熴佸姩婕乴ol銆鍜栧暋銆佹皯鑸瓑绛変富棰橈紝鎴戦兘鍏变韩鍦ㄥぇ璁捐甯堣鍧涳紝浣犲彲浠ュ幓鑷姪涓嬭浇銆
绛旓細榛勩佺豢銆佽摑鐨勭粍鍚堬紝浠ュ強鐢婚潰涓槾褰辩殑鏁堟灉锛岀湅涓婂幓鏂伴矞鍙堟椂灏氥傝瑙変笂锛屽彲浠ヨ揪鍒拌垝缂撳帇鍔涚殑鏁堟灉銆傛兂瑕佷竴涓俯鏆栧钩鍜屾劅鍙楃殑缃戠珯锛屽彲浠ラ夋嫨杩欐牱鐨勮壊璋冦傛俯鏆栫殑閲戦粍鑹蹭笌娴疯摑鑹诧紝瀹冧滑鐩镐簰浣滅敤锛屼骇鐢熶簡骞宠 鎰熴傝繖鏄竴瀹鍜栧暋棣嗙殑缃戠珯锛屾俯鏆栫殑閲戣壊涓庝綆璋冪殑缁胯壊銆佺伆鐧借壊锛屽垱閫犲嚭鏉ヤ竴绉嶅鍙よ糠浜虹殑鏁堟灉銆傚浣曡缃戠珯浣庤皟...
绛旓細鍜栧暋绛栧垝 绡1 涓銆 缂樿捣: 銆愪袱宀稿挅鍟°戠煶瀹跺簞搴椾簬xx骞10鏈堟垚绔,浣滀负鍏ㄥ浗闂诲悕鍝佺墝杩為攣缁忚惀搴,銆愪袱宀稿挅鍟°戣瀺鍚堜簡鐜颁唬鍟嗗姟澶氬姛鑳芥皵鎭,绔嬪織浜庢垚灏卞叿鏈変腑鍥界壒鑹茬殑瑗块鍝佺墝鏂囧寲鏃跺皻,鎵撻犲叏鍥藉晢鍔′紤闂叉矡閫缃戠粶銆 鏍规嵁鐩墠鐜扮姸,銆愪袱宀稿挅鍟°戠煶瀹跺簞搴楀洜寮涓氬墠鏈熷競鍦哄浼犳墽琛屾瑺浣,閫犳垚椁愬巺瀹㈡祦閲忚緝灏,绀句細褰卞搷鍔涘拰鍝佺墝缇庤獕搴︽暣浣...
绛旓細瑕佺‘瀹氱壒瀹氱殑鍜栧暋鑹睷GB鍊硷紝鏈濂芥槸鐩存帴閫氳繃鑹插僵绠＄悊杞欢杩涜閫夋嫨鍜屾牎鍑嗐傚湪缃戦〉璁捐鎴栧浘褰㈢紪杈戞椂锛屼负浜嗙‘淇濋鑹插湪涓嶅悓璁惧涓婄殑涓鑷存у拰鍑嗙‘鎬э紝寤鸿浣跨敤涓撲笟鐨勮壊褰╃鐞嗗伐鍏峰拰杞欢鏉ヨ皟鏁村拰浼樺寲棰滆壊鍊笺備互涓嬩粙缁嶄竴浜涘叧浜庨鑹茬殑RGB鍊煎拰鑹插僵绠＄悊鐨勭煡璇嗭細RGB鍊间笌鑹插僵绠＄悊 RGB鍊兼槸绾佺豢銆佽摑涓夌棰滆壊鐨勬暟鍊肩粍鍚堬紝...
绛旓細瑙ｅ喅鏂规涓夛細缇庡浘璁捐瀹缃戦〉鐗堥殢鏃堕殢鍦拌繘琛岃璁＄編鍥捐璁″缃戦〉鐗堜笉闇瑕佸畨瑁呬换浣曡蒋浠讹紝鍙渶閫氳繃娴忚鍣ㄥ嵆鍙闂傝繖鎰忓懗鐫浣犲彲浠ュ湪浠讳綍鏃堕棿銆佷换浣曞湴鐐硅繘琛岃璁″伐浣滐紝鍙渶涓涓兘涓婄綉鐨勮澶囧嵆鍙傛棤璁轰綘鏄湪鍜栧暋鍘呫佸叕鍥繕鏄梾閫斾腑锛岄兘鑳藉闅忔椂闅忓湴閲婃斁浣犵殑鍒涢犲姏銆傜編鍥捐璁″缃戦〉鐗堢殑浼樺娍涓嶄粎浠呭湪浜庤В鍐充簡涓婅堪...
