分类:设计分享

去掉IE11的叉叉

在 IE11 下,浏览器自作多情在 text input 组件上加一个 close 叉叉:

 

用CSS伪类定义:

input::-ms-clear { display: none; } 



2015年二月份免费设计资源+实用工具大合集!

CACTUS

Cactus是一款快速、免费的Mac静态网站生成器。你只需要选择页面模板(作品集、博客或是单页网站),然后就可以实时预览编辑了。

cactus

Material Design Colors

Material Design Colors是一款能够帮助你轻松呈现素材设计颜色的网页应用。只需单击任一颜色就可看到附加阴影效果,还提供hex及rgb(a)颜色代码。

materialcolors

Flake

Flakes是一款用于创建公司内部应用的开源设计及前端框架软件。其结合了CSS库、JavaScript库和设计文件以及UI设计模式。

flakes

Peplaunch

Peplaunch是一套初创公司启动服务,其中包含为期两个月的服务项目帮助你设立初创公司,找到付费客户。其服务模式是创建启动页面、向50多个相关团体进行推广,然后帮助你找到客户。费用为固定单次500美刀。

peplaunch

Evil Icons

Evil Icons是一套开源SVG图标,还附带提供多种加载指针,全部简约干净。其另外还提供支持Rails、Sinatra、Node.js、Gulp和Grunt的代码。

evilicons

Write the Docs 

Write the Docs是一套可帮助你提升项目文档编写水平的资源和信息。

writethedocs

ApplePie

ApplePie是一个用于构建优秀Web界面的模块化CSS工具包。其采用语义CSS法,并内置比较好的命名及组织约定。

applepie

UI Tiles

UI Tiles是一套用于构建网站地图和web项目视觉流程图的系统,内含72个屏幕界面。其设计典雅明快,使用简单方便,并且可以根据需求定制化。

uitiles

3D Curtain Template

3D Curtain Template是一系列能够模拟Z轴运动轨迹的分裂式板块模板,这些板块能够随着用户鼠标滚动再次聚合。

3dcurtain

Brand Style Guide Examples

Brand Style Guide Examples中的内容全部由曾经编纂风格指南示例、样式库及设计手册的Saijo George精心挑选。

brandguide

Skeleton

Skeleton是一款简单的响应式样板工具,而且体量非常小,仅有大概400来行。其入门简单快速,无需安装或汇编。

skeleton

Wonderful Client Feedback

Wonderful Client Feedback 是一个能够帮助你向客户收集高效、有用反馈的页面。其可提供网页或PDF版,是拉近你与客户关系的利器。

wonderful

Dante Editor

Dante Editor是Medium Editor的山寨版,但其拥有本体的全部功能。其使用非常简单,而且非常直观。

dante

Material Palette

Material Palette是一款素材设计调色板生成器,使用非常简单。你只需选择两种颜色,即可获得包含8色的可下载调色板。

palette

UX Check

UX Check是用于寻找实用性问题的Chrome插件。其可给你的网站另外添加一个窗口用于展示Nielsen的10项启发原则,以便你寻找问题。另外其还可提供注释工具。

uxcheck

FourZeroFour

FourZeroFour是一个Tumblr博客,其中汇集了来自互联网各地的优秀404页面。你可以查看其内容,也可以提交自己的设计作品供其挑选。

fourzerofour

Harvest Forecast

Harvest Forecast是一款用于规划团队时间的新应用。你可以按人员或项目绘制计划和视图,保证所有成员都不断片。

forecast

Snabbt.js

Snabbt.js是一个轻量级、快速的JavaScript动画库。其帧频为60fps(在移动端亦同),简化压缩后大小仅有不到4kb。

snabbt

MMXIV

MMXIV集合了2014年的一些优秀设计,编纂者是zitrusfrish。其可按月浏览,除了每月排名前三的设计,还看到设计原所在集合的内容。

mmxiv

 Dashboards by Keen IO 

Dashboards by Keen IO是一系列用于Bootstrap的响应式管理模板。其中有多种可以直接用的布局方案,还有范例以及一个初学者工具包。

dashboards

TheaterJS

TheaterJS能够模拟人类的文字输入,其中还提供多位具有独特个性的知名演员说话方式。

theater

The Design Details Podcast

The Design Details Podcast是由Bryn Jackson 和 Brian Lovin主持的全新每周节目,其主要内容是介绍一些优秀产品背后设计师的情况。

designdetails

Landing Page

这款由Creative Tim打造的免费多功能Bootstrap 启动页面是用作应用启动的不二之选。其集成简单、外观漂亮,内容丰富。

landingpage

365 Awesome Designers

365 Awesome Designers将在2015年每天推出新设计师的作品,全年不休。你可以在Twitter或者Facebook上关注他们以便了解每天的更新。另外,你也可以查看他们在2012年推荐的设计师。

201502021

Titon Toolkit 

Titon Toolkit是一套用于响应式应用的可扩展前端HTML、CSS及JavaScript UI组件。其采用移动优先原则,使用语义标记,风格灵活且代码可重复使用。

titon

Designapps.io

Designapps.io是针对应用设计的大师课程,你可以自控学习进度,并反复练习有关web和移动应用设计的技巧。

designapps

Typesettings.css

