注重细节,提升APP气质!

本文来自互联网,114PS教程网仅作学习交流使用。发布时间:2016-04-28
本栏目刊载的经验技巧仅为提供更多信息,部分来源于网络,由本站整理发布,转载本文请注明本文地址。
教程所属栏目:
首页 > ps教程网 > 经验技巧

20150624105931733

时代总是在螺旋式地发展变化中,设计潮流也是如此。随着移动端扁平化设计推进,越来越多的设计师不满足于仅仅是色块、图标和系统字体的枯燥组合,而把更多的心思投入到精益求精的视觉设计中。从平面设计引申过来的技巧在这时起到了画龙点睛的作用:一些细节上的处理,为移动产品的界面大大地提升了品牌逼格。

例如以设计精美著称的Yahoo的两款明星App产品Yahoo Weather!Yahoo Digest。除了在产品设计上的极致和突出表现外,模糊和斜切的手法,给整个产品的品牌气质提升到了一个新的高度。 Yahoo Weather! 不论是在布局、字体和色彩的运用上都显得精致细腻,滑动时高斯模糊的处理更是流畅平滑。Yahoo Digest 的斜切突出一个“破”,在不影响照片内容的前提下,既能在视觉上显得与众不同,又在排版上巧妙地为色彩标签留了一角之地。比起一刀平,更显灵动而不失平衡感。

20150624111114372

国外的优秀案例我们已经看过很多,然而中文Apps在视觉设计上,往往与西文Apps无法相提并论。由于各种原因—例如字体的硬伤等,即使依样画葫芦也比原作逊色不少,这样的无奈给中文Apps设计师们徒增不少烦恼。但江山代有人才出,且让我们也关注一下身边,总结下近年一些新秀中文Apps如何通过细节设计,提升产品逼格。

选用符合产品气质的字体

字体是设计师的重要武器之一,恰当的字体运用,可以使产品的定位和内容的情感有加倍的表达。关于字体选择和字体与产品气质可以参考另外两篇文章,在此就不多说了。(【英文字体选择 】 / 【 字体与产品气质 】)然则让许多设计师困扰的一件事情是,不管是哪个平台,移动系统自带的中!文!字!体!实在是太少了,而且并没有什么特色。内嵌字体,成为了一些追求完美的App设计师的一个解决方案。

20150624111125794

作为一个「交流故事,沟通想法」的的写作平台App,简书为了优化阅读体验,选择了思源黑体作为内嵌字体,使用户发布的不管是简体中文、繁体中文、还是日文韩文,都能有比较理想的表现。食色的产品概念是和「生活家」们一起,发现与分享城市中的美食,所以选择了细腻精致的方正兰亭纤黑作为主要的界面字体。用户第一次使用,就能感受它与其他产品在气质上的不同。

除了内嵌简洁亲和的非衬线体之外,诸如像Lohas乐活这样小清新和强调自然生活感的产品,则会选用了田氏宋体旧字形或者方正兰亭刊宋之类的,既能体现古韵,又相当简练质感的衬线字体来表达产品定位和气质。

20150624111323230

巧用平面设计的排版技巧

俗话说,越是家常的菜式越是考验大厨的功力,譬如番茄炒蛋。越是简单的元素越是考验设计师,譬如白底黑字,或是黑底白字。而黑白配的美,我们可以从大师原研哉的作品中深切地体会到。白面之上,黑字是字也是装饰,是点也是线。通过调整体积和间隔,错落地形成画面,构造韵律。

20150624111442624

IDEAT理想家App,继承了法国IDEAT杂志的理念,以展示设计、艺术和风尚的「当代生活」内容为主。App界面上除了内容图片之外,几乎没有黑白以外的其他色彩元素。通过衬以黑底的高亮白字,既是内容又是装饰,贯穿在整个App设计元素当中;调节这些文字与其他内容之间的间距,又在排版上起到作为点,作为线,甚至作为面的不同功用。

20150624112147894

当然,如果不是内容为主的App,没有太多的排版需求的话,不妨可以像iFashion,或者又是饭本出品的精选限量美食App—ENJOY—这样,通过直接了当的黑线分割,也是不失干脆利落。

2015062411214940

20150624112150172

水印式装饰为图片加分

水印相机的成功告诉我们,用户也很喜欢用水印来提升自己图片的逼格,而像在Over这样专注于照片装饰的App里,文字水印更是能卖出个好价钱。

20150624112151436

20150624112152645

运用在产品界面上,水印式的题图也会给人眼前一亮的惊喜。「WOW!」在一款高质量画报的分享App—Big里,Big报的每一个题图都经过有针对性的水印式文字排版,力求让用户看到更大的世界,发现更多有「逼格」的内容。排版上虽然只有文字和小量装饰,字体和色彩的整体感都比较强,统一和谐显得十分大气。

20150624112153899

更吸引眼球的海报式的图文分享

除了产品本身,分享方式是让更多的不认识的用户了解产品的一个途径。如果只是一段文字配个图是不是觉得已经有点过时?海报风格的图片分享,是在信息爆炸时代抓住路人眼球的一个好方法,自然也需要更多的设计技巧。知道每日故宫App的人,敢情十有八九都不会是因为它的名字或者任何广告,而是因为它精美的分享海报。素雅而有质感的底图,配合古色古香的字体,让人惊艳的不是它反映故宫的历史感,而是透出来的一股洗练的现代气息。每日故宫传达给用户的不是一个「当年故宫」,而是「今日故宫」。

20150624112156143

