在逛简书的时候,无意之间看到了这样的一篇非常有意思的app设计博文。顾25学堂的摘录了其中的一些关于移动端APP界面设计的精华。分享给25学堂的app设计师们。

当然,下面的这些app设计知识点是来自《写给大家看的设计书》这本书。有兴趣的小伙伴可以去购买看全部的。

25学堂推荐:移动端UI设计必看的三本APP设计书籍

亲密性:将界面中相关的元素组织在一起,成为一个组,让它们不被视作一堆散乱且彼此无关的片段。

如果微信的信息列表页面,每一项的名称、时间、摘要只是样式区别却未经组织,就会变得不那么容易阅读,如下(图1)。尤其在列表项很多的时候,将拥挤不堪,让人窒息。

 

图1
实际的处理方式仅仅是采用了合理的列表项间距,以及每一项当中名称、时间、摘要的分布距离,就能轻松区分出列表项、每一项中内容的关系。秩序井然,符合逻辑,保证了良好的可读性。

见下(图2)

(图2)现在这样,已经成为“理所当然”

通过组织界面元素,体现亲疏关系,保证条理清晰,不仅做设计时要注意,开发的时候也要重视。

对齐:任何元素都不能在界面中随意摆放,应该跟界面中的其他元素存在相应的视觉关系。

如果多看阅读的图书详情页面,简介信息和操作按钮随机摆放,像尚未完成的拼图零件,会让人无比烦乱(强迫症患者不要看),如下(图3)。

(图3)散乱摆放的图书信息和操作按钮

实际页面见下(图4),书名、作者、评分、价格左对齐,评分标记星星与评价人数水平方向对齐,阅读与购买、收藏与赠送等根据操作类型分组,各自在水平方向对齐。整洁的排版布局,提供流畅的视觉引导。

(图4)干净整齐的排版

通过将文字信息、操作按钮的分别对齐,来明确它们要传递的信息。一般在设计过程中,很少会出现这种混乱的情况。更多是在开发测试阶段,界面中的类似问题会比较多,尤其是不同尺寸屏幕适配的时候。

 

重复:界面中的元素、样式、空间关系等有意识地在整个产品中重复,以保持良好的一致性。

比如微信的底部功能栏,不管当前在哪个功能模块,它都以相同的风格样式、功能数量、排列顺序出现。不会因为从微信切换到通讯录,就突然多出一个或减少一个功能,或者改变排列顺序。见下(图5)

(图5)微信统一的底部功能栏

 

又比如简书,统一采用曙光色作为焦点状态;根据使用场景出现的元素,比如搜索和提醒,采用同样的样式和位置;文章列表在不同的分类下也是统一的卡片样式(白天和夜间模式卡片底色、文字颜色有区别,但是在同一个模式下,对应的样式会始终保持一致)。

(图6)简书统一的颜色和产品结构

聪明地使用重复的手法,不仅可以强化设计效果、提高信息清晰度,使用户能够快速熟悉和习惯产品,增加认同感,还可以营造成熟、稳定的产品形象。对开发来说,可以减少代码量、便于统一管理和修改。

对比:如果两个界面元素要传递的信息不完全相同,就应该在视觉上加以区别,有利于信息阅读。

如多看阅读书城分类列表的书籍信息,见下(图7)。左边的文字样式未做对比区分,虽然能够正常阅读,但是信息层级显然不如右边有对比区分的明确。左边没有字号、颜色的对比,显得呆板不够美观;右边则能够让人阅读得很轻松,并感到愉悦。

(图7)多看阅读书籍列表

手机QQ的聊天界面,见下(图8)。左边对界面中现有图形元素作了统一的样式处理,消除了对比,于是可以发现无法区分操作层级,是否可以点击也辨别不出来,并且失去重点。右边是实际界面,图形元素有样式对比,层级明确,是否可点非常明显,业务逻辑体现得充分合理。

(图8)QQ聊天界面

对比可以有效地组织界面信息,体现信息层级关系,帮助用户理解产品操作逻辑。

实际上,很少有一个设计,会只应用这四个原则中的某一个。亲密性、对齐、重复、对比,它们相互协作,服务整体效果。

以上这些移动APP设计师知识来自《写给大家看的设计书》这本书,同样来自这本书的色彩搭配知识:APP色彩搭配方案是由主色、辅助色和点缀色构成。

这本书几乎可以视为形式美法则与格式塔原理的交集设计书籍:

形式美法则:变化与统一、对称与均衡、节奏与韵律;

格式塔原理:接近性、相似性、连续性、封闭性、对称性、主体/背景、共同命运;

然后又可以促进对形式美法则与格式塔原理之间差异的理解。

以上内容来源:http://www.jianshu.com/p/616fc9395a98#  同时25学堂也非常感谢作者lkl_ue 的分享。

转自:链接