Typesettings.css是一款面向最简化网站及博客的文字模板。其类型风格以传统的图形设计基本原理为基础。

typesettings

Cabana

Cabana是一套比较淳朴但又具有现代风格的手写字体,作者是Adrien Coquet。

cabana

Besom

Besom是一套手绘的全大写字体,并提供基本的标点符号,非常适合展示使用。

besom

Retro

Retro是一套免费的全大写字体系列,其中包含无衬线及有粗截线风格,包含拉丁及希腊风格。

retro

Bruss

Bruss是一款基于手写字体刷的字型套系,作者是Aku Fadhi。

bruss

Farewell Pro

Farewell Pro是一套拥有未来感、宇宙感外观的古怪字体。

farewell

Signale

Signale是一套具有诡异几何外观的免费展示字体。

signale

Carioca

Carioca是一款可提供多颜色EPS文件的诡异字体。

carioca

Turret

Turret是一套包含72个字母,风格压抑的哥特式展示字体。

turret

原文地址:webdesignerdepot
译文地址:uec.nq

 




2015年热门趋势!初探信息可视化的流程+方法(上)

我对信息可视化的理解

由于刚开始接触,理解自然非常浅显。也许日后会有更高深的见解。目前我认为:信息可视化就是用图形正确的表现复杂的信息和逻辑关系,这样可以:

  • 通过图片特有的美观和趣味性,吸引读者
  • 通过最优表现形式,使内容更易懂
  • 拉近读者与产品的距离,提升品牌认知度

这个图忘记是在哪里看到的了,它给我留下了非常深刻的印象。这个例子通过简单的图形变化让降雨量信息一目了然。信息可视化是一门了不起的学问,需要设计者既有很好的交互意识,又要有一定的图形设计能力。

xxks2015020316

和视觉小伙伴们一起协作得出的成果

作品一:安全产品首页展示

创作灵感:从需求文档中看到这些子产品名字有御前卫、八卦阵、御城河……当时就觉得非常有意思,脑海中立刻浮现出一个古城的画面,古城周围有士兵、有八卦阵、有御城河等。跟视觉设计师表达这个想法后大家一拍即合,最终产出了这个方案。中间的城楼最开始是红色的,有点太抢眼,为了避免喧宾夺主又体现出数据被保护的感觉,就把它改成了这种半透明的、很数据化的虚拟感觉。

xxks2015020315

作品二:产品结构图

创作灵感:通过竞品分析发现国内外同行在这方面都非常下功夫,所以我们也要力求用一张图来把产品结构和关系描述清楚。下篇文章会讲具体的设计过程。

xxks2015020314

作品三:使用流程示意图

创作灵感:产品经理给出的这个图很严谨,但是对于用户来说理解起来比较困难,因此先用线框图把它简化为单向的流程图,但这样又不够美观和直观。心灵手巧的视觉设计师经过图形的美化,巧妙解决了这个问题。

原始图:

xxks2015020313

修改中(局部):

xxks2015020312

改良后:

xxks2015020311

作品四:方案描述示意图

和上个作品类似,也是先梳理信息逻辑,用更易懂的方式去表现,再通过视觉设计师美化。

原始图:

xxks2015020310

改良图:

xxks201502039

还有其它很多作品,在这里就不一一展现了。完成这些作品后,我积累了哪些经验和心得呢?

信息可视化的设计标准

要想把一件事情做好,首先要知道做好的标准是什么。在我和小伙伴们一起完善信息可视化作品的过程中,我们经历了无数的修改,把这些失败的作品放到一起,就可以大概得出失败的原因是什么,而好的标准又是什么了。

xxks201502038

这些就是我归纳总结出的四条标准,下面我就来一一解释:

xxks201502037

这个我就不多说了,地球人都能理解。

xxks201502036

信息图要美,但美不是最重要的,最重要的是更直观、清晰地传达信息。举个例子:下面这个图是我前后两版设计的信息图,内容是一样的,但形式上,哪个更好懂?

xxks20150203hb (1)xxks20150203hb (2)

很明显,右图看上去更直观、更清晰。因为同样的内容,右图用了对称的形式,理解起来省了一半力气。所以我们在设计信息图时,一定不要浅尝辄止,要努力寻找最佳方式,让信息更简明易懂。

xxks201502035

“正确”是信息图最基本的要求。信息图再好看、再易懂,但如果读者对它的理解都不正确,那这个图就没有任何的价值。

举个例子,下面这个图描述了某产品中子模块的关系。看到这个图,我以为这些子模块遵循从1到5的先后依赖关系,但实际上不是这样的。这就说明图形传达信息的方式不正确。

xxks201502034

下面要说的“一致”是比较容易被人忽略的,但它也是非常重要的一点。当你的产品有多个页面涉及信息可视化时,不考虑“一致”会让阅读者难以理解,产生混乱。

xxks201502033

既然我们保证图片表达的内容是真实的、正确的,那么就一定要考虑到事实的逻辑性。影视剧中大家总对“穿帮”镜头津津乐道,就是因为它不符合人们的真实认知,从而显得很“假”。

xxks201502032

为什么“穿帮”现象难以避免呢?

  • 因为时间、天气等原因没有一次拍完整
  • 导演突然有了新想法,在原有基础上补拍一些内容
  • 重新剪裁或重组内容

