首页

网页与APP中那些优美的登陆表单

蓝蓝设计的小编

蓝蓝设计从Dribbble收集了20个漂亮的ui设计登陆表单设计 案例和ipad界面设计案例。希望你看后能从中受益,并对你以后的登陆表单设计有帮助。设计一个登陆表单看上去非常容易,但大多设计都很糟糕、毫无亮点。无论如何,这篇Dribbble案例集锦绝对走的是另一个极端。希望它们能赢得你的青睐!为用户提供更好的ui设计服务来一起欣赏吧:)

相关资源推荐:
《5款精美搜索框PSD免费下载》
《65个免费新鲜的下拉选择框PSD下载》

网站与APP中的登陆表单

Login Form

继承了iOS7的精髓,这件登陆界面作品将iOS7微妙的动画背景上升到一个新的层面。此处的背景完全是一张动画图片——甚至可能是GIF。尽管这背景事实上没有那么精致,但这一定是你平时不常见的设计。你几乎很难见到这样的APP,还有如此卖弄的首屏设计。


移动设备上的劝导式设计

蓝蓝设计的小编

译者序
本文围绕劝导式设计(persuasive design)而展开,介绍了移动终端上banner广告、push信息等典型的劝服失败案例,并从用户与移动设备之间的情感联系出发,探讨了移动劝导策略的几个切入点。所谓劝导式设计,是指通过说服和社会影响,而非通过强制的方式,以达到改变和引导用户态度或行为的技术。这种技术常被应用于销售、外交、政治、宗教、军事训练、公共卫生和管理等领域。近年来,大多数劝导式技术的研究主要集中在计算机交互领域,包括台式电脑、互联网服务、视屏游戏和移动设备。劝导技术可以看成是对用户意图的设计。

作者: Amber Krishan 译者:晓千 秦封
译文

 

【Tips:消费者不会仅仅因为导航很容易而为你的产品买单。】

为移动设备而设计时,设计师要考虑移动设备间的差异,努力提供统一的体验。他们致力于减少点击的次数,使架构更扁平;并根据触摸屏的特点而设计, 在较小屏上规划合理的布局等。这些重点都在通过方便的使用、流畅的导航和简洁的呈现,来确保的最佳的产品可用性。

为确保你的用户“可以做”你想让他们做的事情,较高的可用性是一个很好的开始。但它并不能保证用户“会来做”这些事情。因为,用户不会仅仅因为导航容易使用而来买你的产品。

音乐App的概念化界面设计欣赏

蓝蓝设计的小编

我们对音乐的渴求,一刻都不曾减少。现在无论上班途中、休息还是工作,我们总习惯先享受一下听觉的盛宴。毫不夸张地说,音乐已成为了我们生活的一部分。

有很多热情澎湃的设计师也在努力地为音乐的移动端界面创造一个富有创意的,吸引人的精致界面设计。比如这一系列,它们中既有仿古的设计风格,也有现代简约优雅的。你会欣赏到厚重感十足的黑胶唱机,可能也会惊叹于用色大胆的视觉冲击风格。

希望今天的作品能带给各位设计师们灵感!尽情享用吧:)

 

1. Music App UI (iPhone) by Piotr Kwiatkowski

50套用户体验极佳的移动UI赏析

蓝蓝设计的小编

QQ截图20131103211639

UI(用户界面)与UX(用户体验)是密切联系的,优秀的UI界面首先就能从视觉上给用户极好的体验,今天我们从Drrible和Behance上挑选了50套用户体验超棒的UI界面,包括了睡眠APP、天气APP等等,还有对Facebook、Instagram、Ebay等应用的扁平化再设计,都非常棒呦!如果你正在设计UI界面,那么可得好好借鉴学习一下,希望能给你带来灵感 : )


40个的创意进度条设计

蓝蓝设计的小编

以前的进度条设计以拟物化为主,现在扁平化风格流行,连进度条也改变咯。蓝蓝设计推荐您看看40款收集的进度条设计,很多是Dribble上的作品,应潮流而生,想瞧瞧扁平化风格的进度条是怎样的,就来看看吧。如果你对拟物化的创意进度条更加有兴趣,那么来这里瞧瞧《18个读取进度条的优秀设计案例》

Loading 也是一门学问,如何让用户等待加载时不烦还高兴,蓝蓝设计推荐您可以看看这篇:《谈谈加载(LOADING)的那点事》,绝对从细节处提升用户体验 ^_^

Progress by yasir wadood

Progress by yasir wadood in 40 Progress Bar Designs for Inspiration

Circular progress bar by Alexandr Ivanov

界面设计中需要注意的小细节

蓝蓝设计的小编

界面设计中的小细节

界面设计包括哪些细节、如何深入?
我们常说“细节决定成败”,有些界面会让人觉得不精致,缺细节,而这些细节又包括哪些呢?如何去深入呢?

