-
5602
浏览转载热 细节好评 提升逼格 细节处理 细节不恰 细节丰富 细节处理不恰标签释义【细节好评】文字对齐;点线面装饰性元素布局清晰;细节刻画细腻细节提升品质:如何在产品设计里小处显逼格?5602018
作者:佚名
【文章摘要】时代总是在螺旋式地发展变化中,设计潮流也是如此。随着移动端扁平化设计推进,越来越多的设计师不满足于仅仅是色块、图标和系统字体的枯燥组合,而把更多的心思投入到精益求精的视觉设计中。从平面设计引申过来的技巧在这时起到了画龙点睛的作用:一些细节上的处理,为移动产品的界面大大地提升了品牌逼格。
时代总是在螺旋式地发展变化中,设计潮流也是如此。随着移动端扁平化设计推进,越来越多的设计师不满足于仅仅是色块、图标和系统字体的枯燥组合,而把更多的心思投入到精益求精的视觉设计中。从平面设计引申过来的技巧在这时起到了画龙点睛的作用:一些细节上的处理,为移动产品的界面大大地提升了品牌逼格。
例如以设计精美著称的 Yahoo 的两款明星 App 产品 Yahoo Weather! 和 Yahoo Digest 。除了在产品设计上的极致和突出表现外,模糊和斜切的手法,给整个产品的品牌气质提升到了一个新的高度。Yahoo Weather! 不论是在布局、字体和色彩的运用上都显得精致细腻,滑动时高斯模糊的处理更是流畅平滑。Yahoo Digest 的斜切突出一个「破」,在不影响照片内容的前提下,既能在视觉上显得与众不同,又在排版上巧妙地为色彩标签留了一角之地。比起一刀平,更显灵动而不失平衡感。
国外的优秀案例我们已经看过很多,然而中文 App 在视觉设计上,往往与西文 App 无法相提并论。由于各种原因—例如字体的硬伤等,即使依样画葫芦也比原作逊色不少,这样的无奈给中文 App 设计师们徒增不少烦恼。但江山代有人才出,且让我们也关注一下身边,总结下近年一些新秀中文 App 如何通过细节设计,提升产品逼格。
选用符合产品气质的字体
字体是设计师的重要武器之一,恰当的字体运用,可以使产品的定位和内容的情感有加倍的表达。然则让许多设计师困扰的一件事情是,不管是哪个平台,移动系统自带的中! 文! 字! 体! 实在是太少了,而且并没有什么特色。内嵌字体,成为了一些追求完美的 App 设计师的一个解决方案。
作为一个「交流故事,沟通想法」的的写作平台 App, 简书 为了优化阅读体验,选择了思源黑体作为内嵌字体,使用户发布的不管是简体中文、繁体中文、还是日文韩文,都能有比较理想的表现。 食色 的产品概念是和「生活家」们一起,发现与分享城市中的美食,所以选择了细腻精致的方正兰亭纤黑作为主要的界面字体。用户第一次使用,就能感受它与其他产品在气质上的不同。
除了内嵌简洁亲和的非衬线体之外,诸如像 Lohas 乐活 这样小清新和强调自然生活感的产品,则会选用了田氏宋体旧字形或者方正兰亭刊宋之类的,既能体现古韵,又相当简练质感的衬线字体来表达产品定位和气质。
巧用平面设计的排版技巧
俗话说,越是家常的菜式越是考验大厨的功力,譬如番茄炒蛋。越是简单的元素越是考验设计师,譬如白底黑字,或是黑底白字。而黑白配的美,我们可以从大师原研哉的作品中深切地体会到。白面之上,黑字是字也是装饰,是点也是线。通过调整体积和间隔,错落地形成画面,构造韵律。
IDEAT 理想家 App,继承了法国 IDEAT 杂志的理念,以展示设计、艺术和风尚的「当代生活」内容为主。App 界面上除了内容图片之外,几乎没有黑白以外的其他色彩元素。通过衬以黑底的高亮白字,既是内容又是装饰,贯穿在整个 App 设计元素当中;调节这些文字与其他内容之间的间距,又在排版上起到作为点,作为线,甚至作为面的不同功用。
当然,如果不是内容为主的 App,没有太多的排版需求的话,不妨可以像 iFashion,或者又是饭本出品的精选限量美食 App— ENJOY —这样,通过直接了当的黑线分割,也是不失干脆利落。
水印式装饰为图片加分
水印相机 的成功告诉我们,用户也很喜欢用水印来提升自己图片的逼格,而像在 Over 这样专注于照片装饰的 App 里,文字水印更是能卖出个好价钱。
运用在产品界面上,水印式的题图也会给人眼前一亮的惊喜。「WOW!」在一款高质量画报的分享 App—Big 里。Big 报的每一个题图都经过有针对性的水印式文字排版,力求让用户看到更大的世界,发现更多有「逼格」的内容。排版上虽然只有文字和小量装饰,字体和色彩的整体感都比较强,统一和谐显得十分大气。
更吸引眼球的海报式的图文分享
除了产品本身,分享方式是让更多的不认识的用户了解产品的一个途径。如果只是一段文字配个图是不是觉得已经有点过时?海报风格的图片分享,是在信息爆炸时代抓住路人眼球的一个好方法,自然也需要更多的设计技巧。知道 每日故宫 App 的人,敢情十有八九都不会是因为它的名字或者任何广告,而是因为它精美的分享海报。素雅而有质感的底图,配合古色古香的字体,让人惊艳的不是它反映故宫的历史感,而是透出来的一股洗练的现代气息。每日故宫传达给用户的不是一个「当年故宫」,而是「今日故宫」。
此外,对于用户自己生产内容的 App 来说,把用户的图片和文字内容合成在一个排版好的模版里面,再分享出去,也是一个能展现设计水平的方式。 天天 P 图 的海报拼图,就是一个功能化后的海报式分享。用户将自己拍摄的照片,添加到设计好的海报模版中,可以修改相应的主题和文案,程序还能自动识别照片时间、拍摄地点,只要简单的操作就能组合出一张属于自己的海报。通过海报拼图分享出去的照片,是不仅是通过设计师设计的模版来提升用户照片逼格的成果,也是用户气质与产品气质交织后的成果。
跟其他相似的海报式分享起来,专注于好友间美食推荐与分享的 App 夜夜 ,还加入了一个小心思:通过百度翻译 API,将用户输入的文字,转换成繁体中文、日文、韩文以及文言文,并配用内嵌的字体—如文悦古体仿宋—展示,分享出来的图片又别有一番风味。
动起来的界面更有震撼力
似乎传统设计(好吧,虽然我并不喜欢这种称呼方式)近年来风头被界面设计,尤其是移动设计大大地盖过,但如文章开头所说,设计潮流也是不断的螺旋式发展变化中。对于设计师来说,为什么而设计才是最重要的,工具和方法皆是需要贯通的。除了紧跟时代前沿的科技和设计趋势之外,回顾经典和审视生活,修炼细节,也是提炼设计概念的重要方法之一。当然,除了平面设计的元素之外,精心策划的视频式启动页(并不是动画!)也为产品逼格增色不少。
结语
逼格怎么体现?就是化繁为简,以小见大。要做出效果,除了有技巧,还要有「心」。用心从细节上营造产品气质,给用户带来愉悦感,为品牌获得认同感,形成一股独有的产品气场,又有谁能说就不是一种逼格呢?
本文由 @云琥专家点评团_罗小蒙 转载发布于云琥在线。
推荐阅读
-
12795
浏览PS教程【PS教程】PhotoshopCC 2019版本功能更新介绍一、等比例缩放再也不用按住shift键了,默认等比例缩放,反而是要按...发起人127958143
-
7606
浏览AI2019 AI教程【AI图文教程】2019AICC版本新功能介绍一、可同时修改多个画板中的类似对象,以节省时间,无论你元素是不是...发起人76062422
-
6326
浏览15周年 感恩回馈同行十五载感恩回馈活动发起人63261442
-
6986
浏览ps 图文教程 肌理 ···【Photoshop教程】制作肌理插画教程在设计中,怎样让自己的设计更加出彩相信是不少设计师正在面临的难题。某个悠闲...发起人69861348
-
4481
浏览设计干货 设计灵感如何避免字体侵权?这31款免费可商用字体请收好最近,微博上的一个话题,让小天十分震惊。 近10年来,国内字体侵权案数量翻了10...发起人44818102