首页

小身材,大影响。你应该知道的图标基础知识

涛涛

如今的用户界面中,图标绝对是不可或缺的元素。虽然绝大多数的图标都很小,甚至不被人注意到,但是它们帮助设计和用户解决了许多问题。图标是可用性和导航的关键,用户能够感知到图标的功用,但是只有设计师才会明白,想要让图标简约、可用还富有表现力,要耗费多少时间和精力。

乔布斯曾经说过:“细节至关重要,花费时间仔细打磨是值得的。”图标是现如今UI界面中可用性和导航体系的核心组件,所以,今天的文章,我们来仔细归纳一下常见的图标类型和它们在UI中的使用。

汉堡图标不好使?这5个替代方案帮你搞定移动端导航

涛涛

对于设计师而言,移动端设备屏幕上的每一寸空间都是宝贵的资源。为了在小屏幕上做更多的事情,设计师在设计导航系统的时候,通常需要花费更多的时间来打磨。汉堡图标在过去几年当中,是最常见的一种设计策略,导航和选项被隐藏在这个小小的图标之后,但是实际上,虽然大众已经习惯了它的存在,但是它并不是最佳的导航设计方案。

在今天的文章当中,我们会探讨为什么汉堡菜单这样的隐藏式导航影响用户体验,以及可用性更强的替代方案。

为何汉堡图标会破坏用户体验

在移动端设备上,我们看到的可见式导航其实比汉堡图标这样的隐藏式导航更多,前者大概是后者的2.5倍。

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

涛涛

1. 收到任务

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

嘿嘿!一套天气图标。

认真的构思中…..

2. 找参考

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

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

如何练习——退两小步,进一大步

用心设计

说了那么多方法论,但还是有很多同学不知道该怎么练习,怎么巩固基础,“多练多想“谁都会说,但关键是如何练?如何想?


今天菜心就来一步一步的告诉大家如何练习,需要注意什么,大纲如下:


1.细分后找到专项突破的点

2.退第一步——“放弃”原创

3.退第二步——跟着别人临摹

4.进一大步——总结规律

如何练习——退两小步,进一大步


一站式图标设计指南

用心设计

这是一篇由国外万粉dribbble大神Justas
Galaburda免费提供的图标设计指南,在国外的UI设计圈子里算是引起了不小的关注。与一些小伙伴所期待的可能不一样的一点是,这是一篇侧重于方法论方面的指南,涵盖了从设计第一枚图标开始到完成一整套图标所需要的一切,而不是一篇侧重于软件技术方面的指南。

一站式图标设计指南

这7个思路,能帮你在设计项目中用好小图标

涛涛

并不是所有的图片都能给用户带来惊艳的感觉,很多时候,图片也不足以撑起整个设计的视觉和形式感。

这个时候,图标的重要性就凸显出来了。许多有趣的图标和图片结合起来使用,能够强化图片的内容,提供额外的信息,给予用户以交互的提示,从视觉、交互、体验三个层面对设计进行提升。

终于有答案了!大家都熟悉的图标是否还需要标注上文字?

周周

新版Instagram 的UI去掉了图标下面的文字,但去掉文字的图标真的能带来更好的用户体验么?今天这篇好文通过一个简单的小实验(附测试网址),帮这个一直争议不休的话题盖棺定论,顺便聊聊图标的作用以及未来图标的发展,干货丰富,建议阅读。


隐秘而伟大!FACEBOOK 好友图标的设计改版背后的故事

博博

为了对称,我将她肩膀上的缺口补上了,但是作为一个形象剪影,她的头发太像《星球大战》中黑武士的头盔了,所以发型还需要进行一些调整。马尾辫足够现代,也非常女性化,看起来会给人年轻的感觉,但是在32像素的宽度之下,马尾辫的效果看起来像是某种啮齿动物。如果改成长发披肩或者其他的造型,在如此低的分辨率之下也难以准确表达、消除歧义。所以,最终我使用了一个更加爽利精致的短发形象。

更新完女性剪影之后,问题来了:旧的男性剪影似乎也有些僵硬而过时。于是,我调整了男性剪影的发型,令其更加平滑,让肩膀的弧度更大。在更新这个图标设计的时候,我发现Facebook的常常会用男性单人图标来表示“添加好友”。这样的设定似乎并不公平,或者说是不准确,难道所有的朋友请求都应该用男性标识来传达么?唯一的性别图标是不恰当的,所以我准备了一组。

苹果在香港获 27 项应用图标及UI设计专利

蓝蓝设计的小编

威锋网12月7日消息,根据外媒 PatentlyApple 报道称,香港专利局本周五审批通过了苹果公司递交的 27 项设计专利申请,其中主要涉及 iOS 应用的图标以及用户界面设计,而 Mac 系统新的 iBook 应用图标也包含其中。

日历

链接

个人资料

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

存档