此外,对于用户自己生产内容的App来说,把用户的图片和文字内容合成在一个排版好的模版里面,再分享出去,也是一个能展现设计水平的方式。天天P图的海报拼图,就是一个功能化后的海报式分享。用户将自己拍摄的照片,添加到设计好的海报模版中,可以修改相应的主题和文案,程序还能自动识别照片时间、拍摄地点,只要简单的操作就能组合出一张属于自己的海报。通过海报拼图分享出去的照片,是不仅是通过设计师设计的模版来提升用户照片逼格的成果,也是用户气质与产品气质交织后的成果。

20150624112157632

跟其他相似的海报式分享起来,专注于好友间美食推荐与分享的App夜夜,还加入了一个小心思:通过百度翻译API,将用户输入的文字,转换成繁体中文、日文、韩文以及文言文,并配用内嵌的字体—如文悦古体仿宋—展示,分享出来的图片又别有一番风味。

20150624112158955

动起来的界面更有震撼力

似乎传统设计(好吧,虽然我并不喜欢这种称呼方式)近年来风头被界面设计,尤其是移动设计大大地盖过,但如文章开头所说,设计潮流也是不断的螺旋式发展变化中。对于设计师来说,为什么而设计才是最重要的,工具和方法皆是需要贯通的。除了紧跟时代前沿的科技和设计趋势之外,回顾经典和审视生活,修炼细节,也是提炼设计概念的重要方法之一。 当然,除了平面设计的元素之外,精心策划的视频式启动页(并不是动画!)也为产品逼格增色不少,看到ENJOY启动页,以及全民K歌的启动页的时候,你是否也有被感动到呢?(点击播放)


综上所述

逼格怎么体现?就是化繁为简,以小见大。要做出效果,除了有技巧,还要有「心」。用心从细节上营造产品气质,给用户带来愉悦感,为品牌获得认同感,形成一股独有的产品气场,又有谁能说就不是一种逼格呢?秉承这样的一种想法,我们的产品天天P图自诞生日起,每一个版本都在努力地朝着营造自己的逼格的方向蜕变,未来也会贯彻精益求精的本心,带给用户更多的惊喜。

如果你也在做一款或者致力于做一款有逼格的App,欢迎来跟我们交流哦~

原文地址:腾讯ISUX

转载请注明:114教程网



用户至上的设计细节(Part 1)
0 点击  / 0 评论
利用场景找灵感!
0 点击  / 0 评论
注重细节,提升APP气质!
0 点击  / 0 评论
7步说清设计思路,搞定刁蛮客户!
0 点击  / 0 评论
APP UI动效适合何时动?
0 点击  / 0 评论
《黑x金》企鹅FM品牌24小时诞生记
0 点击  / 0 评论
12 句话带你了解 WWDC2015 全部亮
0 点击  / 0 评论
看APP设计师如何思考?(一)
0 点击  / 0 评论
网站导航全新形式:全屏菜单
0 点击  / 0 评论
网页千万不要这样设计!
0 点击  / 0 评论
为设计师而生——导航设计总结
0 点击  / 0 评论
网站导航设计的3个基本原则!
0 点击  / 0 评论
深入了解时下最APP的UI设计设计模
0 点击  / 0 评论
揭秘京东APPLE WATCH V1.0设计全过
0 点击  / 0 评论
情感化设计–暖心设计!
0 点击  / 0 评论
相关文章:


icon小教程之图标细节的绘制(ps教程)  BANNER设计应注意的细节  让页面更上档次!网页设计细节大总结  

觉得不错?顶一下!
PUSH UP
复制本文地址
COPY
最近更新:

人物皮肤修饰完全自学教程(视频教程)
9 点击  / 0 评论
所属栏目:[美容]
修图师分享 五分钟完成皮肤处理的伪商业修
3 点击  / 0 评论
所属栏目:[美容]
核心技术 教你人像后期面部精修
1 点击  / 0 评论
所属栏目:[美容]
利用计算及修复画笔快速给人像祛斑及磨皮
0 点击  / 0 评论
所属栏目:[美容]
Photoshop高低频磨皮教程
0 点击  / 0 评论
所属栏目:[美容]
商业人像大片中的发丝精细美化
1 点击  / 0 评论
所属栏目:[美容]
新手必学 用Lighroom5分钟快速编辑人像照片
7 点击  / 0 评论
所属栏目:[美容]
运用中性灰给商用人像大图精细磨皮
2 点击  / 0 评论
所属栏目:[美容]
本页全部评论共计()条    【点击查看全部评论】
您的昵称:(10个汉字以内)                      匿名
评论中不要带有网址,并且不要发布违禁词汇。字数限制在300汉字以内。
           验证码:(注意大小写) 看不清楚?请点击刷新
网友最新评论:          
  关于 栏目 栏目 联系 帮助 综合
  关于本站 入门基础 图片合成 在线留言 如何投稿 范文
  版权声明 鼠绘教程 抠图操作 联系方式 常见问题 软件资讯
  免责声明 调色方法 视频教程 本站微博   推荐问题
  本站地图 人物美容 相关素材     已解决
  Sitemap 照片处理 资源下载     待解决
    字体效果 相关经验      
    图标按钮 CS6专题      
  声明  
  114PS教程网(114ps.com)发布的所有教程信息版权归原作者所有,由本站转载的内容仅为提供更多信息,并不代表本站同意其观点。
  所有图片信息均来自网络,本站仅作学习使用,若无意冒犯,请联系本站。
  黑ICP备15009090号-1
  Copyright © 2011-2014