iOS界面设计规范须知

  • 经验类型规范/资料
  • 经验属性原创文章
  • 经验版权署名-非商业性使用-相同方式共享
8321 13 63 2018-05-27

今天想跟大家分享一下我自己整理的iOS界面设计规范,希望对大家有帮助!

相信大家也看过不少的类似规范的这种文档。都特别长、说的特别细...在平时的工作中,我们能用到的规范尺寸其实并不多,尤其是现在APP以及H5给我们自己发挥的空间其实特别大。所以像间距、颜色什么的如果都给定死了,其实特别没必要,毕竟规范是死的,设计是活的。

所以接下来,我想跟大家分享一下我自己整理的一个比较简洁的iOS界面设计规范,希望对大家有帮助!


Image title


说明:设计稿一般采用750×1334px,因为它的调整幅度最小,方便适配。

Image title


Image title


说明:下面放了一个设计稿 (750×1334px) 的组件示意图。

Image title

Image title


Image title


iOS英文字体:SF UI    

iOS中文字体:苹方

为了确保字体在不同尺寸下的所有类型都具备可读性。

建议字号都不应该小于22px,内容样式使用34px的字号作为最大尺寸,(特殊情况除外,如标签栏图标的文字为20px;如弹窗按钮文字为36px等),字体必须为偶数。

Image title


Image title


说明:一般图标切图就切两套就可以的(@2×、@3×)

命名:模块_功能_控件_状态@2x.png

           模块_功能_控件_状态@3x.png

Image title

Image title



全部评论:13条

  • 小梓_xiaozi

    2019-04-16 08:55

    @阿里XIA: iPhone X是3倍图,上面有写

  • 阿里XIA

    2019-04-15 17:18

    设计稿(1125x2436)呢

  • 可乐可乐2511

    2018-08-24 16:26

    @小梓_xiaozi: 谢谢你了哟

  • 小梓_xiaozi

    2018-07-31 15:31

    @可乐可乐2511: 工具栏和标签栏都是指底部操作栏没错,但是工具栏是指底部没有文字,只有图标的,所以图标会大一些,比如behance。而标签栏是指文字加图标。

  • 可乐可乐2511

    2018-07-30 09:46

    小姐姐,请问您上面iPhone图标的表格里面写的标签栏图标为:66px,导航栏和工具栏图标为:75px。工具栏和标签栏不都是底部操作栏吗?怎么您写的图标大小不一样啊?求小姐姐解答。

  • 小梓_xiaozi

    2018-07-24 16:15

    @X2SA: 60px

  • X2SA

    2018-07-24 15:10

    你好,请问app store里面的大标题字号是多少呢?

  • 小梓_xiaozi

    2018-07-18 09:36

    @想的那么美: 一般icon标准尺寸是多大的,点击区域就是多大的

  • 想的那么美

    2018-07-17 17:58

    一般icon点击区域大概是多少,像返回按钮,右上角更多按钮这种

  • 小梓_xiaozi

    2018-07-02 11:47

    @177***6207: 一般app两边的边距常用的有16px、20px、24px等。很多采用8或4的倍数,app store是36px。

  • 177***6207

    2018-06-30 10:38

    我想知道这个设计的时候两边的边距一般都是多少?

  • 昆特牌

    2018-06-11 21:45

    @小梓_xiaozi: 好的 谢谢了

  • 小梓_xiaozi

    2018-06-06 14:55

    @昆特牌: 这个指的是倍率,2倍、3倍。通常我们的设计像素是开发像素的2倍,图一里面都有的。

  • 昆特牌

    2018-06-06 11:19

    2x 3x什么意思啊

更多作品

发表评论

取消

点击右上角
分享给朋友吧

分享到

取消

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票