最实用的APP界面设计知识,有温度的APP设计(转)的更多相关文章

  1. APP界面设计之页面布局的22条基本原则

    移动 APP 页面布局(Layout)是我们设计 app 界面的时候,最主要的设计任务.一个 app 的好与不好,很大部分取决于移动 APP 页面布局的合理性. 下图为 APP 最原始的布局模型. 页 ...

  2. App界面设计利器Sketch 精选案例合集

    第1章 课程介绍主要介绍课程的安排及你将学到哪些使用技巧 1-1 课程介绍第2章 sketch 实例及相关工具本节课你将学到钢笔工具的使用.渐变及填充.投影的使用,体会并观察实际中物品的光影与材质:模 ...

  3. APP设计尺寸规范大全,APP界面设计新手教程【官方版】(转)

    正值25学堂一周年之际,同时站长和APP设计同仁们在群里(APP界面设计 UI设计交流群,APP界面设计⑥群 APPUI设计③群58946771 APP设计资源⑤群 386032923欢迎大家加入交流 ...

  4. APP界面设计 大概总结

    APP界面设计大概总结 首先,你得有个Android Studio 其次,你得学会有耐心的对它 最后,要适应它习惯它了解它 来看看APP的基本步骤 先有资源 再是界面布局 下来承载布局Activity ...

  5. 这5个实用技巧,教你设计出更好的App

    三年前,谷歌公司分享了一项研究:用户平均会安装36个app在手机上,但每天都使用的只有9个.据统计,只有4%的app会被使用一年以上. 所以,能运用基本用户体验设计原则来设计出更好的app,对公司大有 ...

  6. 26款能够吸引用户的 iPhone App 界面设计

    在这个移动互联网告诉的时代,众多的移动应用程序涌现出来.谁能抓住用户的注意力,谁就有可能成功.在下面这些移动 App 界面设计中,你可以看到不同创意类型的视觉效果,让你获得灵感. 您可能感兴趣的相关文 ...

  7. 20款优秀的国外 Mobile App 界面设计案例

    在下面给大家分享的移动应用程序界面设计作品中,你可以看到不同创意类型的视觉效果.如果你想获得灵感,那很有必要看看下面20个优秀用户体验的移动应用 UI 设计.想要获取更多的灵感,可以访问移动开发分类, ...

  8. 23个移动app界面上的旋钮和刻度盘设计示例

      摘要: 从最初进入电子设备领域,旋钮和刻度盘的由最初的功能性设计转变为时尚的外观设计元素,比如在移动app中.这种转变并意外,旋钮和刻度盘不需要占用移动设备的太多空间,并可以简单地为用户提供一些列 ...

  9. [UI] APP界面设计流程

    此教程从交互开始进行APP界面设计,主要是一个流程,还是值得童鞋们学习一下的.包括:1.交互流程设计:2.风格定位:3.功能icon设计:4.界面视效整体优化:5.应用icon设计.

随机推荐

  1. Expression Add Operators

    Given a string that contains only digits 0-9 and a target value, return all possibilities to add bin ...

  2. 如何使用参数 appActivity+appPackage 和 app

    本文针对RobotFrameWork中AppiumLibrary测试库. 首先,Open Application 这个方法不能向手机中安装应用,需要提前在手机中安装好,如使用 adb install ...

  3. iOS 活动图 流程图

    活动图        活动图和状态机图都被称为演化图,其区别和联系如下:       1.活动图:用于描述用例内部的活动或方法的流程,如果除去活动图中的并行活动描述以后,它就变成流程图.       ...

  4. python迭代器与iter()函数实例教程

    python迭代器与iter()函数实例教程 发布时间:2014-07-16编辑:脚本学堂 本文介绍了python迭代器与iter()函数的用法,Python 的迭代无缝地支持序列对象,而且它还允许程 ...

  5. 3.saltstack的grains和pillar学习笔记

    作者:刘耀 QQ:22102107 SaltStack_Grains Grains grains是minion第一次启动的时候采集的静态数据,可以用在salt的模块和其他组件中.其实grains在每次 ...

  6. MyEclipse8.5可用注册码(到2018年)

    转载自:http://blog.csdn.net/z123252520/article/details/45873159 Subscriber:zy Subscriber Code:mLR8ZC-85 ...

  7. 【elasticsearch】python下的使用

    有用链接: 最有用的:http://es.xiaoleilu.com/054_Query_DSL/70_Important_clauses.html 不错的博客:http://www.cnblogs. ...

  8. windows server 2008 配置安装AD 域控制器

    工作需要,搞起AD域来,具体配置如下: 配置环境 Windows版本:Windows Server 2008 R2 Enterprise Service Pack 1 系统类型: 64 位操作系统 配 ...

  9. IOS - 唯一标识符的获得和更新

    苹果公司不可能让其他人获得个人终端的唯一标识符,所以一个终端给另一个终端发送消息,必须经过苹果的APNS(Apple Push Notification Service)....而且苹果为了防止苹果用 ...

  10. mvn命令备忘

    转换成eclipse项目mvn eclipse:eclipse 跳过testmvn install -Dmaven.test.skip=true mvn clean install -DskipTes ...