APP界面如何在细节上提升气质?

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

  例如以设计精美著称的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图自诞生日起,每一个版本都在努力地朝着营造自己的逼格的方向蜕变,未来也会贯彻精益求精的本心,带给用户更多的惊喜。

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

时间: 2024-10-26 21:44:09

APP界面如何在细节上提升气质?的相关文章

App实例分析如何从设计细节上提升产品的气质(逼格)?

  注:原文标题"小处显逼格:细节提升气质",数英网对原文标题有所改动 时代总是在螺旋式地发展变化中,设计潮流也是如此.随着移动端扁平化设计推进,越来越多的设计师不满足于仅仅是色块.图标和系统字体的枯燥组合,而把更多的心思投入到精益求精的视觉设计中.从平面设计引申过来的技巧在这时起到了画龙点睛的作用:一些细节上的处理,为移动产品的界面大大地提升了品牌逼格. 例如以设计精美著称的Yahoo的两款明星App产品Yahoo Weather!和Yahoo Digest.除了在产品设计上的极致和

腾讯ipad阅读APP腾讯爱看阅读体验细节上的瑕疵

文章描述:腾讯爱看中的细节瑕疵. 腾讯爱看(icare)是腾讯旗下的一款ipad阅读APP,该APP整合了顶级媒体的热门内容,通过再次排版来创造在ipad上良好的阅读体验,并且可以和腾讯微博互动,与好友分享. 但是在其交互和产品功能中,仍有不少细节上的瑕疵,可以探讨一下,个人意见,或许不甚正确,仅作一观. 一.交互: 1.在进入APP后,选择不同的频道进入时,会有下面的这个交互 在这里,点击信封是进入频道,点击信封里的纸张是打开频道页里的栏目,这个地方对于后一个操作没有明显的提示信息,很难让人发

Android与iOS在交互细节上的区别

以下内容来自知乎,作者@MoonMonster,百度无线用户体验部交互设计师,上海MUX负责人.雷锋网已取得作者授权,而对原回答做出适当编辑排版. 本文通过了解iOS&Android这两个基本制霸移动平台的智能手机系统的交互区别(深坑),让从业者获得一些有益于开发设计的启示. 在交互细节上有哪些区别,这问题说起来估计就有难度了!事先声明,文长-- -_-' 1.导航模式 首先从导航模式开始,iOS 应用大多数情况,只提供单一的路径.无论什么样的程序,都只有一个窗口,这个窗口用于放置程序的内容和功

细节上的用户体验做到位可以决胜千里

文章描述:用户体验之路 步步惊心. 百度百科说,用户体验(User Experience,简称UE)是一种纯主观在用户使用产品过程中建立起来的感受.但是对于一个界定明确的用户群体来讲,其用户体验的共性是能够经由良好设计实验来认识到.良好的用户体验是产品的制胜之道. 现在的网站,很多大同小异,做人无我有,人有我精,基本上就是一句乌托邦式的口号,所以,大家拼不过姿势拼知识,拼不过知识拼胆识,拼不过胆识拼不要脸--总之,条条大路通罗马,成王败寇.姿势嘛就是设计,知识嘛就是内容,胆识嘛就是创意,不要脸嘛

《Android App开发入门:使用Android Studio 2.X开发环境》——第 3章 Android App界面设计 3-1 View 与 ViewGroup(Layout):组件与布局

第 3章 Android App界面设计 3-1 View与 ViewGroup(Layout):组件与布局 3-2 使用 LinearLayout建立界面布局 3-3 使用 weight属性控制组件的宽 /高 3-4 通过属性美化外观 3-5 用程序设置组件的外观属性 3-6 使用 ConstraintLayout 提升设计与执行的性能 3-7 使用 Gmail 将程序寄 3-1 View 与 ViewGroup(Layout):组件与布局

新闻类app界面设计问题,求大神解答

问题描述 新闻类app界面设计问题,求大神解答 我们需要做一款app,页面上有一个页面,类似于今日头条的新闻详细页面,上面是新闻,新闻下面是一条条评论.我的想法是一条条评论是一个Listview,那么上面的新闻内容部分通过一个head来实现吗?还是有其他的实现方式,如果不这么设计的话,那就要用scrollview 了,那用listview的意义不就没了??求大神帮忙解答 解决方案 scrollview的做法更符合自然,不是说用listview不行,而是用户体验比较怪,违反直觉.这个你不能用我怎么

为什么我的应用app图标在华为系统上绿色背景一直存在,我用的是自己的图标呀~~~~(>_<)~~~~

问题描述 为什么我的应用app图标在华为系统上绿色背景一直存在,我用的是自己的图标呀~~~~(>_<)~~~~ 解决方案 Android隐藏app应用图标Android studio隐藏app应用图标 解决方案二: 在创建android应用程序时,有设置app图标的设置界面,看样子你给图标的背景颜色设置成了绿色 解决方案三: 我也不知道 不是华为的机子啊

《iOS App界面设计创意与实践》——快速提示:iOS开发策略

快速提示:iOS开发策略 iOS App界面设计创意与实践 在我们深入iOS UI.动画和手势背后的技术之前,掌握一些基础知识很重要.对于设计师而言,虽然不要求读完本书后能够编写代码,但是有一些标准的iOS开发策略,开发者或者必须在基于iOS SDK开发中遵循,或者应该作为最佳实践来遵循.作为设计师,了解这些因素对开发人员的影响,对于理解如何设计最佳用户体验是至关重要的.作为开发人员,快速温习一下最佳实践并没有害处. 模型-视图-控制器 当谈及编码原则时,模型-视图-控制器(MVC)是最基础的.

APP界面设计就该那么美妙!

如今手机屏幕的尺寸越来越放大化,但却始终很有限,因此,在APP的界面设计中,精简是一贯的准则.这里所说的精简并不是内容上尽可能的少量,而是要 注重重点的表达.在视觉上也要 遵循用户的视觉逻辑,用户看着顺眼了,才会真正的喜欢.以下是AnyForWeb为大家精心挑选的APP界面设计,供大家欣赏评论.1.第一个案例在背景上完全没有任何的修饰成分,在色彩上也只是比较传统的使用方法,它的特别之处就在于字体的变化上.如果想把一个APP做的尽量简洁化,大多数设计师会选择 借助于简单的颜色或清晰的布局,很少设计