首页

24个容易忽略的APP设计细节

资深UI设计者

随着移动优先的趋势,APP的设计也越来越受到公司重视,不断地提高APP的设计质量是每个设计师的追求,有哪些设计中的细节被你忽略了呢?让我们一起来看看这些细节你都把握住了吗。

视觉表现型问题

暑期干货!2017年8月前端开发者超实用干货大合集

资深UI设计者

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

在过去的几年当中,网络上所流传的各种设计和开发资源,在素质上有明显的提升。其中有一些已经几乎成为了设计师和开发者必备的工具,但是其中绝大多数由于其应用范畴的局限,或者传播不够广,导致它们大多并广为人知。将这些素材集中到一起,很大程度上是希望它们的目标用户能够明白,需要这些工具的时候,上哪儿找。

这次的前端干货合集内容也很齐全,仔细看看,总能找到几款你所需要的。

MuzzleApp

Muzzle 是之前 CodeKit 的开发者的新产品,是一款应用在macOS 平台的应用,当你和别人共享屏幕的时候,它可以帮你关闭通知和其他的私密信息,避免尴尬。无论你共享屏幕时候的平台是Skype、Google Hangouts 还是 Slack,它都能让macOS 进入“免打扰”模式。

Fractures

Fractures 是一个CSS类 合集,可以帮你快速创建网页原型。Fractures 是基于原子设计模式来构建的,样式表被分割为小段。

CSS DB

CSS DB 能为你列举出还在不断开发中的CSS特性列表以及目前的状态,让你可以更好地使用CSS选择器。

Preact

Apache 最近宣布禁止将 BSD+专利许可证分发给 ReactJS 和类似的项目,如果你的产品受到类似的专利许可证的影响,可以考虑 Preact 这样的 ReactJS替代品。

Pell

Pell 是一款用来构建所见即所得编辑器的JavaScript 库,默认情况下,它会带有常见的富文本编辑器的按钮。Pell 是使用ES6来构建,它不会像jQuery 那样需要大量的依赖库,体积小巧,可维护性强,还兼容 IE9。

Markvis

Markdown 在语法和功能上是有限制的,而Markvis 在它的基础上增加了图表的功能。

Moment PHP

Moment 是一款 PHP 库,用来处理日期和时间,类似于 Moment.js 之于 JavaScript。这个库的使用也很简单,可以快速设置时区、时间和显示方式。

Tonik

这是一款使用现代PHP来构建的Wordpress 新手主题,它充分利用了命名空间,自定义模板,自动加载器,WebPack 以及一大堆现代Web开发的优点。

Awesome Guidelines

这是一个包含了许多编程语言标准的列表,其中包含了C语言,JS,PHP,Ruby,甚至包括Visual Basic。这些标准能够帮你的代码保持简洁、干净。

BotUI

聊天机器人已经逐渐成为主流。这款 JS 库能够帮你构建对话式UI,这个库比起传统的“表单”体验更加优秀。

Reaction Commerce

开源的内容管理系统这些年变化并不大,其中绝大多数都是基于PHP来构建的。

TinyReset

这是一款非常小巧的 CSS resetter,它可以作为 Eric Meyer 所创建的reset.css的替代品。

Martinet

Martinet 是一款用来构建静态网站的命令行工具,其中包含了诸如 Webpack、TypeScript、Pug for templating、LESS和 NPM 这样的现代工具。它的存在让设计者不用担心网站配置,只需要正常使用 Martinet 就能对网站进行调整。

Billboard

BillboardJS 是一款基于 D3.js 来构建的交互式数据可视化数据库工具,它可以用来创建可视化的柱状图,饼图,折线图等。

SVGI

SVGI 是一款用来查找SVG元素和文件的命令行工具,安装它之后,你可以采用svgi 命令来检索 SVG 文档的大小、元素、层次结构和节点列表。

TimeStrap

TimeStrap 是另外一个非常实用的开源平台,它可以像 WordPress 一样可以在任何地方运行和访问的发票系统。对于喜欢自己控制而不希望使用外部服务来管理发票的用户而言,这是一个很好的选择。

Slate

Slate 是一款为API 文档创建静态网页的工具,诸如 WooCommerce、Travis-、CoinBase甚至 NASA 都采用了这一工具。

FontJoy

FontJoy 是一款能够生成大量有效字体组合的工具,点击“Generate”按钮就能生成许多新的字体组合。有趣的地方在于,这款工具还有具备深度学习的功能。

CoolHue

毫无疑问渐变色再一次回归主流,而CoolHue 是另外一款非常优秀的渐变色生成工具。

FrontPress

FrontPress 是一款前端框架,可用来控制 WP-API 和 AngularJS。如果你想创建一款用于 WordPress 的内容管理系统,可以从 FrontPress 着手。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

需求分析:我走过最长的路,就是需求的套路

资深UI设计者

作为一名产品经理,有幸逃过UI “五彩斑斓的黑”这样的千古难题,也不像开发一样面临“什么是最好的语言”这样的灵魂拷问,但世事无完美,不信抬头看,苍天饶过谁。

需求,正是这样的终极存在,他是产品经理存在的意义,也是众多套路的根源。无论是文能提笔写文档、武能调试查异常的老司机,还是熟读《梦的解析》、倒背需求层次论的学院派,和需求打交道的日子也难免“被套路”。

面对千变万化的需求,也许很难抽象出一套普适的方法论,不妨一起来看看需求分析过程中的那些常见套路,或许能有一些值得借鉴和思考。

