豆丁微信公众号
君，已阅读到文档的结尾了呢~~
一个公司的品牌视觉传达设计规范
扫扫二维码，随身浏览文档
手机或平板扫扫即可继续访问
一个公司的品牌视觉传达设计规范
举报该文档为侵权文档。
举报该文档含有违规或不良信息。
反馈该文档无法正常浏览。
举报该文档为重复文档。
推荐理由：
将文档分享至：
分享完整地址
文档地址：
粘贴到BBS或博客
flash地址：
支持嵌入FLASH地址的网站使用
html代码：
&embed src='http://www.docin.com/DocinViewer--144.swf' width='100%' height='600' type=application/x-shockwave-flash ALLOWFULLSCREEN='true' ALLOWSCRIPTACCESS='always'&&/embed&
450px*300px480px*400px650px*490px
支持嵌入HTML代码的网站使用
您的内容已经提交成功
您所提交的内容需要审核后才能发布，请您等待！
3秒自动关闭窗口242被浏览6,713分享邀请回答ued.sohu.com/ 搜狐UED 搜狗UED 携程网UED 腾讯WSD 淘UED
腾讯CDC 百度UED 百UFO
腾讯TGideas
腾讯 Flash team
网易杭州研究院UED
阿里妈妈UED
金蝶商网UED 有意思UED 天猫UED
阿里巴巴（中文站） 腾讯UED腾讯腾讯CDC
CDC(Customer Research & User Experience Design Center)腾讯用户研究与体验设计中心腾讯ISD 腾讯UED 腾讯WSD 腾讯TGideas
腾讯游戏的专业设计团队腾讯ISUX
ISUX (Internet Service User Experience)腾讯互联网用户体验设计部腾讯GDC
GDC（Game Design Center）QQ游戏设计中心腾讯ECD 百度百度UEO
UEO（User Experience Organization) 百度泛用户体验平台百度MUX
MUX(Mobile User Experience) 百度无线用户体验部。百度UED
百度商业产品用户体验部百度XDC
百度用户体验部阿里淘宝UED 阿里巴巴(中文站 )UED阿里巴巴(国际站)UED 阿里妈妈UED 口碑网UED 支付宝UED 支付宝PED PED(Product Experience Design)支付宝产品体验设计部天猫UED 天猫SED 一淘网UX 新浪新浪UED 微博UDC 新浪ChinaUED 新浪SNS梦之队 新浪UED 新浪乐居UED 网易网易UEDC
UEDC（User Experience Design Center）网易用户体验设计中心网易GUX
GUX（Game User eXperience）网易游戏用户体验中心网易杭州UED
搜狐搜狐UED 搜狗UED
搜狐焦点UED 搜狐MUED
Mobile User Experience Design 搜狐移动门户中心 用户体验团队其他盛大UED 携程UED 360奇舞团 人人FED
FED（Front End Develop and Design）爱词霸UED 金蝶友商网UED 5173UED 19楼UED 财付通TID
TID（Tenpay Innovation Design）财付通设计中心。迅雷CUED
迅雷用户体验设计中心驴妈妈UED 3G门户UED 虎扑用户体验设计工厂 第九城市UED MyEChinese UED 彩程UED 昆仑游戏UED 搜道网UED 360UXC 144 条评论分享收藏感谢收起slideshare.net/
PPT只是Presentation的工具。写得好的PPT，内容精简但不会十分丰富，并且观点一般都会直接明确但未必全面。
如果以学习知识为目的的话，PPT可以参考，但不足够。1添加评论分享收藏感谢收起创业公司设计师怎样从0到1设计一款APP（五）—UI规范整理创业公司设计师怎样从0到1设计一款APP（五）—UI规范整理金融世界的我百家号上篇文章更新到了在设计APP的过程中Hi-fi输出的一些要求，今天来说说APP的UI规范怎么整理。要求如果我们按照市面上最好的规范去整理的话是极好的一件事情。Apple公司的iOS规范和Google的Material Design的设计规范就是很好的参考案例。如果有时间，也是极力推崇大家去学学的。但创业公司不一样，公司没有那么多资源给设计师去做那么庞大的工作量。工作中，实用、省事是第一准则，怎样让开发、PM、设计都能自觉遵守这样的规范，让用户觉得产品有规有矩，值得信赖，就很棒了。UI规范的主要内容1.前言前言部分主要交代UI规范的版本号，标准页面的大小，基于哪个平台进行设计。版本号一般由PM（即产品经理）进行规定。设计稿的标准页面一般用iPhone 6S的大小，即750*1344px作为标准，因为这个屏幕大小所占市场份额最大。平台的话，大部分是Mac OS系统（不排除有少部分基于Windows，不同公司情况不一样）。2.颜色规范颜色从类型上可以分为主色，辅色，文字色三大类。而每种颜色除了需要要标注RGB的色号之外，最好标注出它的使用场景，以及在该场景下的用途。以下是楼主找的一些案例主色的种类控制在一至两种比较合适，辅色也不能过多，三到五种就足够。文字色一般分为三个层级进行设置，越高层级的颜色越深，还需要注意的是留一个反白色，方便用于深色背景下的文字信息显示。3.文字规范文字的统一有很多种方式，在此介绍一种按照用途的方法分类的形式。同样，文字需要介绍出文字的字体（如果有英文的也需要罗列一下英文字体），以及使用场景。按照用途来分，文字可以分为导航栏、列表、输入框、按钮、阅读类文字。导航栏又可以细分为顶部、底部、功能区导航栏。阅读性的文字，主要分为标题，说明文字，注释三大类，如果在偏向杂志类的APP中可能标题又可以进行细分成几级。如下案例。4.控件控件用Sketch的Symbol进行整理。不知道怎么用Sketch和Symbol的童鞋可以进行先自学一下，如果需要软件的介绍也可以给楼主留言，这部分的整理需要有一定的基础的人才能看得懂。分类用脑图的方式呈献给大家，来得更直观。5.图标图标的统一，主要是尺寸、风格，这一点在上篇文章有提到。风格上，选择填充或者选择线性。比较流行的是线性图标，一般采用3px的粗细。大小常用的有12x12px、24x24px、48x48px、64x64px、96x96px（或者100x100px）。制作参考，大伙根据需要进行调整。6.其它在有的规范里面还将主页面以页面布局的一种分类进行呈现，但在开发对照sketch文件写代码的过程中已经很仔细地在看页面，所以罗列在规范中，楼主觉得没有太大的实际用途，于是也就没有考虑。但它有它的好处，就是让团队外部人员在查看公司的视觉规范时更加完整，内容更齐全，形象更高端。文件定位不一样，内容也可以不那么相同。总结，一切从实际出发，满足某个阶段的需求。每个公司的发展阶段不一样，需求也不一样，如果你和楼主一样是打工仔，那咱们就擦亮眼睛，机灵点，认清形势再做事！Sophia的tips：有时候不是我们做不到，而是没有被逼到那个份上~相关文章《创业公司设计师怎样从0到1设计一款APP（一）——概述》作者简介：Sophia的玲珑阁，一枚爱折腾，爱健身的交互设计妹纸。职场设计技能，更多教程抢先看，请关注作者的微信公众号：Sophia的玲珑阁本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。金融世界的我百家号最近更新：简介:这里有你最想看的，你最关心的。作者最新文章相关文章创业公司设计师怎样从0到1设计一款APP（五）——UI规范整理8 months ago赞赏还没有人赞赏，快来当第一个赞赏的人吧！3收藏分享举报文章被以下专栏收录{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\u002Fpay.zhihu.com\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&&,&permission&:&COLUMN_PUBLIC&,&memberId&:,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&&,&urlToken&:&c_&,&id&:36284,&imagePath&:&v2-548a44f608b24dfe78a6e20.jpg&,&slug&:&c_&,&applyReason&:&0&,&name&:&玲珑设计&,&title&:&玲珑设计&,&url&:&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fc_&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:76,&avatar&:{&id&:&v2-548a44f608b24dfe78a6e20&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-548a44f608b24dfe78a6e20_l.jpg&,&articlesCount&:70},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ba0c9afacf_r.jpg&,&lastUpdated&:,&imagePath&:&v2-ba0c9afacf.jpg&,&permission&:&ARTICLE_PUBLIC&,&topics&:[5755],&summary&:&上篇文章更新到了在设计APP的过程中Hi-fi输出的一些要求，今天来说说APP的UI规范怎么整理。要求如果我们按照市面上最好的规范去整理的话是极好的一件事情。\u003Cb\u003EApple公司的iOS规范和Google的Material Design的设计规范就是很好的参考案例\u003C\u002Fb\u003E。如果有时间，也是极力…&,©Permission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T15:26:06+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:3227205,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&创业公司设计师怎样从0到1设计一款APP（五）——UI规范整理&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:36284,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ba0c9afacf_r.jpg&,&author&:{&bio&:&公众号：Sophia的玲珑阁&,&isFollowing&:false,&hash&:&0a2ebdff030f7c2af593e8db3be30cd4&,&uid&:287500,&isOrg&:false,&slug&:&mu-mu-mu-mu-mu-25&,&isFollowed&:false,&description&:&踏实干活的交互设计师，提供设计干货，设计类书籍读后感与总结，设计方法论等各方面的知识。微信公众号：Sophia的玲珑阁\n&,&name&:&Sophia的玲珑阁&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fmu-mu-mu-mu-mu-25&,&avatar&:{&id&:&v2-83d84f1ebc9feee54c020a&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:699040}],&title&:&创业公司设计师怎样从0到1设计一款APP（五）——UI规范整理&,&author&:&mu-mu-mu-mu-mu-25&,&content&:&\u003Cp\u003E上篇文章更新到了在设计APP的过程中Hi-fi输出的一些要求，今天来说说APP的UI规范怎么整理。\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E要求\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E如果我们按照市面上最好的规范去整理的话是极好的一件事情。\u003Cb\u003EApple公司的iOS规范和Google的Material Design的设计规范就是很好的参考案例\u003C\u002Fb\u003E。如果有时间，也是极力推崇大家去学学的。但创业公司不一样，公司没有那么多资源给设计师去做那么庞大的工作量。\u003C\u002Fp\u003E\u003Cp\u003E工作中，\u003Cb\u003E实用、省事是第一准则\u003C\u002Fb\u003E，怎样让开发、PM、设计都能自觉遵守这样的规范，让用户觉得产品有规有矩，值得信赖，就很棒了。\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003EUI规范的主要内容\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E\u003Cb\u003E1.前言\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E前言部分主要交代UI规范的\u003Cb\u003E版本号，标准页面的大小，基于哪个平台进行设计\u003C\u002Fb\u003E。版本号一般由PM（即产品经理）进行规定。设计稿的标准页面一般用iPhone 6S的大小，即750*1344px作为标准，因为这个屏幕大小所占市场份额最大。平台的话，大部分是Mac OS系统（不排除有少部分基于Windows，不同公司情况不一样）。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E2.颜色规范\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E颜色从类型上可以分为\u003Cb\u003E主色，辅色，文字色\u003C\u002Fb\u003E三大类。\u003C\u002Fp\u003E\u003Cp\u003E而每种颜色除了需要要标注RGB的色号之外，最好标注出它的使用场景，以及在该场景下的用途。以下是楼主找的一些案例\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-458627fae0dd3b08f0e1fb_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&338\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-458627fae0dd3b08f0e1fb_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='600'%20height='338'&&\u002Fsvg&\& data-rawwidth=\&600\& data-rawheight=\&338\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&600\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-458627fae0dd3b08f0e1fb_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-458627fae0dd3b08f0e1fb_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E主色的种类控制在一至两种比较合适，辅色也不能过多，三到五种就足够。文字色一般分为三个层级进行设置，越高层级的颜色越深，还需要注意的是留一个反白色，方便用于深色背景下的文字信息显示。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E3.文字规范\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E文字的统一有很多种方式，\u003Cb\u003E在此介绍一种按照用途的方法分类的形式\u003C\u002Fb\u003E。同样，文字需要介绍出文字的字体（如果有英文的也需要罗列一下英文字体），以及使用场景。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b277b79fb1dffe9c8fc2cd_b.jpg\& data-rawwidth=\&1240\& data-rawheight=\&1007\& class=\&origin_image zh-lightbox-thumb\& width=\&1240\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b277b79fb1dffe9c8fc2cd_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1240'%20height='1007'&&\u002Fsvg&\& data-rawwidth=\&1240\& data-rawheight=\&1007\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1240\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b277b79fb1dffe9c8fc2cd_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b277b79fb1dffe9c8fc2cd_b.jpg\&\u003E\u003C\u002Ffigure\u003E按照用途来分，文字可以分为\u003Cb\u003E导航栏、列表、输入框、按钮、阅读类\u003C\u002Fb\u003E\u003Cb\u003E文字\u003C\u002Fb\u003E。导航栏又可以细分为顶部、底部、功能区导航栏。阅读性的文字，主要分为标题，说明文字，注释三大类，如果在偏向杂志类的APP中可能标题又可以进行细分成几级。如下案例。\u003Cbr\u003E\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a06c921d97dec1c34aba1e592fa6d654_b.jpg\& data-rawwidth=\&1240\& data-rawheight=\&699\& class=\&origin_image zh-lightbox-thumb\& width=\&1240\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a06c921d97dec1c34aba1e592fa6d654_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1240'%20height='699'&&\u002Fsvg&\& data-rawwidth=\&1240\& data-rawheight=\&699\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1240\& data-original=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a06c921d97dec1c34aba1e592fa6d654_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic4.zhimg.com\u002Fv2-a06c921d97dec1c34aba1e592fa6d654_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-34c7a65a47ee8dbd9c9f34_b.jpg\& data-rawwidth=\&1240\& data-rawheight=\&693\& class=\&origin_image zh-lightbox-thumb\& width=\&1240\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-34c7a65a47ee8dbd9c9f34_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1240'%20height='693'&&\u002Fsvg&\& data-rawwidth=\&1240\& data-rawheight=\&693\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1240\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-34c7a65a47ee8dbd9c9f34_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-34c7a65a47ee8dbd9c9f34_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cb\u003E4.控件\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E控件用Sketch的Symbol进行整理。不知道怎么用Sketch和Symbol的童鞋可以进行先自学一下，如果需要软件的介绍也可以给楼主留言，这部分的整理需要有一定的基础的人才能看得懂。分类用脑图的方式呈献给大家，来得更直观。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-40fce3d6d3af_b.jpg\& data-rawwidth=\&1240\& data-rawheight=\&1200\& class=\&origin_image zh-lightbox-thumb\& width=\&1240\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-40fce3d6d3af_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1240'%20height='1200'&&\u002Fsvg&\& data-rawwidth=\&1240\& data-rawheight=\&1200\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1240\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-40fce3d6d3af_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-40fce3d6d3af_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E\u003Cb\u003E5.图标\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E图标的统一，主要是\u003Cb\u003E尺寸、风格\u003C\u002Fb\u003E，这一点在上篇文章有提到。风格上，选择填充或者选择线性。比较流行的是线性图标，一般采用3px的粗细。大小常用的有12x12px、24x24px、48x48px、64x64px、96x96px（或者100x100px）。制作参考，大伙根据需要进行调整。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cnoscript\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-3b5e9cded05dd622336c_b.jpg\& data-rawwidth=\&1240\& data-rawheight=\&382\& class=\&origin_image zh-lightbox-thumb\& width=\&1240\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-3b5e9cded05dd622336c_r.jpg\&\u003E\u003C\u002Fnoscript\u003E\u003Cimg src=\&data:image\u002Fsvg+utf8,&svg%20xmlns='http:\u002F\u002Fwww.w3.org\u002FFsvg'%20width='1240'%20height='382'&&\u002Fsvg&\& data-rawwidth=\&1240\& data-rawheight=\&382\& class=\&origin_image zh-lightbox-thumb lazy\& width=\&1240\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-3b5e9cded05dd622336c_r.jpg\& data-actualsrc=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-3b5e9cded05dd622336c_b.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E6.其它\u003C\u002Fp\u003E\u003Cp\u003E在有的规范里面还将主页面以页面布局的一种分类进行呈现，但在开发对照sketch文件写代码的过程中已经很仔细地在看页面，所以罗列在规范中，楼主觉得没有太大的实际用途，于是也就没有考虑。但它有它的好处，就是让团队外部人员在查看公司的视觉规范时更加完整，内容更齐全，形象更高端。文件定位不一样，内容也可以不那么相同。\u003C\u002Fp\u003E\u003Cp\u003E总结，一切从实际出发，满足某个阶段的需求。每个公司的发展阶段不一样，需求也不一样，如果你和楼主一样是打工仔，那咱们就\u003Cb\u003E擦亮眼睛，机灵点，认清形势再做事\u003C\u002Fb\u003E！\u003C\u002Fp\u003E\u003Cp\u003ESophia的tips：\u003Cbr\u003E\u003Cb\u003E有时候不是我们做不到，而是没有被逼到那个份上~\u003C\u002Fb\u003E\u003C\u002Fp\u003E\u003Cp\u003E相关文章\u003Cbr\u003E\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E《创业公司设计师怎样从0到1设计一款APP（一）——概述》\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E职场设计教程抢先看～一枚爱折腾、爱健身的设计师妹纸~\u003Cbr\u003E详情请关注微信公众号：Sophia的玲珑阁，获取更多有关交互、健身及其它相关信息。\u003C\u002Fb\u003E\u003C\u002Fh2\u003E&,&updated&:new Date(&T07:26:06.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:1,&collapsedCount&:0,&likeCount&:3,&state&:&published&,&isLiked&:false,&slug&:&&,&lastestTipjarors&:[],&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-ba0c9afacf_r.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&界面规范&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&设计师&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&APP设计&}],&adminClosedComment&:false,&titleImageSize&:{&width&:1125,&height&:750},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&column&:{&slug&:&c_&,&name&:&玲珑设计&},&tipjarState&:&activated&,&tipjarTagLine&:&有时候不是我们做不到，而是没有被逼到那份&,&sourceUrl&:&&,&pageCommentsCount&:1,&tipjarorCount&:0,&annotationAction&:[],&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T15:26:06+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&&,&isFollowing&:false,&hash&:&762feeafa17f&,&uid&:28,&isOrg&:false,&slug&:&tang-shi-35-55&,&isFollowed&:false,&description&:&&,&name&:&唐诗&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Ftang-shi-35-55&,&avatar&:{&id&:&87f6ab4b5&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&9e23ffe949e3f6bc95a5e996de386db0&,&uid&:835700,&isOrg&:false,&slug&:&zhu-xiao-jie-43-66&,&isFollowed&:false,&description&:&&,&name&:&猪小姐&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fzhu-xiao-jie-43-66&,&avatar&:{&id&:&f13cbb7c5fc9de&,&template&:&https:\u002F\u002Fpic1.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:null,&isFollowing&:false,&hash&:&6c57bdc0f174bd593430&,&uid&:128600,&isOrg&:false,&slug&:&wanzi-46&,&isFollowed&:false,&description&:&&,&name&:&wanZi&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fwanzi-46&,&avatar&:{&id&:&da8e974dc&,&template&:&https:\u002F\u002Fpic4.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&\u003Cimg src=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-458627fae0dd3b08f0e1fb_200x112.png\& data-rawwidth=\&600\& data-rawheight=\&338\& class=\&origin_image inline-img zh-lightbox-thumb\& data-original=\&http:\u002F\u002Fpic4.zhimg.com\u002Fv2-458627fae0dd3b08f0e1fb_r.png\&\u003E上篇文章更新到了在设计APP的过程中Hi-fi输出的一些要求，今天来说说APP的UI规范怎么整理。要求如果我们按照市面上最好的规范去整理的话是极好的一件事情。\u003Cb\u003EApple公司的iOS规范和Google的Material Design的设计规范就是很好的参考案例\u003C\u002Fb\u003E。如果有时间，也是极力…&,&reviewingCommentsCount&:0,&meta&:{&previous&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic2.zhimg.com\u002F50\u002Fv2-466b20cd40c85a95ac004_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&视频拍摄&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&设计师&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&公众号：Sophia的玲珑阁&,&isFollowing&:false,&hash&:&0a2ebdff030f7c2af593e8db3be30cd4&,&uid&:287500,&isOrg&:false,&slug&:&mu-mu-mu-mu-mu-25&,&isFollowed&:false,&description&:&踏实干活的交互设计师，提供设计干货，设计类书籍读后感与总结，设计方法论等各方面的知识。微信公众号：Sophia的玲珑阁\n&,&name&:&Sophia的玲珑阁&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fmu-mu-mu-mu-mu-25&,&avatar&:{&id&:&v2-83d84f1ebc9feee54c020a&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&c_&,&name&:&玲珑设计&},&content&:&\u003Cp\u003E前三篇文章\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E《从零开始做社交功能》\u003C\u002Fa\u003E、\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E《从Instagram与Facebook研究Feed的基本功能》\u003C\u002Fa\u003E、\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E《浅析Feed内容定位与趋势》\u003C\u002Fa\u003E，从宏观过渡到微观，今天开始落实到具体的页面设计，主要说说视频拍摄页面应该怎样设计。\u003C\u002Fp\u003E\u003Cp\u003E基本的思路是：拍视频-&查看视频\u003C\u002Fp\u003E\u003Cp\u003E同样的，在前文中有提到，我们在了解一件事情的时候最先做的，应该是了解它的准确的定义。\u003Cbr\u003E那么什么是视频呢？\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-466b20cd40c85a95ac004_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&338\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-466b20cd40c85a95ac004_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E百度百科的理解：\u003Cbr\u003E视频泛指将一系列静态影像的方式加以捕捉、纪录、处理、储存、传送与重现的各种技术。连续的图像变化每秒超过24帧（frame）画面以上时，根据视觉暂留原理，人眼无法辨别单幅的静态画面；看上去是平滑连续的视觉效果，这样\u003Cb\u003E连续的画面\u003C\u002Fb\u003E叫做视频。\u003C\u002Fp\u003E\u003Cp\u003E由以上定义我们可以知道视频最大的特征是有一个\u003Cb\u003E时间跨度\u003C\u002Fb\u003E。\u003C\u002Fp\u003E\u003Cp\u003E针对这样的特征，拍摄视频界面的设计，主要需要注意以下几点：\u003Cbr\u003E\u003Cb\u003E1.概念的理解：起始时间、终止时间、视频的长度\u003Cbr\u003E2.查看方式：保存地点的提示，相册的缩略图显示（精彩点在哪就显示哪、）\u003Cbr\u003E3.设备方面考虑：横竖屏切换、前后置摄像头的调换、闪光灯、画面的放大缩小\u003Cbr\u003E4.UI与动效的协助\u003C\u002Fb\u003E（这一点综合在以上三点中进行分析）\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-09bf364dbac152848adb6e_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&400\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-09bf364dbac152848adb6e_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cblockquote\u003E\u003Cp\u003E1.概念的理解：起始时间、终止时间、视频的长度\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E视频的时间跨度意味着有起始时间点和终止时间点，以及拥有一个时间长短的属性。这些因素共同决定了，我们拍摄出来的视频会以怎样的形态呈现在用户面前。绝大多数视频是拍摄未来的一段视频，但市面上也出现一些回溯式的拍摄手法，也就是说拍摄的是操作动作之前的视频。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003EiOS系统自带的视频拍摄功能是最具代表性的拍摄界面\u003C\u002Fb\u003E。点击一下红色button开始录制，接着button变成停止的标志，再次点击则停止录制。录制的过程中在顶部会有闪动的小红点表示录制的状态，以及录制的时长显示。\u003C\u002Fp\u003E\u003Cp\u003E可以看出它\u003Cb\u003E整个录制的过程中分为录制前、录制中、录制后三个状态\u003C\u002Fb\u003E，并且时间段表述得非常清晰。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1dd786bac36ce36c3ec6adf_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&400\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-1dd786bac36ce36c3ec6adf_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E再来看看Instagram和美拍的拍摄方式。两者的拍摄方式类似，但Instagram的操作方式更加简洁。美拍除了涉及到对视频画面的处理，还涉及到背景音乐、视频长短等等的编辑功能，从这些点出发，相比于Instagram，美拍更侧重于视频的编辑功能。当然这也是很重要的一部分，楼主会在以后的文章中专门去讲这一块的内容，今天就用Instagram去主要分析一下视频的拍摄页面的设计。\u003C\u002Fp\u003E\u003Cp\u003E可以看得出，\u003Cb\u003E两者界面侧重点的不同是来源于产品的定位\u003C\u002Fb\u003E，Instagram偏向于支持用户产生出优质的内容，美拍更偏向于用特效去编辑视频产生更大的娱乐作用。\u003C\u002Fp\u003E\u003Cp\u003E再来看看\u003Cb\u003EInstagram页面设计的出发点，相对于iOS拍摄，它支持镜头的转移，即多段短视频的衔接功能\u003C\u002Fb\u003E。相对于iOS沉闷的记录功能，该功能的改变的添加，使用户有更大的发挥空间。所以它抛弃掉iOS点击两下录制一段视频的操作，采用长按的方式进行录制，松开手停止录制的操作方式。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b1a85ca01a1f06b1c3b89_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&400\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b1a85ca01a1f06b1c3b89_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E因为是短视频，有可能用户在频繁点击中可能混淆了录制中与未录制的状态，或者说让用户觉得比较混乱，也是因为时间短，长按的方式用户比较容易接受，对于录制的状态更加明了。反之，如果让用户去录制一个5分钟的视频，那就适合点击的方式去做，因为用户很有可能因为长时间的按屏幕产生手滑而误结束了视频的录制过程，这也是为什么美拍在选择录制5分钟视频时恢复成iOS的点击的方式进行操作了。\u003C\u002Fp\u003E\u003Cp\u003E另外一个时间点，为什么Instagram在短视频中设置一个最短时间是3s？Facebook做过一个调查，当视频长度设置到3s的时候，90%的用户会将它当做一个Gif去看完，当设置为30s时，只有20%的人能看完了，而且在3s内可以讲完一个简短小的画面故事，于是Instagram将视频的最短时间设置为3s。当然也可能还有另外的原因。\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E2.查看方式：保存地点的提示\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003EiOS录制完毕之后，在左下角的相册会有动效提示更新。画面由小到大表示有新的内容更新。它从拍摄的三个状态到查看视频，整体流程是按用户所熟悉的时间顺序进行操作的，用起来会觉得特别顺畅。\u003C\u002Fp\u003E\u003Cp\u003E相对于视频，iOS的目的是让用户的注意力集中在拍摄界面，场景侧重于用户作为一个工具去记录一段时间维持较长连续发生的事情，而Instagram的拍摄功能是融合于发Feed过程中的一个环节，它更支持用户拍完就去分享，丰富Feed的内容，而查看也直接跳转到Feed。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-8a41ebbb5f5a1b4bb8579742_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&450\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-8a41ebbb5f5a1b4bb8579742_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E有个小细节需要关注的是，在视频产生后的小动效，除了像iOS的表现之外，还有的在相册最上层覆盖一个转圈的小圆，比如改版前的VSCO，它比较适合在拍摄完之后，视频还有一个处理的等待时长的表达。还有的处理方式是将最后一帧画面缩到相册，这样表达更明显，缺点就是动效有点繁复，不适合连续拍摄短视频的场景。\u003C\u002Fp\u003E\u003Cp\u003E相册的缩略图有可能是第一帧，有可能是最后一帧，也有可能是通过算法得出的视频中比较精彩的一帧，出发点就是能在这一帧上让用户马上想起来这个视频主要内容是什么，节约用户查看的时间。\u003C\u002Fp\u003E\u003Cblockquote\u003E\u003Cp\u003E3.设备方面考虑：横竖屏切换、前后置摄像头的调换、闪光灯、画面的放大缩小\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Cp\u003E在视频拍摄页面，比较特殊的一点就是，手机有横竖屏切换的情况，而且切换的频率还比较高。在这里除了要\u003Cb\u003EUI上尽量保持一致之外，还有一点需要考虑的是如果横竖屏都支持切换，那么产出物的最终形状和显示也要考虑进去\u003C\u002Fb\u003E。比方说如果短视频在拍摄过程中切换了镜头，第一个是比较高的长方形，第二个是比较宽的长方形，那么产出物应该怎样处理。在这个情况的处理方式上，Instagram和美拍是一致的，就是统一采用正方形进行取景，那么规整了产出的视频形状。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b2f6e41c3a58df370dc3a_b.jpg\& data-rawwidth=\&600\& data-rawheight=\&400\& class=\&origin_image zh-lightbox-thumb\& width=\&600\& data-original=\&https:\u002F\u002Fpic1.zhimg.com\u002Fv2-b2f6e41c3a58df370dc3a_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E前后置摄像头的调换、闪光灯、画面的放大缩小这三项功能，并不一定都需要，还是根据PM对产品的定位来进行取舍。比如说iOS是基础的视频录制，并且使用人群跨度比较广，那么它功能齐全，UI简洁是最不会出错的一种选择。Instagram则只有前后置摄像头的调换功能，美拍则采用前后置摄像头的调换、闪光灯，出发点其实是都想支持自拍，毕竟社交需要自己面孔同朋友进行互动。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cb\u003E从这篇文章对具体单个页面的分析可以看出，所有的功能的出发点都是来自于产品的使用人群、使用场景，以及功能涉及到的特性和属性所来决定\u003C\u002Fb\u003E。比如上文中操作是点击还是长按，相册的动效表现形式，甚至是视频属性的长短等等，都是在综合各项因素的前提下进行决定了。\u003C\u002Fp\u003E\u003Cp\u003E所以作为一个交互设计师，去主动了解并参与到项目前前后后的讨论、会议，是非常重要的，需要做到的是“\u003Cb\u003E窥一斑而知全豹\u003C\u002Fb\u003E”，当给予设计师一个功能时，能根据这一功能想周全到关于整个项目的相关事宜和定位。\u003C\u002Fp\u003E\u003Cp\u003E下期更新内容，暂定方向为：Feed发送页面的设计~\u003Cbr\u003E敬请期待~\u003C\u002Fp\u003E\u003Cp\u003E风来自很远的地方，去去也无妨\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E职场设计教程抢先看～一枚爱折腾、爱健身的设计师妹纸~\u003Cbr\u003E详情请关注微信公众号：Sophia的玲珑阁，获取更多有关交互、健身及其它相关信息。\u003C\u002Fb\u003E\u003C\u002Fh2\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T19:35:21+08:00&,&url&:&\u002Fp\u002F&,&title&:&从iOS、Instagram、美拍分析视频拍摄功能&,&summary&:&前三篇文章\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E《从零开始做社交功能》\u003C\u002Fa\u003E、\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E《从Instagram与Facebook研究Feed的基本功能》\u003C\u002Fa\u003E、\u003Ca href=\&https:\u002F\u002Fzhuanlan.zhihu.com\u002Fp\u002F\& class=\&internal\&\u003E《浅析Feed内容定位与趋势》\u003C\u002Fa\u003E，从宏观过渡到微观，今天开始落实到具体的页面设计，主要说说视频拍摄页面应该怎样设计。基本的思路是：拍视频-&查看视频同样的，在前文中有…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:0,&likesCount&:0},&next&:{&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\u002Fpic3.zhimg.com\u002F50\u002Fv2-8fbfcb3b16d29_xl.jpg&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&topics&:[{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&工业设计&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&设计师&},{&url&:&https:\u002F\u002Fwww.zhihu.com\u002Ftopic\u002F&,&id&:&&,&name&:&设计&}],&adminClosedComment&:false,&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&author&:{&bio&:&公众号：Sophia的玲珑阁&,&isFollowing&:false,&hash&:&0a2ebdff030f7c2af593e8db3be30cd4&,&uid&:287500,&isOrg&:false,&slug&:&mu-mu-mu-mu-mu-25&,&isFollowed&:false,&description&:&踏实干活的交互设计师，提供设计干货，设计类书籍读后感与总结，设计方法论等各方面的知识。微信公众号：Sophia的玲珑阁\n&,&name&:&Sophia的玲珑阁&,&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fmu-mu-mu-mu-mu-25&,&avatar&:{&id&:&v2-83d84f1ebc9feee54c020a&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},&column&:{&slug&:&c_&,&name&:&玲珑设计&},&content&:&\u003Cp\u003E工业设计专业，大概从2014年之后随着互联网行业的兴起，突然被重视起来了。阁主也是这个专业毕业的，当时在学校的时候，行业还没有这么火，只想着毕业的时候是不是可以当个工业产品设计师什么的，干的活呢就是能设计出生活中大家可以触碰到的东西，比方说设计牙刷、杯子，大点的到汽车什么的。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-b14cfc371e58cad20e09da_b.jpg\& data-rawwidth=\&640\& data-rawheight=\&360\& class=\&origin_image zh-lightbox-thumb\& width=\&640\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-b14cfc371e58cad20e09da_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E大三暑假，2011年的夏天，当时找到了人生中第一份实习工作，做游戏UI设计师，工作内容是设计类似现在消消乐的手机小游戏界面。这也是阁主第一次知道原来工业设计的学生转专业是挺有优势的。却没有深入思考为什么比较有优势。直到现在，工作多年，开始反思自己的知识架构，总结一些经验的时候，才豁然开朗。\u003C\u002Fp\u003E\u003Cp\u003E让咱们先来看看清华大学工业设计专业本科的课程安排，从这些去分析作为一个受市场欢迎的设计师，知识体系到底是怎样的？以下是在清华官网上找到的信息。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-bc20ab9a5bdfbd665a40dea_b.jpg\& data-rawwidth=\&640\& data-rawheight=\&480\& class=\&origin_image zh-lightbox-thumb\& width=\&640\& data-original=\&https:\u002F\u002Fpic3.zhimg.com\u002Fv2-bc20ab9a5bdfbd665a40dea_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E本科课程安排如下\u003C\u002Fp\u003E\u003Cblockquote\u003E主干课程：\u003C\u002Fblockquote\u003E\u003Cp\u003E主干学科：机械工程、艺术学。\u003C\u002Fp\u003E\u003Cp\u003E主要课程：力学、电工学、机械设计基础、工业美术、造型设计基础、工程材料、人机工程学、心理学、计算机辅助设计、视觉传达设计、环境设计。\u003C\u002Fp\u003E\u003Cp\u003E主要实践性教学环节：包括军训，金工、电工、电子实习，认识实习，生产实习，社会实践，课程设计，毕业设计(论文)等，一般应安排40周以上。\u003C\u002Fp\u003E\u003Cblockquote\u003E主要课程：\u003C\u002Fblockquote\u003E\u003Cp\u003E造型基础：设计概论、素描、设计色彩、效果图技法，产品速写，装饰设计基础；设计图学，设计心理学，产品语意传达，阴影与透视、工程力学（理工类），工业设计机械基础、设计材料与工艺、工业设计概论、工业设计史、设计表达、模型设计与制作、计算机辅助平面设计、计算机辅助工业设计、产品摄影。\u003C\u002Fp\u003E\u003Cp\u003E专业基础：平面、立体、色彩构成、门学、基础图案、雕塑、基础设计；\u003C\u002Fp\u003E\u003Cp\u003E专业技术：视觉传达、人机工程学、计算机辅助设计、产品造型设计、设计程序与方法，产品设计、企业形象设计，环境设施设计、设计管理\u003C\u002Fp\u003E\u003Cp\u003E从本科的课程安排上来看，方向上主要分为理论与实践。理论部分除了像力学，电工学等，这些与工业产品相关外，设计概论、工业设计概论、工业设计史等这些对艺术设计的学生会产生深远的影响。\u003C\u002Fp\u003E\u003Cfigure\u003E\u003Cimg src=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-d5f98fa10f_b.jpg\& data-rawwidth=\&525\& data-rawheight=\&350\& class=\&origin_image zh-lightbox-thumb\& width=\&525\& data-original=\&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-d5f98fa10f_r.jpg\&\u003E\u003C\u002Ffigure\u003E\u003Cp\u003E阁主会在这个系列的文章进行分一步步的分类，讲述每门课程在本科是怎么学习的，以及每门课程在工作中起到什么样的作用，怎样学习等。当然阁主也只是抛砖引玉，更多的还是待大家自己一步步进行探索。\u003C\u002Fp\u003E\u003Cp\u003E可以看出，工业设计的学生在本科期间学习的课程内容是很多的，如果想每门都学好，四年大学的时间是远远不够的。其中像摄影、平面、环境设施设计都可以单拎出来开设单独的专业了。\u003C\u002Fp\u003E\u003Cp\u003E知识面铺得比较广，却每门都学的不太深入。可这些知识层面的东西却给了学生在职场中强劲的后劲。而本科最大的贡献，就是培养了工业设计学生一种重要的思维，而这种思维也是互联网甚至是各行各业都看重的一种思维，它叫做“以用户为中心”的思维！\u003C\u002Fp\u003E\u003Cp\u003E给大家一些思考时间，可以自己用脑图进行尝试分类，敬请期待下回对课程的分类解说~\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cp\u003E今天线下粉丝聚会特别成功，原本定的两个小时的场地，到左后不得不延迟了半个多钟头，大家意犹未尽。阁主的宗旨是，如果要做就做的像模像样，让每一位去的童鞋都获得最实在的技能，待阁主整理完记录之后再发表一下聚会的总结性文章~敬请期待~\u003C\u002Fp\u003E\u003Cp\u003E你若盛开，蝴蝶自来\u003Cbr\u003E\u003C\u002Fp\u003E\u003Ch2\u003E\u003Cb\u003E职场设计教程抢先看～一枚爱折腾、爱健身的设计师妹纸~\u003Cbr\u003E详情请关注微信公众号：Sophia的玲珑阁，获取更多有关交互、健身及其它相关信息。\u003C\u002Fb\u003E\u003C\u002Fh2\u003E&,&state&:&published&,&sourceUrl&:&&,&pageCommentsCount&:0,&canComment&:false,&snapshotUrl&:&&,&slug&:,&publishedTime&:&T21:56:29+08:00&,&url&:&\u002Fp\u002F&,&title&:&从清华工业设计专业课程安排，来看设计师的知识体系（一）——综述&,&summary&:&工业设计专业，大概从2014年之后随着互联网行业的兴起，突然被重视起来了。阁主也是这个专业毕业的，当时在学校的时候，行业还没有这么火，只想着毕业的时候是不是可以当个工业产品设计师什么的，干的活呢就是能设计出生活中大家可以触碰到的东西，比方说设…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&commentPermission&:&anyone&,&commentsCount&:0,&likesCount&:4}},&annotationDetail&:null,&commentsCount&:1,&likesCount&:3,&FULLINFO&:true}},&User&:{&mu-mu-mu-mu-mu-25&:{&isFollowed&:false,&name&:&Sophia的玲珑阁&,&headline&:&踏实干活的交互设计师，提供设计干货，设计类书籍读后感与总结，设计方法论等各方面的知识。微信公众号：Sophia的玲珑阁\n&,&avatarUrl&:&https:\u002F\u002Fpic2.zhimg.com\u002Fv2-83d84f1ebc9feee54c020a_s.jpg&,&isFollowing&:false,&type&:&people&,&slug&:&mu-mu-mu-mu-mu-25&,&bio&:&公众号：Sophia的玲珑阁&,&hash&:&0a2ebdff030f7c2af593e8db3be30cd4&,&uid&:287500,&isOrg&:false,&description&:&踏实干活的交互设计师，提供设计干货，设计类书籍读后感与总结，设计方法论等各方面的知识。微信公众号：Sophia的玲珑阁\n&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\u002Fwww.zhihu.com\u002Fpeople\u002Fmu-mu-mu-mu-mu-25&,&avatar&:{&id&:&v2-83d84f1ebc9feee54c020a&,&template&:&https:\u002F\u002Fpic2.zhimg.com\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&navi&:&1&,&growthSearch&:&s2&,&nwebQAGrowth&:&experiment&,&qawebRelatedReadingsContentControl&:&close&,&liveStore&:&ls_a2_b2_c1_f2&,&nwebSearch&:&nweb_search_heifetz&,&vdlc&:&e&,&rt&:&y&,&isOffice&:&false&,&enableTtsPlay&:&post&,&stic&:&o&,&newLiveFeedMediacard&:&new&,&newMobileAppHeader&:&true&,&androidPassThroughPush&:&all&,&hybridZhmoreVideo&:&yes&,&nwebGrowthPeople&:&default&,&nwebSearchSuggest&:&default&,&qrcodeLogin&:&qrcode&,&enableVoteDownReasonMenu&:&enable&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&growthBanner&:&default&,&newMobileColumnAppheader&:&new_header&,&androidDbRecommendAction&:&open&,&biu&:&1&,&info&:&1&,&androidDbFeedHashTagStyle&:&button&,&appStoreRateDialog&:&close&,&default&:&None&,&isNewNotiPanel&:&no&,&biua&:&1&,&zcmLighting&:&zcm&,&adR&:&b&,&wechatShareModal&:&wechat_share_modal_show&,&uRe&:&0&,&androidProfilePanel&:&panel_b&}},&columns&:{&next&:{},&c_&:{&following&:false,&canManage&:false,&href&:&\u002Fapi\u002Fcolumns\u002Fc_&,&name&:&玲珑设计&,&creator&:{&slug&:&mu-mu-mu-mu-mu-25&},&url&:&\u002Fc_&,&slug&:&c_&,&avatar&:{&id&:&v2-548a44f608b24dfe78a6e20&,&template&:&https:\u002F\u002Fpic3.zhimg.com\u002F{id}_{size}.jpg&}}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&updating&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}
