Tagged

设计

A collection of 150 posts

Flat

翻译:优质UI的7条准则(一)

本文原文来自于 Medium:https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda,作者为:Erik D. Kennedy https://twitter.com/erikdkennedy。 虽然是译文,但是我在字里行间里也会加入自己的一些看法。 简介 首先,这个讲义并不适用于所有人,他主要是为了: 那些想要得心应手地制作出漂亮 UI 的程序员 那些想要自己的产品集超出常人的 UX 设计师,或是那些想要设计出优于知名 UI 库的交互的人。 如果你是一个设计学院的学生或者认为自己是一个很不错的 UI 设计师,那么你也许会觉得这篇文章有点乏味,错误甚至是令人反感的。不过,anyway。 那这些准则可以告诉你什么? 首先,我曾经是一个完全没有 UI 技术的 UX 设计师。当然,我热爱设计交互,但我之前并没有很重视他直到发现设计一款好的交互有很多的好处。 我那时的 portfolio 简直不堪入目,

后台

50个高端大气上档次的管理后台界面模板

译自:[50 Incredible Admin Page Templates](http://www.instantshift.com/2013/07/11/admin-page-templates/) 译自:[50个高端大气上档次的管理后台界面模板](http://www.qianduan.net/50-amazing-admin-management-templates.html) 请尊重版权,转载请注明来源,多谢~~ - - - - - - 大部分网站都有一个管理面板或者管理界面用于查看和管理网站信息。但是通常大家并不是很重视这个后台管理界面的设计,一般能用就行了。但是其实漂亮的管理界面也能大大的提升工作人员的工作效率啊。通过使用漂亮的管理面板你可以省掉很多的时间,同事,设计良好的界面也适合在移动终端上使用,从而减少对PC的依赖和提供管理的灵活性。 这里收集了50个高端大气上档次,简洁时尚国际化的后台管理界面模板,希望你能喜欢并获取灵感。 1. Katniss Premium Admin Template 2. Esthetics Admin-Clean

扁平化

扁平化网页设计展示

译自:[Examples of ‘Flat’ in Web Design](http://speckyboy.com/2013/01/23/flat-design-in-web-design/) 原文:[扁平化网页设计展示](http://www.qianduan.net/flat-web-design-showcase.html) 请尊重版权,转载请注明来源,谢谢〜〜- - - - - - 上一篇中,我们讨论了[扁平化设计美学](http://www.qianduan.net/the-flat-design-aesthetic.html)。为了防止你不太能理解它,回味一下:“扁平化设计意味着不用常用的渐变、像素完美的阴影,然后通常是近年来蔓延的用来实现看起来“平面”的用户界面。” 嗯,为了能让你更快的步入扁平化设计的潮流,今天我们收集了20个超赞的示例(

扁平化

扁平化设计与可访问性

译自:[Flat Design and Accessibility](http://speckyboy.com/2013/02/05/flat-design-and-accessibility/) 原文:[扁平化设计与可访问性](http://www.qianduan.net/flat-design-and-accessibility.html) 请尊重版权,转载请注明来源,谢谢〜〜- - - - - - 这几年互联网变化好多,我们在网上浏览的方式也一样。在本文中,我们将看一下最近扁平化设计带来的可访问性提升以及使得互联网或多或少更开放和可用性。 扁平化元素 拟物化设计模仿颜色、纹理、形状甚至实际生活中特定的实际形状,因此能对不喜欢新技术和更喜欢仿现实环境的人非常有帮助。然而,对视障用户能有多少用户呢?坚持这种设计方法对他们会有价值吗?好吧,和拟物化设计相对应的,扁平化设计,有很多优势可以帮助到这些特殊需求。因为扁平化设计使用基本的形状,比如,正规/不正规的多边形,它们更容易识别。

扁平化

扁平化设计美学

译自:[The Flat Design Aesthetic: A Discussion](http://speckyboy.com/2012/12/11/the-flat-design-aesthetic/) 原文:[扁平化设计美学](http://www.qianduan.net/the-flat-design-aesthetic.html) 请尊重版权,转载请注明来源,谢谢〜〜- - - - - - 最近一个在网页和UI设计上逐渐增长的趋势是“扁平化设计”的使用,而且现在已经是一个非常热门的话题了。满大街的现场讨论会以及大量的教程。我常常被吸引到极简主义设计中,所以扁平化设计是一种很自然的给我启发的设计美学,特别是在最近的一个项目的重新设计中。 在本文中,我将讨论下什么是扁平化设计、回顾其它设计方式,并提供如何在你自己的设计中实现的一些技巧。 什么是扁平化设计? 实际上,扁平化设计意味着在设计中不使用常用的渐变、像素完美的阴影,然后通常是近年来蔓延的用来实现看起来“平面”的用户界面。

ios

Photoshop中改进ios设计流程的30个诀窍

设计是一个漫长和痛苦的过程,期间可以用点技巧来减少痛苦,30+ tips to improve your iOS design workflow (in Photoshop)一文总结31个实用的技巧可以借鉴和学习。 ————–以下为译文——————- 在本文中我(英文原作者)总结了在photoshop中设计ios软件时所遵守的方法。许多的技巧适用于一般的UI设计。注意:文中所提到的快捷键针对于Windows;Mac 用户可,Cmd对应Crtl键,Opt对应Alt键。 1.保持尺寸为偶数 你是首先针对Retina屏幕设计然后再对标准分辨率的进行缩小是吧?为了在标准分辨率下像素仍然保持完美的呈现,你需要保证大小和距离为偶数。具体的做法便是:基于2ps的网格设计。在编辑(Edit)〉首选项(Preference)〉参考线、网格和切片(Cuides,Grids&Slices)。更改**网格线间隔(Gridline)和子网格(Subdivisions)**来是使得网格间隔线为2px。例如:设置网格线间隔为64px,

ios

移动终端设计和开发类书籍推荐

移动终端市场越来越热闹了,而传说现在中国每卖10部手机有9部都是android——虽然剩下不到一层的iphone带来的网络有流量比这9成的android用户还多~~恩,很多人都开始转向移动终端设计和开发了吧。 这里推荐几本相关的书籍,希望能够帮到大家。其实相信很多前端设计和开发的同学已经接触到移动终端的设计和开发了,剩下的人也都蠢蠢欲动了吧。恩,这是个趋势,移动互联网大时代已经来了~~ 设计类 自然用户界面设计:NUI的经验教训与设计原则 在卓越购买 | 在淘宝购买 貌似张小龙在分享微信成功经验时就提到,最好的设计就是自然——让用户感觉不到设计的存在。这本书看起来不错。 触动人心:设计优秀的iPhone应用 在卓越购买 | 在淘宝购买 非常不错的一本书,我很喜欢。 简约至上:交互式设计四策略 在卓越购买 | 在淘宝购买 卓越网口碑非常高的一本交互书。 交互设计沉思录 在卓越购买 | 在淘宝购买 传说中交互设计领域的扛鼎之作,交互设计领域思想领域多年经验结晶。 开发类 iOS5基础教程 在卓越购买 | 在淘宝购买 iOS5入门级书籍,很多人从此走上了小康之路。 Objective-C基础教程 在卓越购买 | 在淘宝购买 iOS编程的核心是Object-C,而这门语言已经是今年最热门的开发语言了。 Learning Android(

注册

99个漂亮的注册和登录页面设计(附PSD)

整理自:99 Beautiful Free Sign-In (Login) and Sign-Up PSD Designs 中文:99个漂亮的注册和登录页面设计(附PSD) 请尊重版权,转载请注明来源,多谢~~ 我们之前有介绍过一些很漂亮的网站登录界面,登录和注册是获取用户的第一步,是最能体现网站用户体验的地方。这里我们又收集了更多的登录和注册界面设计,它们来自于国外优秀的设计师们,而基本都是设计稿,附带PSD,你可以下载下来用在自己的项目中。 Wooodapp sign in page Sign In Widget Elegant Login Form Design Simple Login Form Login Form Popover Sign In Elegant Login Form Design Sign Up Widget

javascript

2012年度最新免费web开发设计资源荟萃

免费的设计和开发资源大家肯定都喜欢,在这篇文章中我们收集了7月到8月的最新免费开发设计资源,包含PSD UI套件,图标javascript,jQuery插件等等,绝对是web开发设计人员必备,如果你也喜欢,过来看看吧! 1. Smart Time Ago(jQuery插件) 2. 使用javascript开发超棒的动画文字书写效果 3. Magnifying Glass for Image Zoom (jQuery/CSS3) 4. Settings Panel (PSD) 5. iOS Icon Template 6. Blitz PSD UI Kit 7. PSD Retro Text Effect Vol. 2 8. Beer Bottle PSD Mockup Template

设计

35个漂亮的进度条设计

整理自:[35 Beautiful Progress Bar Designs](http://www.hongkiat.com/blog/beautiful-progress-bars/) 中文:[35个漂亮的进度条设计](http://www.qianduan.net/beautiful-progress-bars.html) 请尊重版权,转载请注明来源,多谢!- - - - - - 网页中常常会在页面/内容没有完整加载前给一个进度提示,通常最简单的做法是给一个loading的gif动画图片,比如最常用的“菊花图”。进度条是另一种表现方式,比菊花图提供更多的信息,也有更丰富的表现。 通常,之前进度条会更多的用在桌面程序或网页中flash加载过程中显示,而现在,基于HTML5的web app特别是web game有时候也需要使用进度条来表现加载状态,它的最大作用是给用户一种心理暗示,告诉他大概需要等待多久。所以,进度条设计是让用户耐心等待你的应用/页面加载完的关键。 下面是一些非常漂亮的进度条设计,看着这些漂亮的界面,

圆形

40个使用圆形的网页设计欣赏

整理自:[40 Examples of Using Circles in Web Design](http://speckyboy.com/2012/08/27/40-examples-of-using-circles-in-web-design/) 中文原文:[40个使用圆形的网页设计欣赏](http://www.qianduan.net/40-examples-of-using-circles-in-web-design.html) 请尊重版权,转载请注明来源,多谢!- - - - - - 网页设计中会用到各种图形,比如圆形。虽然圆形在网页设计中并不常见,但是越来越多的网站开始使用圆形元素,特别是在CSS3使用越来越多的情况下。这种不太明显的趋势可能和HTML5/CSS3的普及有关,也和触摸屏设备的普及有关。圆形元素更有触摸感。。。 在移动终端,圆形能更快的吸引用户的注意力,而在本文展示的网站中,或许它们并不是为移动设备而设计的,但是它们用到的圆形元素确实能有效增强相关元素的视觉效果。 Ivent Haardtline Matteozanga

联系页面

21个漂亮的联系页面设计

整理自:[21 Beautiful Contact Pages](http://webdesignledger.com/inspiration/21-beautiful-contact-pages) 中文原文:[21个漂亮的联系页面设计](http://www.qianduan.net/21-beautiful-contact-pages.html) 请尊重版权,转载请注明来源,多谢~~- - - - - - 让用户方便的联系到你是一个网站的非常重要功能,所以很多网站会把联系信息放到页面中比较醒目的地方比如头部。但大部分网站都会忽略联系页面的设计,所以大家通常见到的都是一些平庸的联系页面设计。今天我们来看一些国外的优秀的联系页面设计。 联系页面可以很华丽,也可以很简约,最关键的是,避免传统联系页面的乏味,然后让访客能够非常方便的联系到你。这20多个实例是比较有代表性的,希望你能从中找到灵感。 Supereight Studio Spokes Touch Mostly Serious Envy Labs Colorkite Dewey’s

截屏

23个在网页中使用截屏的实例

译自:[23 Examples of Screenshots in Web Design](http://webdesignledger.com/inspiration/23-examples-of-screenshots-in-web-design) 中文:[23个在网页中使用截屏的实例](http://www.qianduan.net/23-examples-of-screenshots-in-web-design.html) 原作者:Gisele Muller 请尊重版权,转载请注明来源,多谢! - - - - - - 无论你是在开发app或者网站,以截屏的方式告诉潜在的客户他们将得到的结果是个很不错的主意。而且如果你的产品看起来足够漂亮,你可能只是想要将其放在前面和中间,让它们成为页面的焦点。 为了给你提供点儿灵感,我们收集了一些这样做的网站。在这些例子中,你将会注意到这些截屏中的很多——就算不是全部——都被包围在他们可能出现在的某个浏览器(mac版safari最常见)或者设备之中。这有助于添加些语境,然后也是兴趣的另一个层面。 其实最近国内的网站也越来越多的见到这种设计了,特别是关于iOS/

大字体

45个网页中创意的大字体设计

中文:[45个创意的大字体设计](http://www.qianduan.net/45-creative-examples-of-large-typography-in-web-design.html) 译自:[45 Creative Examples of Large Typography In Web Design](http://www.onextrapixel.com/2011/09/08/45-creative-examples-of-large-typography-in-web-design/) 请尊重版权,转载请注明来源,多谢!- - - - - - 排版的历史可能和人类一样悠久。大字体可以迅速吸引网站访问者的注意力。所以在网页设计中,选择正确的字体被认为是最重要的一个工作。事实上,设计可以被词语的力量所颠覆。大字体已经成为网页设计是最喜爱的工具了,因为它可以“大声”的传递他们的信息从而激发用户的体验。大字体可以用于网页中的任何地方,它在页面头部的时候通常看起来很酷,而用于文字的时候就会显得很华丽,或者用于结尾的时候甚至可以作为一种视觉的增强。这里我们又收集了很多使用大字体所创造的很赞的布局。

纹理

国外30个超赞的使用纹理的网站设计

中文原文:[国外30个超赞的使用纹理的网站设计](http://www.qianduan.net/30-brilliant-texture-web-design.html) 译自:[30 Brilliant Examples of Texture in Web Design](http://webdesignledger.com/inspiration/30-brilliant-examples-of-texture-in-web-design) 请尊重版权,转载请注明来源!- - - - - - 纹理在各种设计中都有用到。现在你会常常在名片、手机APP以及网页设计中见到漂亮的纹理。网上也有很多免费的和收费的高质量纹理素材供你使用。适当的使用纹理有助于给设计带来逼真和精细的感觉。在这次展示中,你将发现30个新鲜的使用纹理的网站设计,它们包括多种风格:极简、简约、精细以及颓废。希望能给你带来灵感。 Quantum Cake Sweet Cake The Impressto Web Design

书籍

前端设计类书籍推荐

位于设计师和后台开发中间的前端开发工程师,其实也都算是视觉动物的,其中很多人同时也是很棒的设计师。而听过彪叔《一专多长》演讲的人大多也会这样要求自己吧,那么无论是设计师本身,还是前端开发工程师,多读些设计类的书会是很好的,有时候或许也会让人豁然开朗的吧。 这里推荐一些设计类的书,有的是我读过的,有的是还没有读过但被同事或者坊间推荐的,推荐给大家。。。 写给大家看的设计书 在卓越购买 | 在当当购买 最近比较热门的设计类书籍,作者将设计的理论提炼为亲密性、对齐、重复和对比4 个基本原则,然后逐步讲解个中要义。这也是本同学们口碑相传的书~~ 配色设计原理 在卓越购买 | 在当当购买 配色在网页设计中非常关键,不同的颜色及其搭配代表着不同的情感,可以传递不同的信息,这本书会让你更好的理解色彩在设计中的意义。 设计中的设计 在卓越购买 | 在当当购买 原研哉是日本最知名的设计师之一,日本设计中心的代表。他似乎一直在探索设计的本质,和唐纳德·诺曼一样,原研哉将设计的思考导向于生活。同时推荐原研哉的另一本书:为什么设计 设计心理学 在卓越购买 | 在当当购买 大师唐纳德·A·诺曼的代表作,1988年首版,但是到大概02年才被翻译成中文,

HTML5

超酷的HTML5网站设计

译自:[Awesome HTML5 Websites](http://designartwall.com/2011/03/awesome-html5-websites/) 中文原文:[超酷的HTML5网站设计](http://www.qianduan.net/awesome-html5-website-design.html) 请尊重版权,转载请注明出处!- - - - - - 我们已经了解很多关于HTML5的技术了,很多人也开始在自己的项目中应用各种HTML5技术。这里,[Design Art Wall](http://designartwall.com/)收集了15个采用HTML5实现的网站,当然它们还有非常赞的界面设计,这些网站不仅在coding上,更在设计上能给我们更多的参考,当然,国内很多网站仅仅是使用了HTML5的doctype而没有真正的采用HTML5的语义化标签和更多高级特性。嗯,是时候做更多的尝试了。 当然,如果你做了或者见到了很棒的采用HTML5技术实现的中文网站,欢迎通过评论反馈给我们,多谢~~ Youzee Brasserie Gerard

幻灯

66个网页设计中完美的幻灯展示实例

中文原文:[66个网页设计中完美的幻灯展示实例](http://www.qianduan.net/66-perfect-slideshow-presentation-examples-in-web-design.html) 译自:[66 Examples of Perfect SlideShow Presentation in Web Design](http://www.instantshift.com/2010/02/05/66-examples-of-perfect-slideshow-presentation-in-web-design/) 请尊重版权,转载请注明出处,多谢!- - - - - - 我最近注意到的一个非常有趣的趋势是在**幻灯演示**中展现关键信息。现代设计师喜欢尝试并观察用户如何与作品进行交互。尽管幻灯并不是一个普遍的趋势但是依然作为新的设计风格而不断涌现,而且越来越多的设计师注意到它并在他们的作品中使用,这种新的趋势开始崭露头角。 在本文中,你将发现各种高度创意的、漂亮的、独特的、以及最有灵感的幻灯效果设计。当然我们这里并不是要你跟随某种趋势,而是希望能够激发你的创意并启发你的想象力以创建你自己的独特的设计,因为你的网站(

20多个出色的蓝色系网站设计
出色

20多个出色的蓝色系网站设计

整理自:[Blue Website Showcase](http://d-lists.co.uk/2010/01/14/blue-website-showcase/) 中文:[20多个出色的蓝色系网站设计展示](http://www.qianduan.net/24-more-blue-website-showcase.html) 请尊重版权,转载请注明来源,多谢!- - - - - - [Color wheel pro](http://www.color-wheel-pro.com/color-meaning.html)说:蓝色是天空和海洋的色彩。它常常和深度和稳定有关。它象征着信任、忠诚、才智、信心、智慧、信仰、真理与天堂。 蓝色被认为有利于人的身心。它减缓人体新陈代谢,

最佳

2009年最佳网站设计

**译自:**[ webdesignerwall ](http://www.webdesignerwall.com/trends/best-of-css-design-2009/) **中文翻译:**[2009年最佳网站设计](http://www.qianduan.net/best-css-design-2009.html) 请尊重版权,转载请注明引用来源,多谢- - - - - - 自从2007年,每一年我都会从[Best Web Gallery](http://bestwebgallery.com/) 收集一些最佳的CSS网站设计(查看[07](http://www.webdesignerwall.com/trends/best-of-css-design-2007/) 和[08](http://www.webdesignerwall.com/trends/best-of-css-design-2008/) 版本)

作品集

40个超棒的摄影师作品集网站设计欣赏

原文:[40个超棒的摄影师作品集网站设计欣赏](http://www.qianduan.net/40-great-photographer-portfolio-websites.html) 译自:[40 Great Photographer Portfolio Websites for Inspiration](http://www.thephotoargus.com/inspiration/40-great-photographer-portfolio-websites-for-inspiration/) 版权所有,转载请注明出处,多谢!- - - - - - 这是一个关于极好的作品集网站设计收集。国内外有很多很有才的摄影师,而有些摄影师的作品集网站也同样很棒。本文列出40个设计非常棒的摄影师的作品集网站设计,以供大家参考。 同时我们不难发现,这些相册网站,绝大部分使用暗色调,比如黑色或深灰色,用很大的醒目的位置显示漂亮的图片以吸引读者的眼球。 原文:40个超棒的摄影师作品集网站设计欣赏 Jeremy Cowart Koen Demuynck Mitchell Kanashkevich Joon

华美

30个非常华美的网站设计

中文:[30个非常华美的网站设计](http://www.qianduan.net/30-extremely-colourful-website-designs.html) 译自:[30 Extremely Colourful Website Designs](http://www.webdesigndev.com/inspiration/30-extremely-colourful-website-designs) 版权所有,转载请注明出处,多谢! - - - - - - 我编辑了一个使用全彩色的最佳网站展示列表。这些网站很好的使用了色彩以使它们出类拔萃,最重要的是让它看起来很漂亮。这些网站中使用的阴影、渐变和色盘让它们引人注目。建议点击图片访问网站亲自体验一下这些网站。它们中的一些交互设计也是很棒的!另外,如果你发现了某个很好的中文网站设计,请通过评论提交个我们,多谢。 Calypso Park Pixele Peminoz Colour Pixel Mbdizajn Life Lab Arkix

设计

20个很棒的使用黑色系背景的网站设计

中文原文:[20个很棒的使用黑色系背景的网站设计](http://www.qianduan.net/20-great-web-designs-with-dark-background.html) 整理自:[20 great web designs with a dark background](http://www.designer-daily.com/20-great-web-designs-with-a-dark-background-4592) 版权所有,转载请注明出处,多谢! - - - - - - 尽管我并不是非常喜欢带有很多文字的黑色背景网站,但是它一直看起来很棒,特别是对于作品集网站。本次收集展示一些很好看的使用黑色系背景的网站设计。 1. Andrea Ziino 2. Martin Iglesias 3. iWant iPhone 4. Spiffing Apps 5. Envisage 6.

乐队

国外25个最佳乐队和歌星网站

原文:[国外25个最佳乐队和歌星网站](http://www.qianduan.net/25-best-bands-and-singers-website.html) 译自:[25 of the Best Websites of Bands and Musicians](http://vandelaydesign.com/blog/galleries/best-band-websites/)国外 请尊重版权,转载请注明引用来源,多谢!- - - - - - 通常,各种类型的娱乐行业相关的网站可以用来启发你的设计灵感。乐队和歌星需要有一个能够吸引访问者并为其粉丝提供他们所有必需信息的网站。本文我们将为大家推荐国外的25个设计非常棒的乐队和歌星网站。 这些网站看起来都很潮,它们使用了当前比较流行的一些设计元素,比如:大字体设计、大背景图、手绘元素、涂鸦背景等。 当然,国内的和港台的一些明星的网站设计的也是非常棒,我们最近也将收集一些设计最好的中文乐队和明星的官方网站,以给大家提供参考。 Chris