看,是不是和设计过程非常的相似?

  • 工作量太大,设计师一天完不成
  • 中间突然穿插了其它工作
  • 后面又有了新想法
  • 修改的内容过多,部分遗漏或忘记更新

因此设计“穿帮”现象也是难以避免的。比如下图,在其中一张图中,“安全产品”是用的小锁的图标,而到了另一张图中,“安全产品”变成了“安全中心”,图形也变成了盾牌形。这样就会让用户感到疑惑:这两个是一回事吗?

xxks201502031

我们在设计过程中,有很大一部分精力放在了检查和修改“穿帮”中,不要认为这是一件小事,细节决定成败!高度一致性的图形,既易懂,又提升品牌形象,更提升设计效率。符合逻辑的视觉语言设定,是信息可视化中必不可少却又容易忽略的,应该引起设计师的关注。

原文地址:blog.sina




千万别对设计师说这19句话

无论是身处设计公司,或是自由设计师,都会有那么一些话,让他们立刻炸毛。Zerouno汇总了最令设计师们“热血沸腾”的话,将它们制成饶有趣味的字体海报,一起来看看吧,看看自己有没有中枪~

不在沉默中爆发,就在沉默中灭亡。有时候,甲方们也许并不是那个意思,设计师们的语言对他们或许是一门外语。设计师们可以炸毛,也可以化抓狂为动力,爆发小宇宙,扭转乾坤,或者做做像下面这样的逗逼海报。笑一笑,十年少。

01-1

一定要超有影响力,超级突出

02-1

好啦,你是设计师,你应当知道该怎么做

03

看起来有点儿空,把所有元素都放大

04

行了吧,这弄一弄很容易,几分钟就搞定了

05

按你的想法做做看吧,我相信你

06

我把LOGO放在Word文档里给你了,能用吗?

07

嗯……你觉得这样够清楚么?放大一点吧

08

精度太低?不会啊,在我屏幕上挺清楚哒

09

我也不知道,没什么想法。你再试试其它方式吧

10

换一个更有力的颜色

11

看起来貌似有哪里不对劲,不过我不知道是什么

12

一定要有创意

13

要有夏季气息……色彩丰富

14

这是一个圣诞活动,一定要用红色

16

黑色啊?不要不要,这个颜色太苦逼了

17

粉色?不会太GAY么?

18

放张照片吧。我Facebook上有很多选择的

19

放一下LOGO,文件就在我的Facebook上

20

这个照片……加点PS特效吧

 

原文地址:doo-plus




四个不为人知的PHOTOSHOP高效操作秘籍

1、自定义快捷键

玩 ps 就好像玩 mmo 游戏,通过键盘释放技能的人 kpm 明显高于在屏幕上点点点的人。Photoshop 提供了非常丰富的快捷键并支持自定义,记住常用的快捷键可以节省大量的操作步骤,进阶级玩家还可以自定义快捷键,一键对齐、切片。

自定义快捷键:编辑->键盘快捷键或者Shift + Option + Command + K调出自定义面板。

1.1

下面推荐一些隐藏得比较深但是炒鸡实用的快捷键:

数字1〜9:选中一个图层按1〜9可以调节当前图层不透明度,如按1为10%不透明度,快速连按59为59%不透明度。

/:锁定当前图层,使之不可移动。

按住 alt 再点按当前图层的小眼睛:只显示当前图层。

shift+数值调整:在很多数值调整的情况下,按住 shift 再调整数值可以使数值以10的倍数进行增减,如 shift+方向键下,以 10px 的倍数向下移动图层。

Option + [ / ] :按照图层顺序选中所需的图层,无须鼠标左键点按。

Command + [ / ]:调整当前图层的顺序,无线鼠标拖动。

Option + Command + Shift + w:抽出资源。CC14.1的增加的一个新功能,可以自动将选中的图层导出,并支持不同的尺寸输出。

1.2

UI 设计师把复制图层样式和粘贴图层样式设置为快捷键,简直不要太酸爽。

2、录制常用的动作

看到这里,很多人估计会说,动作我知道,我也会用,我还看你这文干嘛。且慢,客官请听我一一道来。

打开窗口->动作->录制常用动作,并定制功能键。我这里是 F1+Shift+Command(为什么是这个快捷键,请看下去)。

2.1

下面推荐一些较为实用的动作:

下(上下左右)移30像素: 强迫症及 UI 设计师必备。可以在不借助分割线和标尺的前提下快速使图层进行精确的位移(这里我按了刚才的快捷键,快速下移50像素)

2.2

保存 jpg 或者 png 到指定路径: 在改稿过程中经常会遇到需要频繁输出图片发给奇特审美甲方看的时候或者需要对大量 psd 输出图片时,有了这个动作会方便很多。

导出选中图层(切图): 执行动作即可导出选中图层,cc 14.1 以前的版本可前往这里下载,cc 14.1 用户可直接在图层邮件->抽出资源,无须录制动作。

2.3

定制完常用动作并设置好相应的快捷键后,如果以上这些还不能满足你,可以参考下本人变态的鼠标设置(其实一开始是买着鼠标来玩 lol 的)。

2.4

3、快速选择图层