不妨来看本文作者,百度用户界面设计师@JJ-Ying 为您娓娓道来:

  • 界面元素的对齐,我见过很多同学对齐是永远靠眼睛的。确实在布局的时候经常需要做到视觉上的对齐,而不是机械的对齐,但这不是界面元素可以随意摆放的借口,该对齐的内容需要对齐,有时候只是举手之劳,养成好习惯很重要,有点强迫症也不是坏事情。
  • 像素,虽然现在的分辨率越来越高,但是很多图标、按钮的边缘还是最好都检查一遍保证垂直和水平边缘不会被虚化。
  • 界面光源的一致性,一致性是个很大的课题,应该能写一篇论文那么长,细节方面的一致性应该包括界面元素、文字阴影、图标等的光源。假设深色的标题文字用了向下的淡色投影表现内凹效果,那正文就应该避免用深色的文字向上投深色的阴影
  • 图标面积的一致性,这也是一个一直难以避免的问题,而且有很多主观成分,最好的方法是设计的时候放到实际屏幕上以较远的距离查看,是不是有哪些会特别轻或特别重,然后再去调整尺寸
  • 文案,虽然这不是直接的界面设计元素,但是严谨、完整的文案也是给所有设计加分的。常见的问题有中文错别字、英文该大写的没大写、拼写错误等等
  • 别直接使用 Windows 自带宋体 / 黑体里的英文!!!这个不解释
  • 谨慎地使用高饱和度颜色、大差别渐变,我们 GUI 设计师总喜欢把自己当做艺术家,即使 GUI 真算艺术那也是限制最大的一门艺术(天朝的电影、电视剧不算。。。),大家大部分情况下遇到的设计场景没有非常大的颜色空间去发挥,所以一些醒目出跳的颜 色和渐变使用起来要比较小心,否则很容易产生“俗气”的感觉

推荐:扁平化界面风格的设计

蓝蓝设计的小编

http://uisdc.qiniudn.com/wp-content/uploads/2013/04/pp.jpg

什么是扁平化设计

简单的说就是抛弃那些已经流行多年的渐变、阴影、高光等拟真视觉效果,使用一些简单的纯色块,从而打造出一种看上去更“平”的界面设计。扁平风格的一个优势就在于它可以更加简单直接的将信息和事物的工作方式展示出来,减少认知障碍的产生。

下面是列举一些国外网站的例子:

Squarespace

新版的Squarespace几乎完全采用了扁平化的视觉风格,只在一些细节当中使用了相对传统的方式突出了重要的交互元素。试用一下你就会发现,其实他们的产品在功能逻辑上还是蛮复杂的,但这一切都隐含在简约直白的界面背后,你真的可以从中隐约感受到其设计团队付出的心血。

Facebook

Facebook是扁平化界面设计的绝佳案例。除了几个主要的动作按钮当中使用了轻微的斜面效果以外,其他界面元素全部采用扁平风格。鉴于他们多年来在这方面一直保持着这样的特色,至少我们可以说这种设计风格对于Facebook来说是完全适用的。

 

35套扁平化风格网页设计UI组件和图标

蓝蓝设计的小编

扁平化设计是指舍弃渐变、阴影、高光等拟物化的视觉效果,从而打造出一种看上去更加平面的界面设计风格。扁平化的网页设计更适合用于需要同时支持多种屏幕尺寸的响应式设计技术中。今天,我给大家带来35套用于扁平化设计图标设计网页设计元素,记得分享和推荐啊!

Flat Free UI Kit

Flat Icons and Web Elements for UI Design-26

我要下载

Apple devices – Flat icons (PSD)

Flat Icons and Web Elements for UI Design-1

我要下载

Mobile Flagships with PSD

Flat Icons and Web Elements for UI Design-2

元旦干货:50套高品质UI组件包下载

蓝蓝设计的小编

本帖收集了50套设计精美,并可设计师自行编辑的界面PSD源文件。内容大致包含banner切换,MP3/视频播放器,日历,表单(登录,注册,搜索…),进度条,提示框,按钮,导航,面包屑等等…不管是应用在小需求还是大项目,相信都可为你带来帮助。

 

Simple UI Elements

Simple UI Elements

 

Apple Styled UI Elements

Apple Styled UI Elements

 

Grayness UI Kit

Grayness UI Kit

 

实用!25个小清新定价界面设计

蓝蓝设计的小编

一个干货推荐啦:25个定价界面网页欣赏!没错!你没有看错,足足25个哦!啊?你问我有木有酬劳,呃!蓝蓝设计说是要给,但我肯定不会要的,虽然很想要,呃,出来混,后来还是木有要。。。)

价格界面是网页中常见的,但容易被忽视的一个部分。想想看,你什么时候见过这些界面呢?本工第一反应就是迅雷、QQ之类的会员充值界面。这种不是经常可以看见,但是又具有明确目的性的界面,如何让它和主题页面匹配、同时又突出重点信息呢?这是个问题!今天就让我们欣赏25个外国网站的定价界面,从中学习经验吧;)

1. Freshdesk

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档