平面设计Studio 07 ▏界面设计&手机APP网站项目
时间：2022-08-07 06:33:02 | 来源：网站运营
时间：2022-08-07 06:33:02 来源：网站运营
克瑞斯专注艺术类留学作品集培训，近期结合面授及线上远程两种教学模式，
界面设计Studio 07是手机端APP网站项目 ，对此类感兴趣的同学们，欢迎学习参与。克瑞斯陆续推出更多专业项目，请按照文末联系方式，关注公众号了解课程详情。
项目信息●项目分析UI是User Interface Design(界面设计)的简称，包含一切人机交互可视化的页面设计，UI设计师的职责是设计工人机交互使用的图形化用户界面，并使界面更加易用和友好。
●设计规范①iphone各系列手机型号、尺寸、使用的切图是同学们必须了解的。
②iPhone设计需注意到的尺寸设计，包含导航栏设计、大标题导航栏设计、tab栏设计等。大标题导航栏的高度一般为116pt（包含20pt状态栏，返回图标信息，大标题34pt）。滑动页面时大标题会变成正常导航栏的64pt。
③闪屏资源。闪屏是一张完整的静态图片，尺寸如下。
④字体。IOS中英文使用的是San Francisco (SF)字体。
⑤iphone控件设计基本符合44pt（88px）原则，即在手机上大小为7～9mm，适合手指操作。iTunes上传截图需要提供两套截图：1242px * 2688px 和 1125px * 2436px两套截图。
●趋势分析未来市场更加趋于使用手机界面来了解任何信息，分享经济下信息传播更加方便快捷，优秀的信息资源更加便于曝光。
课程介绍●课程方向：手机APP网站项目 ●授课方式：线上&线下
●课程时间：待定（根据学生的实际情况调整）
●课程形式：一对一&三人小组
●课程目的了解手机界面运作原理，掌握界面UI设计的设计规范及制作方法。
△分析图-克瑞斯录取案例
学习大纲●应用软件Photoshop、Illustrator、Indesign等软件及手绘板安装。
●调研方法及学习方向①UI工具包使用，网格设计。
②UI设计界面前需先做用户研究以了解产品特性，如用户画像、用户调研、用户使用场景分析、设计竞品分析等。若设计稿需要调节为Iphone X的显示效果，可以下载IOS 12设计源文件，把界面头尾设计成iPhoneX专用头尾。
③移动端视觉规范：主色/辅色/色彩规范：规定APP主要使用的色彩种类。文字颜色/大小规范：规定App中主要使用的文字的大小、颜色、应用场景等。ICON规范：规定APP的ICON设计规范。应用图标规范：规定App的应用图标使用规范。按钮和交互态规范：规定App内所有按钮和交互态的样式。间距规范：规定App内所有间距的尺寸。
④切图规范命名。按照“功能_类型_名称_状态@倍数”，如导航栏是那个又一个手术图标，它的命名形式可以为：
⑤动效。IOS主流的动效设计有四种。
第一种：设计师提供开发动效视频或GIF，开发人员依照效果编写代码，调用切图重新做，还原度可能出问题。
第二种：序列帧方式实现动效。向开发人员提供按顺序命名的PNG，如：1.PNG、2.PNG等，开发人员用代码快速替换，实现动画。
第三种，可以给程序员AVI等视频文件直接插入视频。
第四种：使用Airbnb开源的Lottie。用AE完成动效，然后通过BodyMovin插件导出json文件，这种方式还原度很高。最优秀的动效还是需要设计师与开发人员之间好好沟通。
⑥安卓是一套与windows类似的操作系统。市场上的安卓屏幕尺寸大小不一，目前使用率最高的是720P和1080P。Material Design为我们准备了一个网站来查询主流安卓设备的尺寸。
⑦Material Design不是简单的扁平设计，而是一种注重卡片式设计、纸张的模拟，使用了强烈对比色彩的设计风格。
△流程图-克瑞斯录取案例
设计步骤●分析阶段①项目定位，灵感启发、主题设计空间探索。
②主题调研技能与方法讲解，调研结果的筛选、总结、视觉呈现与转换。
③手机界面用户体验心理学分析，实验性用户调研问卷报告。
④APP建设、界面UI设计布局形式制定，色调及风格制定。
⑤流程图表设计、思路与创意的转化与创新，设计过程标准化。
△界面设计-克瑞斯录取案例
●设计深化阶段①概念草图推敲，方案演变。
②界面、图像优化、界面设计、方案设计。
③UI界面、手机APP图面表现及制作。
④翻译、院校上传规格分析、版式版面设计。
⑤排版、压缩、链接制作。
●设计出图与表现UI设计流程图表、方案设计、界面效果图、排版版式设计。
△界面图-克瑞斯录取案例
●拓展性学习范围①网页设计指的是网站的图形界面设计。
网站项目流程：用户研究 — 撰写需求文档 — 市场文档 — 做竞品调研 — 原型图阶段 — 视觉稿阶段 — 设计规范阶段 — 切图 — 前端代码 — 项目走查。
②网站种类分为To B端和To C端。网站设计中基于鼠标的交互。
③移动端H5，比较火的H5设计工具有：MAKA、iH5、兔展等。
参考书目与网站●参考书目 《编辑设计》
《设计的细节》
《网页设计和网站制作》
《品牌视觉》
《配色设计》
《数据视觉化设计》
《UI设计必修课》
《电商视觉营销》
●参考网站 设计作品：大作网、Behance、Pinterest
优秀案例：Dribble
图标网站：Flaticon、iconfont等。
苹果官方提供的iphone各类尺寸规范UI kit资源下载地址：
https://developer.apple.com/design/resources/San Francisco (SF)字体：
https://developer.apple.com/fonts动效设计用到的Airbnb开源的Lottie网址：
https://airbnb.design/lottie/苹果开发者中心网址：
https://developer.apple.com/苹果人机交互规范：
https://developer.apple.com/design/human-interface-guidelines/安卓设备的尺寸网址：
https://material.io/tools/devices/Material Design官方网站网址：
https://material.ioSketch的主题编辑器插件：
https://material.io/tools/theme-editor△效果图-克瑞斯录取案例
学习成果●学习周期为 ①前期调研1周：项目调研、灵感来源图片及参考备注、信息汇总、数据研究、设计要点完善、分析图制作、调研成果、前期分析探讨等。
②逻辑推敲及概念设计1周：思维导图、视觉可视化设计、手绘方案推敲数次。
③方案设计及细部设计2周：APP方案设计、制作过程、效果图。
④网页图面绘制1周：手机APP界面设计图、尺寸标注、不同色调及类型产品图。
⑤制作3天：手机APP界面UI设计制作、色调调整、后期处理、排版设计。
⑥翻译及排版1周：目标院校所需语言翻译工作、版式版面封底设计、页眉页脚设计、字体字号设计、输出尺寸制作、版式内容页面调整和制定样式风格、各页面图面比例位置、图面图片大小尺寸及色调调整。
⑦制作录取标准的作品集2天：包括不同版本PDF、JPEG、视频、网站链接及电子版册子。
⑧面试指导1小时：面试技巧及应变方式方法、面试流程及各个环节分析、自我介绍及基本信息问答、面试主题及问题细节答疑。
△项目调研-克瑞斯录取案例
△数据分析-克瑞斯录取案例
△流程图-克瑞斯录取案例
△界面设定-克瑞斯录取案例
△效果图-克瑞斯录取案例
△效果图-克瑞斯录取案例
想了解更多艺术留学Studio，
长按关注公众号“克瑞斯国际艺术教育”留言：姓名+联系方式+申请国家+专业，克瑞斯顾问老师会第一时间联系并解答。
在线咨询