我们经常会遇到这样的情况,在上百个图层中寻找一个图层,却找不到图层列表中这个图层的位置,其实,按住 command 再拖动鼠标,可直接选中拖动区域的图层。

3.1

如果觉得麻烦的话,还可以直接打开下面的开关,也有同样的效果。

3.2

妈妈再也不用担心我打开别人的 psd 没办法在那堆阿西吧的图层垃圾堆中找到自己想要的图层啦。

4、保存历史记录快照

作为常年被产经“上上下下左左右右 ABAB”调整设计稿的人,改了老半天给老子来一句,“算了,改回刚才那个吧。”这时候历史记录里面找不到之前的设计,只能苦逼地重做一遍。为了更方便改稿,历史记录快照是一个利器。首先,建议将 ps 里面的历史记录数量调整为200,仅仅20个完全是不够用的。

4.1

然后,每做完一个比较重要的调整之后,点击历史记录中的创建新快照(相机图标)进行记录。此后需要跳回之前的版本,直接在快照中选取,不用不停地 command ctrl + z 撤销操作了。

4.2

原文地址:bigertech
作者:@笔戈科技




2015年至关重要的四种排版趋势

分割屏幕

在这类中,我们精选的网站都用了垂直分隔线来分割屏幕。可能这么做有很多原因,通过研究大量此类案例,我发现主要有两点。

原因之一,有时候在一套设计中,的确存在两个同等重要的主体元素。网页设计的通常方法,是按照重要性给内容排序。然后重要性会体现在设计的层次和结构上。但是假如你就是要推广两样东西呢?这种方式,可以让你突出两者,并让用户迅速在其中做出选择。

原因之二,有时你要表现出一种重要的两重性。以Eight and Four网站为例。他们在此要表达的是,他们的核心竞争力来自植根数字领域,还有多才多艺的员工。这两点成就了他们。通过屏幕分割来表现这一点,是种令人愉快的方式。

Eightandfour

kec2015012520

Carelpiethein

kec2015012519

Deweyspizza

kec2015012517

Fian.my.id

kec2015012518

Pomopizzeria

kec2015012516

去界面化!

网页设计中的主要元素之一,就是容器元素:方块、边框、形状和所有类型的容器,用于将内容从页面中分离开。想象一个古板的页头,元素刚好容纳其中,与内容分隔开。如今的一项普遍趋势,就是去除所有这些额外的界面元素。

这是种极简主义的方式,但它更进一步,带来一些有趣的转变。

Br-time

kec2015012514

在这个例子中,他们把页头和页尾的概念统统去掉了。反而更像一个交互式杂货摊。从左向右的排列,就基本完成了内容层次的排布,有助于让排版更加直观。用于分隔导航和内容的界面就不需要了。取而代之的是漂亮的产品惊艳全场。

Foreword

kec2015012515

可以发现,移除任何感官上的页头和页尾后,内容得到了极大的强调。你会先看到公司名称,然后是关于他们经营内容(和场所)的清晰描述,而不是先看到页头。之后才是主导航。让用户浏览之前先重点强调品牌,这个方式太棒了!它造就了优美的视觉流程。有趣的是,当你滚动页面时,页头和界面才出现。美观且有效的排版,这种模式的运用颇具启迪性。

Harvardartmuseums

kec2015012513

Voiceshavepower

kec2015012512

Drurybuildings

kec2015012511

基于模块或网格

接下来这些排版方式,建立在模块化或类似网格的结构上。在这些设计中,每个模块都力图根据屏幕尺寸伸缩调整。实际上这并不是什么新的方式,不过响应式网页设计让它变得更加有用。它暗示了一种自适应布局模式,可以像搭积木一样,由各种模块组件创建而成。

Teambadcompanyrowing

kec2015012510

这个案例完美地诠释了这一点。整个设计都是响应式的。随着屏幕尺寸变化,每个模块都改变尺寸来适应空间。均匀划分屏幕使得设计更易于适应。他们还(在大屏幕尺寸中)引入一些元素来打破模块界限的束缚,这是画龙点睛之笔。

Madagascar.dreamworks

kec201501259

这个案例更加激进。当然,它也包含了模块化的方式,让他们能够根据需要轻松增减内容。但此处还有一个重要的设计元素在发挥作用,之前的案例是没有的。模块通过尺寸变化,来反映其重要程度和在各层级中的地位。这类模块化的布局方式存在一种风险,它使每样东西尺寸都相同,这意味着无法强调任何事物。相反,这个案例还是清晰地突出了主要元素。

Plfixtures

kec201501258

Guide.residence-mixte

kec201501257

Tevko

kec201501256

一屏以内

最后,还有一些网站采用这样的方式,让设计完全在一屏内展现。这是响应式设计的一个分支,因为它会适应屏幕尺寸。不过在这个绝佳案例中,整个设计的适应方式完完全全吻合屏幕,没有产生滚动条。没有滚动,意味着内容必须极度聚焦,而且要建立清晰的内容层次。我发现这些网站的聚焦能力和清晰程度,令人耳目一新。

Hatchcollective

kec201501254

Shamballajewels

kec201501255

Erikfischer

kec201501252

Twinpics

kec201501253

Nikolaylechev

kec201501251

结论

