精华内容
下载资源
问答
  • App界面设计规范-字体规范

    千次阅读 2018-04-18 22:45:00
    通过对不同类型的app进行总结,总结出app的字体规范。   一、字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方。英文字体是: San Francisco 2.Android:英文字体:Roboto,中文字体:...

    通过对不同类型的app进行总结,总结出app的字体规范。

     

    一、字体选择

    1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方。英文字体是: San Francisco

    Image title

    2.Android:英文字体:Roboto,中文字体:Noto

    Image title

     

    二、案例分析

    1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短,标题栏按钮名)为20px,头像名为28px。字体大小代表的层级关系一目了然。

     

    2.正文部分,导航栏标题文字为36px,内容标题为48px,正文为36px,小字为22-20px。

    Image title

    (因app性质不同,今日头条作为阅读类型的app,会更注重文本的阅读便捷性。所以字号选择上会偏大一些。)

     

    3.再以微信为例,导航栏标题文字为36px,内容标题文字为34px,内容为28px,辅助性说明文字为24px。

    Image title

     

    4.最后以豆果美食为例,豆果美食是我认为界面阅读很漂亮的一个app。文字阅读给人一种很精致舒服的感觉。同阅读类型的新闻app和工具类型的app在字号选择上相比,它的文字选择的要稍小一些。如导航栏的字号为30px,页面最大字号为34px(分类标题),其次是32px,28px,24px,20px

    Image title

    这是豆果美食的内容详情页,在正文标题用到了36px,正文内容为32px,次要文字为28px,其次是24px,22px,20px。

    Image title

     

    三、总结

    Image title

    总结如图,选择字体大小时应根据app的性质,风格,定位来进行选择,应通过文字大小表现出内容的轻重,层级划分,做到层级关系明显。除了对字体进行字号大小的区别,还可对文字进行样式(加重字体)和颜色的区分。

     

    (原创分享,喜欢的小伙伴儿给我点个赞吧~O(∩_∩)O谢谢)

     

    展开全文
  • 基于MVP框架,遵循Material Design设计的一款新闻阅读APP
  • App界面交互设计规范

    2015-11-18 09:21:00
    策划007-App界面交互设计规范 字数1805 阅读3544 评论20 喜欢154 交互设计规范 ...在上篇《策划006-APP界面设计风格》确定下来后,产品经理(兼交互...APP设计规范指对APP界面进行风格统一,对界面元素的样...

     

    策划007-App界面交互设计规范

    字数1805 阅读3544 评论20 

    交互设计规范

    在上篇《策划006-APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

    APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。

    APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。

    一、页面布局规范


    页面布局

    页面布局和交互规范上建议安卓、ios尽量统一,这样可以避免安卓和ios分别设计一套稿子。当然土豪公司可以忽略这个建议,安卓和ios分别做专门的设计当然更好。在中小型项目来看,设计资源紧张的话可以考虑安卓和ios用同一个稿子,分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。

    推荐使用mac矢量设计工具"sketch"。以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范:

    安卓(720*1280px):界面预览图、界面坐标图、标准界面的图标png文件

    IOS(640*1136px):界面预览图、界面坐标图、1-3倍图矢量图标pdf文件

    PS:界面坐标图指在设计已定稿的界面预览图上标注:界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等


    界面坐标图实例

    二、标准色规范


    标准色规范

    标准色规范:重要、一般、弱。标准色重要:重要颜色中一般不超过3种,这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon;而黑色用于重要级文字信息比如标题、正文等。标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。标准色较弱:普遍用于背景色和不需要显眼的边角信息。


    标准色实例

    三、标准字规范


    标准字规范

    文字是APP主要信息的表现,尤其新闻阅读、社区APP等制定标准的设计规范和良好的排版方式,用户使用APP也觉得毫无疲劳感,这一点很重要。标准字规范重要、一般、弱。这里主要规范标准字的大小,标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息。标准字重要:大字号普遍用于大标题、top导航,较小字号用在分割模块的标题上。标准字一般:主要用在大多数文字,比如正文。标准字弱:普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。


    标准字实例

    四、界面元素间距


    界面元素间距

    APP界面要给人简洁整齐,条理清晰感,依靠的就是界面元素的排版和间距设计。这里间距设计还要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距,或者固定某些界面元素的间距,让其他空间留空拉伸。为了满足屏幕分辨率较大的设备,有时甚至需要改变APP界面的页面布局。


    微信iPad版vs微信iPhone版

    五、弹层规范


    弹层规范

    弹层规范要注意分别设计安卓和ios的弹层,比如ios大多操作弹层由底部弹出,而安卓直接显示操作再页面中央,这样的交互搞作应该遵循各自平台的设计要求。弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发;提示性弹层:弱提示性的应用系统的token飘字提示即可;需要强提示可以使用取消、确定的模块弹层;更强提示而且弹层需要承载一定操作的使用强引导弹层,右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

    六、Loading规范


    Loading规范

    页面loading动画是APP界面必不可少的元素,增加loading可以给用户明确的反馈功能正在加载,减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用npc,让APP更生动、活泼;或者使用logo口号加强APP的品牌形象。


    次元社、闺蜜圈loading截图

    七、图标/按钮规范


    图标按钮规范

    图标规范要注意安卓和ios平台需求不同的大小和不同的文件格式:如安卓需要720*1280px标准页面的png图标格式;ios需要3个尺寸320*(1-3)倍图的图标pdf文件。图标还应该根据不同的功能需求设计不同的状态:如常态、选中态、点击态等。

    按钮规范按状态分有:常态、点击态、不可点击态。按钮规范因不同功能和场景需要,设计不同的样式和颜色,在尺寸上也分有:长、中、短;而且按不同手机平台长中短尺寸也注意有所不同。

    八、页面加载失败、页面为空展示


    加载失败、页面为空

    页面加载失败、页面为空可以统一规范为NPC、文案、按钮。要注意根据不同的场景显示不同的NPC和文案。

    ......

    ...

    设计规范主要由设计童鞋来梳理,但必须要与前端开发、产品经理达成共识,严格遵守约定的规范,否则这个设计规范就毫无意义了。在制定设计规范过程中,产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范,保证设计规范考虑的更切合实际、更全面、更完整。

     
    转自: 链接
    展开全文
  • 在上篇《APP界面设计风格》确定下来后,产品经理(兼...APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以...

    在上篇《APP界面设计风格》确定下来后,产品经理(兼交互设计)还不用着急将所有的交互稿扔给设计师进行细致的界面设计。在细节设计启动前,拉上设计师和安卓前端开发、ios前端开发一起商议确定设计规范先吧!

    jiaohushejiganhuo

    APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、统一,减少界面元素的重复设计;可以减少设计素材,控制安装包的大小。

    APP设计规范主要包括对界面布局、背景色、字体颜色大小、界面元素间距、弹层、loading、图标、按钮常态点击态等进行统一的梳理和规范。

    一、页面布局规范

    244174-681062d1a410283b

    页面布局

    页面布局和交互规范上建议安卓、ios尽量统一,这样可以避免安卓和ios分别设计一套稿子。当然土豪公司可以忽略这个建议,安卓和ios分别做专门的设计当然更好。在中小型项目来看,设计资源紧张的话可以考虑安卓和ios用同一个稿子,分别做相应的微调后输出适用安卓和ios不同的尺寸要求就可以。

    推荐使用mac矢量设计工具"sketch"。以ios平台的iPhone5的尺寸640*1136px作为标准尺寸设计。在界面设计完成后可以做相应的微调导出适用ios和安卓尺寸的稿子。这里可以首先统一设计稿输出规范:

    • 安卓(720*1280px):界面预览图、界面坐标图、标准界面的图标png文件
    • IOS(640*1136px):界面预览图、界面坐标图、1-3倍图矢量图标pdf文件

    PS:界面坐标图指在设计已定稿的界面预览图上标注:界面元素的间距、文字的颜色、文字的字号大小、图标的尺寸、按钮不同状态颜色、按钮的尺寸等等

    244174-6a9f0032dce8c8af

    界面坐标图实例

    二、标准色规范

    244174-dd76e93c198cce22

    标准色规范

    标准色规范:重要、一般、弱。标准色重要:重要颜色中一般不超过3种,这里的例子重要颜色之一红色需要小面积使用,用于特别需要强调和突出的文字、按钮和icon;而黑色用于重要级文字信息比如标题、正文等。标准色一般:都是相近的颜色,而且要比重要颜色弱,普遍用于普通级信息、引导词比如提示性文案或者次要的文字信息。标准色较弱:普遍用于背景色和不需要显眼的边角信息。

    244174-64832b9214e30e9c

    标准色实例

    三、标准字规范

    244174-53a10bf40b54e19b

    标准字规范

    文字是APP主要信息的表现,尤其新闻阅读、社区APP等制定标准的设计规范和良好的排版方式,用户使用APP也觉得毫无疲劳感,这一点很重要。标准字规范重要、一般、弱。这里主要规范标准字的大小,标准字要注意跟上文的标准色进行组合突出APP重要的信息和弱化次要的信息。标准字重要:大字号普遍用于大标题、top导航,较小字号用在分割模块的标题上。标准字一般:主要用在大多数文字,比如正文。标准字弱:普遍与标准色较弱组合用于辅助性文字如一些次要的文案说明。

    244174-5b6ff350de69686e

    标准字实例

    四、界面元素间距

    244174-4fe880e3fc14accb

    界面元素间距

    APP界面要给人简洁整齐,条理清晰感,依靠的就是界面元素的排版和间距设计。这里间距设计还要注意考虑适配不同的屏幕分辨率。一般解决方案有据屏幕等比放大缩小间距,或者固定某些界面元素的间距,让其他空间留空拉伸。为了满足屏幕分辨率较大的设备,有时甚至需要改变APP界面的页面布局。

    244174-4af7348becd31f74

    微信iPad版vs微信iPhone版

    五、弹层规范

    244174-5ac66478727d585e

    弹层规范

    弹层规范要注意分别设计安卓和ios的弹层,比如ios大多操作弹层由底部弹出,而安卓直接显示操作再页面中央,这样的交互搞作应该遵循各自平台的设计要求。弹层需求根据不同的功用设计不同的样式。比如操作性弹层-右上角更多按钮触发;提示性弹层:弱提示性的应用系统的token飘字提示即可;需要强提示可以使用取消、确定的模块弹层;更强提示而且弹层需要承载一定操作的使用强引导弹层,右上角提供关闭操作或者可以点击非弹层区域关闭弹层。

    六、Loading规范

    244174-446167c3ecd77e82

    Loading规范

    页面loading动画是APP界面必不可少的元素,增加loading可以给用户明确的反馈功能正在加载,减少用户在等待功能响应引起的烦躁感。另外loading动画除了常规的菊花还可以考虑使用npc,让APP更生动、活泼;或者使用logo口号加强APP的品牌形象。

    244174-8b97e8bd72060c67

    次元社、闺蜜圈loading截图

    七、图标/按钮规范

    244174-2b523bc2dc22badb

    图标按钮规范

    图标规范要注意安卓和ios平台需求不同的大小和不同的文件格式:如安卓需要720*1280px标准页面的png图标格式;ios需要3个尺寸320*(1-3)倍图的图标pdf文件。图标还应该根据不同的功能需求设计不同的状态:如常态、选中态、点击态等。

    按钮规范按状态分有:常态、点击态、不可点击态。按钮规范因不同功能和场景需要,设计不同的样式和颜色,在尺寸上也分有:长、中、短;而且按不同手机平台长中短尺寸也注意有所不同。

    八、页面加载失败、页面为空展示

    244174-ef9853634ac600b1

    加载失败、页面为空

    页面加载失败、页面为空可以统一规范为NPC、文案、按钮。要注意根据不同的场景显示不同的NPC和文案。

    ......

    ...

    设计规范主要由设计童鞋来梳理,但必须要与前端开发、产品经理达成共识,严格遵守约定的规范,否则这个设计规范就毫无意义了。在制定设计规范过程中,产品经理要积极主动充当桥梁角色组织设计师、前端开发一起制定设计规范,保证设计规范考虑的更切合实际、更全面、更完整。

    #专栏作家#

    鹰眼Eeyes,闺蜜圈产品经理,人人都是产品经理专栏作家。擅长产品策划,产品运营,项目管理。专注于移动社交方向,深度调研女性社交;关注O2O电商、智能硬件、物联网发展。厚积薄发,总结,升华中...

    本文原创发布于人人都是产品经理,未经许可,不得转载。

     

    转自:链接


    本文转自SharkBin博客园博客,原文链接:http://www.cnblogs.com/SharkBin/p/4956183.html,如需转载请自行联系原作者

    展开全文
  • app界面设计字体规范

    2017-05-18 13:42:00
    通过对不同类型的app进行总结,总结出app的字体规范。 一、字体选择 1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方。英文字体是: San Francisco 2.Android:英文字体:Roboto,中文字体:Noto ...

    通过对不同类型的app进行总结,总结出app的字体规范。

    一、字体选择

    1.IOS:苹果ios 9系统开始,系统最新的默认中文字体是:苹方。英文字体是: San Francisco

    2.Android:英文字体:Roboto,中文字体:Noto

    二、案例分析

    1.以今日头条界面为例,导航主标题字号为40px,正文标题为36px,辅助性说明文字为24px,小字(视频长短,标题栏按钮名)为20px,头像名为28px。字体大小代表的层级关系一目了然。

    2.正文部分,导航栏标题文字为36px,内容标题为48px,正文为36px,小字为22-20px。

    (因app性质不同,今日头条作为阅读类型的app,会更注重文本的阅读便捷性。所以字号选择上会偏大一些。)

    3.再以微信为例,导航栏标题文字为36px,内容标题文字为34px,内容为28px,辅助性说明文字为24px。

    4.最后以豆果美食为例,豆果美食是我认为界面阅读很漂亮的一个app界面设计。文字阅读给人一种很精致舒服的感觉。同阅读类型的新闻app和工具类型的app在字号选择上相比,它的文字选择的要稍小一些。如导航栏的字号为30px,页面最大字号为34px(分类标题),其次是32px,28px,24px,20px

    这是豆果美食的内容详情页,在正文标题用到了36px,正文内容为32px,次要文字为28px,其次是24px,22px,20px。

    三、总结

    总结如图,选择字体大小时应根据app的性质,风格,定位来进行选择,应通过文字大小表现出内容的轻重,层级划分,做到层级关系明显。除了对字体进行字号大小的区别,还可对文字进行样式(加重字体)和颜色的区分。

    转载于:https://www.cnblogs.com/hytj/p/6872932.html

    展开全文
  • 这里写目录标题前言正文一、申请新闻接口数据二、垃圾分类新闻接口请求三、轮播显示四、垃圾分类新闻列表 前言   上一篇文章中完成了图像输入进行垃圾分类,这篇文章进行主页面的UI丰富。 正文   点击天行API,...
  • 交互设计规范 在上篇《策划006-APP界面设计风格...APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少
  • APP界面设计必备,常用字体规范

    千次阅读 2017-09-19 13:00:00
    好长时间没发帖,净想过年了,过年哈,倒腾工作总结和年货是大事。 这几天有人问我说:“最近看了好多教程,都老高大上了,但是老弟我做不到呀,想学...一个App,不同部分的字体字号你能准确地说出来吗?很多刚做AP...
  • 移动端APP产品设计结构及专业术语

    千次阅读 2019-09-04 18:28:08
    在应用市场中为了帮助用户在下载之前了解 APP 功能的页面叫应用市场展示页,也能够通过优秀的 UI 设计吸引用户下载。 如图中红框内分别是苏宁易购、设计本、当当网的应用市场展示页。 3. 启动页(闪屏) APP ...
  • 产品设计APP个人信息保护指引

    千次阅读 2020-02-11 12:15:06
    调研了“手机qq”、“抖音”、“快手”、“今日头条”、“澎湃新闻”等APP,应用宝、华为、小米等应用市场审核要求。总结如下: 1.不同意,则关闭APP;必须同意才能用。有些APP只有同意按钮,无不同意按钮。 2....
  • 网页设计 App界面设计

    2019-08-27 23:44:26
    day4_网页设计 App界面设计
  • 产品经理——产品原型设计规范

    万次阅读 多人点赞 2018-08-29 14:35:42
    Briefs是Mac最新上架的专业App设计工具,提供了成熟的交互设计功能,堪称移动App上的“Axure RP”,设计师可以利用Briefs设计完整的iPhone、iPad应用交互模型,并利用模拟器即时体验设计的成果,或者利用BriefsLive...
  • 在上篇《策划006-APP界面...APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成
  • uni-app 快速入门 从零开始实现新闻资讯类跨端应用(更新中) 文章目录uni-app 快速入门 从零开始实现新闻资讯类跨端应用(更新中)一、微信小程序基础1.初始化文件目录结构2.数据绑定,条件判断、列表渲染二、uni-...
  • APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界面设计整洁、...
  • APP设计规范指对APP界面进行风格统一,对界面元素的样式、颜色和大小设定统一的规范和使用原则。与设计、前端约定好统一的设计规范很重要,约定设计规范可以减少产品、设计、前端的沟通成本;可以使界...
  • APP和服务端-架构设计(一)

    万次阅读 2017-05-07 10:27:26
    架构因人而异,不同的架构师大多会有不同的看法;...这几年,我负责研发过的App,有餐饮类的、社交类的、智能家居类的、电商类的、新闻媒体类的等等。当有了一定的经验之后,你总会有一些自己的心得体会。而以下内容就
  • App架构经验总结

    千次阅读 2016-08-08 12:09:40
    这几年,我负责研发过的App,有餐饮类的、社交类的、智能家居类的、电商类的、新闻媒体类的等等。当有了一定的经验之后,你总会有一些自己的心得体会。而以下内容就是根据我的这些经历提炼出来的关于以上几个问题...
  • 以线上生产环境来开发:代码开发及测试环节:UI标注完美还原设计图、以真实外卖APP数据做演示,以保证代码无兼容性问题。 代码规范:(1)架构设计;(2)组件抽象;(3)模块拆分;(4)代码风格统一;(5)JS变量...
  • APP演示: 摘要 5G网络就快到来了,4G网络已经基本上覆盖了,便捷的网络环境为安卓手机添加更多的精彩丰富的内容提供了良好的平台和基础。目前安卓开发正对我们的生活造成巨大的影响,我们的生活已经离不开如...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,235
精华内容 3,294
关键字:

新闻app设计规范