1. 披着需求外衣的解决方案

从交互细节优化到业务流程调整,我们总会遇到这样一些需求:描述简单明了、细节清晰,几乎稍作整理就可以形成PRD、开发实施:

  • “输入框需要加长一点,保证输入内容完整可见”
  • “工单需要支持批量分配,勾选后自动显示可分配对象列表”
  • “用户注册推送新手任务提醒,引导完善资料,必填项有XXX……”

内容迁移到移动端时,用户体验优化的7个关键点

资深UI设计者

好的设计往往需要好的内容作为基础支撑。无论是内容还是设计,想要让两者最大化的搭配,往往是需要进行调整和优化才行。

当你的内容需要迁移到移动端上的时候,要怎么让内容和用户体验无缝地配合起来呢?设计师要基于小屏幕的交互来思考整个设计和优化的策略,而今天的文章,就为你分享7个设计技巧。

1、每屏完成一项任务

超实用!体验设计师如何自建知识体系?

资深UI设计者

为什么?

我们有这样的焦虑,其实是因为我们对交互知识的整个体系无法预估(事实上设计的高度非标准性也令我们无法感知整个知识体系的边界,事实上它本身也没边界),所以导致我们常常不够安心。

事实上,知识学习本身就有一条学习曲线:刚开始是成长期,随后就是平稳期,然后就进入瓶颈期,需要学得更深,否则只会一直停滞。越到瓶颈期,越不知道要学什么。

用品牌基因法做图标设计,高级UI设计师才会的手法!(实战篇)

资深UI设计者

1. 收到任务

我们每天都可能收到不同的设计任务,作为设计师,顺利的完成这些任务是我们最基本的能力,那我们今天要讲的任务是什么呢?

嘿嘿!一套天气图标。

认真的构思中…..

2. 找参考

算了,还是先看看别人都是怎么做的吧!

我找了一堆参考,随机选几个展示下,如下图(图片采集于花瓣网):

手机QQ里的注册那些事儿

资深UI设计者

QQ作为一个连接人、内容与生活的社交平台,其注册帐号将是我们产品中非常重要的一环。基于Mobile端与Pc端的区别,我们在手机版QQ的设计上要求更轻、更快、更便捷的给用户下发QQ号。目前手机版QQ的用户量覆盖率已达8亿以上,所以现有新QQ号的注册情况多为已有号码登录情况下的小号注册。所以如何帮助用户快速注册新QQ号,并且使用户在流程中获得良好的用户体验就是我们思考的问题。

1 简化流程

1)   分布注册

分步注册是什么?它指的是在注册页面上,一个页面只专注于一个信息的提交,分步骤地去让用户完成整个流程。相反,非分步注册则指的是在一个长页面上完成多个信息的填写,最终提交注册一个帐号。

选择极简主义风格做设计,不是没有道理

资深UI设计者

关于极简主义

实际上极简主义这个词在人类活动的各个领域中都被地使用着,Merriam-Webster 词典种对于它的解释是“在音乐、文学和设计领域中以极其平衡简洁而著称的一种风格或技术”。极简主义正在被越来越多的领域所接纳,其核心的特征是简约而富有意义。

作为一种视觉设计的新方向,极简主义在20世纪60年代的纽约很受欢迎,当时的新老艺术家正在探索将抽象几何元素融入绘画和雕塑艺术。相应的,极简主义在当时的诸如包豪斯运动、建构主义运动中,留下了浓墨重彩的一笔。在涉及视觉艺术的不同领域,极简主义的核心原则基本都是优雅地保留关键性的、引起观者注意力的部分。线条、形状、色彩、留白、构图等一切元素都被有效地组织起来。今天我们在生活的各个领域都可以看得到极简主义的影子:建筑、艺术、摄影、文学、音乐、UI设计,甚至食物。

可视化系统搭建 遇见大数据可视化系列文章之四

资深UI设计者

如何搭建数据可视化系统,用丰富的设计语言清晰表达复杂和庞大数据,并形成鲜明的设计风格?我们把数据可视化的元素进行拆分并建立相应的规范体系。

图表设计

1. 图表基本类型

六种基本图表涵盖了大部分图表使用场景,也是做数据可视化最常用的图表类型:

柱状图   分类照片照片什么照片什么什么项目之间的比较;

饼图   构成即部分占总体的比例;

折线图   随时间变化的趋势;

条形图   分类照片照片什么照片什么什么项目之间的比较;

散点图   相关性或分布关系;

地图   区域之间的分类照片照片什么照片什么什么比较。

基本图表类型都有通用的样式,不过多的展开讲解我们更多的考虑如何选择常用图表来呈现数据,达到数据可视化的目标基本方法:

专业科班系列!如何快速提高你的版式设计水平?

资深UI设计者

@乘与九设计:学习版式设计就是学习如何处理信息重点,因为在任何设计中,最重要的信息需要首先被注意到,然后是次要信息。下面介绍几种适用性强的区分层次的手法给大家。

在开始设计之前,关键要先梳理好哪些是重点信息,哪些是次要信息。接着就是要讲重点放在什么位置,是标题,内容,还是图片。这些信息的重点就是版式的层次结构。一旦确立好层次结构,接下来就是靠常用的视觉形式来处理即可,例如通过字距,笔画粗细,颜色,以及字体等等。方法如下:

1.  添加垂直空白空间

日历

链接

个人资料

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

存档