虽然我把这几种趋势分开讲,但其实他们都表现为积木块的形式。这些积木可以通过很多不同方式组合。事实上,本文中展示的很多案例,都可以放在我们讨论过的其他几个分类中。现代网页的布局如此多样化,而且确实合乎使用,造就了如此激动人心的互联网媒体。

 

原文地址:webdesignerdepot
译文地址:colachan
译者:@十萬個為什麽




怎么用隐喻设计引导用户?

案例一:

我一个朋友,做天猫。很多店铺首页都有那种轮播的广告图,大家应该都有印象吧。就是下图这样的。

他的店铺,首屏有 4 幅广告轮播图,可是第四幅图基本没有点击。说实话,4 幅图的数量确实有点点多,但绝对不至于多到后面的图没人点。

我只看了一眼,就发现问题出现在哪了。于是,朋友按照我的意见将图做了修改,结果效果立竿见影。

大家仔细看看我到底让他做了哪些改变?其实很简单对不对?就是暗示性的告知用户,这个轮播共有几张,以及你在看第几张。

案例二:

还是我的这个朋友,还是他的店铺,依旧是点击率的问题。

在他的店铺内,消费者可以先领取代金券,再拿代金券去消费。可他店铺代金券的领取率非常低,由于很少人领券,所以导致客户觉得不划算,又进而直接的影响到店内的销售情况。所以,这个看似很细节的小问题,让我那朋友很头痛。

大家仔细看看我到底让他做了哪些改变?其实很简单对不对?就是告知用户,这张图片是可以点击的。

接下来,其实我们可以将这种暗示做得更细化一些。

通过拟物的方式,告知用户,这代金券可以像游戏机的奖券一样,是可以被撕去,领取的。

以上第一个方面的内容其实很简单对不对?

可是越简单的东西其实却是最难的。

因为越是基础的,反而越容易被人忽略。

恩,好了,接下来,就是有关引导客户设计的第二个方面了。

第二:不要以为设计就是玩玩图形与色彩的把戏,心理学在其中也是很重要的。

同样,我还是以我这位朋友来举例。怎么样,当我朋友好处很多吧!

这次,我帮他解决的问题,是页面停留时间的问题。

买家在页面的停留时间会影响产品的转化率,这一点我相信大家都明白。不是说要你把页面做的有多么长,而是要你做的说的每一句话,消费者都看完了,这才是最关键的。那么,如何引导用户耐心仔细的看完页面呢?

我帮他做了这样几件事。

第一件事:

上图,是他店内原有的标签栏,很中规中矩的,对不对?很多店铺都是这样的。

而下图,是我帮他调整过后的标签栏。不要小看这细微的改动,修改后的页面,买家的停留时间直线上升。

或许会有很多人看不懂我这样做的目的。

在常规的传统纸质的平面设计中,很多设计师习惯偏上的构图方式,的确,偏上的构图方式会让画面更加的充满积极向上的情绪,而且也更加符合人的视觉习惯。但是,人,要懂得因地制宜和变通。

在此处,我刻意的用向下的箭头来暗示访问者,向下拉动可以看到更多的内容。

第二件事:

我让他的页面变得更有节奏。

上图,是他原有页面布局。中规中矩。不犯错。但缺点是容易产生视觉疲劳,让人觉得乏味。

而下图,是我帮他调整过后的页面。你们一定不会知道,为了每一个页面,甚至每一张图的尺寸、间距,我和我的团队会做多少次的情景演练。我们会测试不同浏览速度,用户会看到哪些内容,会首先看到什么,然后再做反复的修改和调整。

问题是「怎样用」,而不是「有哪些」,所以就不做更多举例说明了,希望对你有帮助。

总结:

一:不要忽视最基础的细节,把用户当作一个无知的孩子去对待,别让 ta 们动脑子,在 ta 们动脑子前,就把 ta 们想知道的告诉给 ta 们。

二:用空杯的心态学习心理学,不要以为自己什么都懂,不要以为别人都和你一样,抛弃所有简单粗暴对事物用美与丑的评价。润物细无声的引导 ta 们。

 

原文地址:zhihu
作者:@-eno-one-




全方位科普常用的字体规范

这几天有人问我说:“最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学点直接能拿来用的,这个要求过分吗……”

这个,好吧,那就直接说说能用的知识:字体字号。

也许你会说:字体字号?也太Low了吧,这个谁不知道重要呀。

对于这个问题,我想说:会和熟练,是两回事。一个App,不同部分的字体字号你能准确地说出来吗?

很多刚做APP界面的设计师,经常会因为字号,字体颜色,间距而困扰。

拿到设计需求后,开始进行设计,不知道从何去调整界面的字号和行间距等。容易碰到的问题是页面和页面的字号调着调着就大小或颜色不统一了。并且容易导致设计稿反复得修改。设计出来的效果图文字左右间距层次不齐,导致与预期不符等。

这小节我将和大家理一理界面中常用的字体,字号,字体颜色及间距对齐的一些小经验。希望能对大家有些帮助。

一、成也字,败也字

在设计师的职业生涯中,至少一次甚至多次在工作中因为字体不协调栽跟头。在实践的过程中我们会慢慢发现一些规律或者经验规范。接下来我将和大家一起聊聊在界面设计中的那些常规字体的使用规范。

