解密！APP界面在细节处提升气质的N个技巧

静Design · 公众号 · 设计 · 2020-01-29 17:05

正文

静电说：啊，今天已经是大年初五了。不过受肺炎疫情影响，相信各位小伙伴还是在家宅着的。但是，假期已经快过完了哦。不妨让我们热个身，开始在家学起来吧！今天咱们看看如何通过优化细节来提升UI界面的气质。虽然下面的界面感觉不是那么的“流行”，但是相信聪明的设计师会从这些设计中得到不少灵感~

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

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

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

选用符合产品气质的字体

字体是设计师的重要武器之一，恰当的字体运用，可以使产品的定位和内容的情感有加倍的表达。

然则让许多设计师困扰的一件事情是，不管是哪个平台，移动系统自带的中!文!字!体!实在是太少了，而且并没有什么特色。 内嵌字体，成为了一些追求完美的App设计师的一个解决方案。

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

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

巧用平面设计的排版技巧

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

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

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

水印式装饰为图片加分

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

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

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

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

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

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

动起来的界面更有震撼力

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

综上所述

逼格怎么体现？就是化繁为简，以小见大。要做出效果，除了有技巧，还要有「心」。用心从细节上营造产品气质，给用户带来愉悦感，为品牌获得认同感，形成一股独有的产品气场，又有谁能说就不是一种逼格呢？秉承这样的一种想法，我们的产品天天P图自诞生日起，每一个版本都在努力地朝着营造自己的逼格的方向蜕变，未来也会贯彻精益求精的本心，带给用户更多的惊喜。想学到更多提升设计的技巧和细节，不妨报名参加年后即将开课的静电的小班课程充电提升下~相信会让你获得更多灵感。

原文：http://www.sohu.com/a/24633083_188700
作者：设计风

▼

解密！APP界面在细节处提升气质的N个技巧

正文

请到「今天看啥」查看全文