我们常常会听到,这也太LOW了吧!!你能统一一下字体吗?

不明确而繁琐的字体搭配会导致整个画面失调。可以这样说,字体可以成就设计也可以毁掉设计。

m_c58b54bca2660000012a8967f6d3

问题的关键有:

  1. 字体样式太多,导致页面杂乱
  2. 使用的字体不易识别
  3. 字体样式和内容的气氛或规范不匹配

怎么避免这样的结果发生呢?

通过设计经验可以帮助你做出更好的版式,了解不同平台的常用字体设计规范。

在每个项目设计中只使用1-2个字体样式,而在品牌字有明确的规范的情况下,只需要一种字体贯穿全文,通过对字体放大来强调重点文案。字体用的太多,越显得不够专业。

不同的样式的字体,形状或系列最好相同,保证字体风格的一致性。

字体与背景的层次要分明,确保字体样式与色调气氛相匹配

二、界面中文字使用的规则

在不同平台的界面设计中规范的字体会有不同,像移动界面的设计就会有固定的字体样式。网页中会有常用的几个字体,在这我和大家分别介绍一下。

以下是在72像素/英寸下的规范

移动端常规字体

IOS:常选择华文黑体或者冬青黑体,尤其是冬青黑体效果最好。

Android

英文字体:Roboto

中文字体:Noto

移动端常用的的字号有哪些呢?

导航主标题字号:40-42px

我一般设计就用40px,偏小的40px字号,显得精致些。

在内文展示中字号大小又是多大呢?

大的正文字号32px,副文是26px,小字20px。在内文的使用中,根据不同类型的App会有所区别。

像新闻类的APP或文字阅读类的APP更注重文本的阅读便捷性,正文字号36px,会选择性的加粗。

而列表形式、工具化的APP普遍是正文32px,不加粗。副文案26px,小字20px

26px的字号还会用于划分类别的提示文案,因为这样的文字希望用户阅读,但不要抢过主列表信息的引导。

36px的字号还经常运用在页面的大按钮中。为了拉开按钮的层次,同时加强按钮引导性,选用了稍大号的字体。

(见下图中的退出按钮)

大家注意了,在选用字体大小的时候一定要选择偶数的字号,因为在开发界面的时候,字号大小换算是要除以二的。这个详细缘由大家可以网上查询,我就不在这一一的介绍了。

常用字号的大小基本就这几个,根据版式设计需要也会采用异样大小的字号来特殊处理。这种更高的要求设计师的全局把控能力了。

网页端

常用的字号有哪些呢?

网页中文字字号一般都是宋体12px或14px(无状态),大号字体用微软雅黑或黑体。大号字体是18px、20px、26px、30px,一般使用双数字号,单数的字体在显示的时候会有毛边。

常用的字体:

1. 平平稳稳:微软雅黑/方正中黑

微软雅黑系列:在网页设计中这款字体使用的非常平凡,这款只无论是放大还是缩小,形体都非常的规整舒服。在设计过程中建议多使用雅黑,大标题用加粗字体,正文用常规字体。

方正正中黑系列

中黑系列的字体笔画比较锐利而浑厚,一般运用在标题文字中。但这种字体不适用于正文中,因为边缘相对比较的复杂,文字一多会影响用户的阅读。

2. 与时俱进:方正兰亭系列

方正兰亭系列:个人最推荐的就是这个系类的字体,整个兰亭系列的字体有大黑、准黑、纤黑、超细黑等。因笔画清晰简洁,这个系类的字体就足以满足排版设计的需要。可以通过对这个系列的不同字体进行组合,不仅能保证字体的统一感,还能很好的区分出文本的层次。

3. 刚劲有力,运动型:汉仪菱心简/造字工房力黑/造字工房劲黑

在这几个字体中,他们有着共同的特点,字体非常的有力而厚实。基本都是以直线和斜线为主。适合广告和专题使用。在使用这类字体的时候我们可以使用字体倾斜的样式,让文字显得更为活力。在这三种字体中,菱心和造字工房力黑在笔画、拐角的地方采用了圆和圆角。而且笔画也比较的疏松,更多的有些时尚而柔美的气氛。而劲黑这款字体相对更为厚重和方正。这类字体使用在大图中偏多,效果比较突出。

毛笔字生成器

通过自由的书法网站在线生成。在网址中输入文本,再进行选择书法字体样式。通过这种方法我们能很快的找到需要的书法字体。这招非常管用。

推荐大家几个毛笔字相关的网站:

和大家简单操作一下毛笔字的使用方法。

将下载下来的字体图片AI转路径,编辑文字。

首先使用在线生成器输入选择好你需要的文字字形,将文字图片拖至AI中。

选中拉入图片,点击[图像描摹]

然后继续点击[扩展]按钮

扩展完毕后,图片已经都变成了路径。

使用魔棒选择颜色就可以将文字的路径提选出来。

最后经过设计后的Banner效果,这就是我经常用的Banner风格,你们也试试吧。

重要提示,怎么找不认识的字体名称?

很多朋友会看到别人使用的字体非常好看,但又不知道是什么字体。在这我告诉你一个方法。可以通过网络上传字体图片进行搜索字体名称。相关神器地址:《还在问“这是什么字体?”四款神器帮到你!》

三、常用字体颜色

字体颜色又有哪些常用的颜色呢?

在界面中的文字分为三个层级,主文、副文、提示文案等。

在白色的背景下,字体的颜色层次其实就是黑、深灰、灰色。

常用的色值是#333333;#666666;#999999

在界面中还经常会用到背景色#eeeeee。
分割线则采用#e5e5e5或#cccccc的颜色值,一个深一些,一个浅一些。这个会更具不同的软件风格采用不同的深浅,由设计自己把控。

在我们做设计的时候,字体和图库均是有版权的,请注意合法使用。

投稿者:@Micu设计




传奇设计公司TEEHAN+LAX的UI工具合集

作为一个拥有诸多国际大客户的设计工作室,Teehan+Lax团队在圈内声名远播。但是真正让一线的UI设计师们都听说他们,还是在2008年他们开始对外发布高品质的iOS系统的PSD UI Kit之后。

2008年的时候,我们发布了第一套iOS系统的PSD UI Kit。随后,我们坚持不懈地制作PSD并发布,直到今天,这不仅仅是因为我们自己觉得它好用,无数的设计师同行也从中获益。在过去的几年里,这些PSD已经被无数次下载。在此我得感谢一下整个设计产业和这个时代,是它们让我们拥有了今天的一切,也让我每一次发布PSD的时候都由衷地感到骄傲。

2002年成立至今,Teehan+Lax有着超过12年的历史,公司位于多伦多。他们曾服务过加拿大著名的Bell集团,还参与过稍后读应用Readability的设计,也同Facebook一同设计过广告平台。也正式同Facebook的这次合作,促使了Teehan+Lax的三位创始人决定带着核心团队成员加入Facebook。

在 Facebook 要做的事、共事的人和面对的挑战都太有吸引力了,我们实在很难说“不”。

属于他们的新征程,要开始了。正如三位创始人在Teehan+Lax的公司首页的文章说明中所说,过去12年里,Teehan+Lax帮他们实现了最初的想法,接下来他们会在Facebook平台之上设计出更伟大的产品,作为顶尖设计团队的一员,创造历史。

UI工具合集下载戳这里:http://vdisk.weibo.com/s/zduirFgzU2FnQ

Palm Pre webOS GUI PSD

最终更新日期:2009年7月9日

iPhone Sketch Elements

最终更新日期:2010年5月17日

iPad Sketch Elements

最终更新日期:2010年12月1日

Android 2.3.4 GUI PSD

最终更新日期:2011年7月27日

iOS 5 iPhone PSD

最终更新日期:2010年6月14日

iOS 5.1 iPad PSD

iPad1-small

最终更新日期:2012年4月12日

iOS 6 iPhone PSD

最终更新日期:2012年10月12日

iPad iOS7 GUI PSD

最终更新日期:2013年11月13日

iPad iOS7 GUI for Sketch

ipad-sketch1-small ipad-sketch3-small

最终更新日期:2013年11月7日

iPhone iOS7 GUI PSD

最终更新日期:2013年10月29日

iPhone iOS7 GUI for Sketch

iphone-sketch1-small

最终更新日期:2013年11月7日

iPhone 6 iOS 8 GUI PSD

iPhone1-small iPhone2-small iPhone3-small iPhone4-small iPhone5-small

最终更新日期:2014年10月14日

iPhone 6 iOS 8 GUI for Sketch

iPhone1-small iPhone2-small iPhone3-sketch-small iPhone4-small iPhone5-small

网站首页:Teehan+Lax
作者:@陈子木




字体教程还能这么玩!聊聊文字的性取向

道石 :在许久许久以前,在我胸口还挂着用某英雄鲜血染红的物件的时候,就听妈妈跟我说过字如其人这个词,大致的意思就是要让我把字练好,不然以后大家一看字就觉得我这个家伙不着调,取不着媳妇儿。其实妈妈要表达的意思是说,这字啊,就跟人的性格一样。

但是不知道怎么回事,我一直不太容易把字儿跟人的性格挂上钩,反而总是容易因为字联系到人的外形特征。比如我突然看到一篇字迹柔美、清新淡雅、隽永纤细的文字,我下意识会觉得这字的主人应该是个清秀甜美的软妹子。而当我身边某个长相粗狂、胡子拉扎、偶尔还健身的中年猛男子提起笔准备写字的时候,我就预感他会写下一手强健有力,棱角分明,甚至还有些不规则的文字。

为什么我会有这样的感觉呢?这种感觉到底是如何形成的?我觉得是由我们汉字的先天属性决定的。众所周知,汉字最早的起源是甲骨文,它是一种象形文字。换句话说,文字的起源本来就是图画,图画简化成为符号,符号再经过千百年的演变,变成了现在的文字。

3

文字对于我们来说,本源还是一种图形,所以我们通过文字联想到外形特征是再正常不过了。我们对于人的字迹的预判,其实是我们把这个人的外形特征(尤其脸部特征)移植到了文字上。

我们来看一个具体的例子好了,首先,我们印象中的正常男性是长什么样的?

5

他们都有着粗而硬直的眉毛,大而笔挺的鼻梁,坚硬的眼脸,棱角分明的脸部轮廓,有的甚至有一些刀刻般硬朗的皱纹。再看个小图例:

6

上图是两名我们团队的长发美男设计师,其中一位让大家觉得阳气逼人,而另一位经常被人戏称为炮娘。究其原因,就是男性的图形化特征多和少的缘故。这些图形化特征,我们可以用下面一些词语来形容:

7

所以关于男性的一些图形化的表现手法肯定也会具备这些特征,下图是美日港的不同的漫画男性,都具备我们提到的这些关键词的特征。

8 9

这种图形特征一样可以沿用到文字的上,只要具备粗犷、坚硬、强劲有力、拐角分明、力量感等等图形特征的文字就是男性化的文字。比如下面这款字体,就具备这些特征:

10

还有下面推荐的这些字体,实际上都具备我们所提到这些图形特征,它们都是性取向为男性的字体。

11

当然推荐的这几款字体并不完整,它们只是属于我自己平时觉得比较好看,使用比较多的而已,其他的具有我们提到的这些图形特征也是属于男性化的,大家可以自己举一反三进行使用。

现在知道了什么类型的字体是男性化的字体,那么它们应该如何使用呢?男性化的字体会大量使用在以男性为主流从业人群或者以男性为消费群体的类型的设计中,这样会使得整个设计的男性化气息更加浓烈,起到壹加壹大于二的效果。比如今年在巴西举办的世界杯,足球是一项以男性为主的体育运动,所有在关于世界杯的相关设计中,基本清一色都是这种男性风格的字体。

12

抛开足球这单个项目,其实大部分的体育运动都会给人很激烈,雄性竞争性很强的男性化感觉,所以在大部分的体育类设计中都会大量使用男性化的字体。

13

所以,只要是男性化属性非常强,或者是以男性为主流消费群体的设计当中,都可以广泛的使用这种属性的字体。比如竞技类游戏,PK类游戏,摇滚,男性用品(车、剃须刀),金属等等…

14

还有,营销类的设计中也会非常大量的使用这种类型的字体,因为营销类通常需要给用户传递非常亢奋而激烈的情绪,这种情绪具备很强的男性化属性,大部分雄性特征都是激烈冲动且亢奋的,所以在激烈的促销和抢购等等活动类设计中,这种字体被普遍使用。

15

最后用一张图表来简单的解释一下关于男性字体的性取向问题:

16

女性

刚刚以男性化字体为具体的案例,将我们的字体性取向的观点抛出来了,后面关于女性的字体的分析,其实与上面的方法是如出一撤的。

18

上图是我们团队几个长相甜美的漂亮妹纸,她们的外形特征具有以下的一些共性。

19

而下面的几款字体,容易让我们联系到女性的外貌特征,性取向为女。

20

在使用范围上,只要是以女性为主的相关设计,都会大量的使用到女性化的字体。比如下图的女性杂志瑞丽的logo,使用的就是很典型的女性化字体。

22222

所以,只要是女性化属性非常强,或者是以女性为主流消费群体的设计,都可以广泛使用这种属性的字体。比如爱情类,鲜花类、珠宝配饰类,女性用品、护肤品、化妆品等等…

22

孩童

24

我们再来看看儿童的外形特征,不管男童还是女童在长大之前,长相其实都差不多,基本可以概括为:

25

下面的几款字体跟我们提到的这些关键字类似,容易让我们联想到儿童的外形特征。

26

所以有着这些特征的字体会被大量的应用到跟儿童相关的设计当中。比如趣味游戏、休闲游戏、婴幼产品、游乐园、零食、玩具等等…

27

中性

下面我们来讨论一个比较刺激的话题,偏中性的长相特征是怎么样的?

29

大家会发现,这些让我们觉得中性的长相,其实是兼具了男性和女性的部分图形特征。虽然说兼具了男女的图形特征,但是他们并没有某一个性别的某个图形特征特别明显(如果明显就不是中性了),他们属于中间的那个层次。用形容词总结一下他们的长相,大致是这样的:

30

下面的这几种文字,具备这种中性的图形特征。

31

所以这种类型的字体,非常适合使用在性别属性并不强、并不需要很强烈的情感特征、偏中立的一些设计上面。比如产品说明、平台、科技、手机、电脑等等。

32

更多

1、除了我们上面提到这些性取向明显的字体,其实还有很多体的性取向并不是特别的明显,比如下面这些:

34

这些文字并不太能让我们直接联想到某类人群,但是它们的整个图形结构,会让我们联想到我们的历史和过去的故事:

所以它们会被大量的使用在叙述性和陈述性很强,以及历史意味较浓的设计。比如地产公司的一些故事性包装以及一些传统节日性的设计。

36

2、每一类字形都包括很多种字体,每种字体都有细节的不同,这种细节的不同就好比人的长相一样,虽然都是男人,但是有的较为清秀适合代言男性的护肤品,而有点较为粗狂适合代言某拳击栏目,大家要根据细节属性选择最适合的字体。

37

3、并不能说男性类型的设计就一定只能用男性化的字体,用的时候用其他类型的字体进行反衬,可以起到特殊的效果。其实用同类型得字体容易让氛围更加浓烈而且统一,容易产生更强的视觉效果。

4、字体的性取向纯属自己工作那么多年来偶尔想想总结出的文章,欢迎大家拍砖斧正。

 

原文地址:alipayifed
作者:道石