UI界面设计 课件 重大 第二部分 手机界面设计

UI界面设计USERINTERFACE手机界面规范MOBILEPHONEINTERFACEDESIGN第二部分手机界面设计1手机界面基础画画APP界面的

COMPONENTSOFTHEINTERFACE状态栏标签栏主显示区导航栏手机界面规范APP界面控件规范界面规范文字参数手机界面基础手机界面基础AB字号中文：思源黑体

英文：robot

偶数单位24pt,28pt,36pt等字体：APP安卓界面中文字参数（1）打开【PS】，新建【1080*1920】的画布，并划分出【状态栏】、【标签栏】、【导航栏】，如图所示APP安卓界面制作步骤-1（2）给【状态栏】和【标签栏】填充颜色，并绘制【状态栏】和【标签栏】的内容，如图所示。APP安卓界面制作步骤-2（3）将广告图片和功能图标【复制】到Banner区域。（4）添加【主显示区】的其它元素。（5）绘制【导航栏】按钮和图标。APP安卓界面制作步骤-3THANK

YOU!谢谢谢谢UI界面设计USERINTERFACE网页色彩WEBDESIGN第一部分网页界面设计41.重要性：色彩往往给人以鲜明的第一印象。2.色彩三属性:色相、明度、纯度3.色彩情感和视觉感受4.配色方案：同种色、同类色、邻近色、对比色等5.色彩策略

色彩是一个品牌给人的第一印象。营销界有个著名的“7秒定律”，即消费者在7秒内就可以确定是否有购买商品的意愿。如果第一眼没有被吸引住就很难对产品有进一步了解的欲望。而在这短短7秒内，色彩的决定因素占到67%。大部分初次接触产品的消费者会在90秒内决定是否购买，而这个评估中62%-90%是基于颜色。“7秒定律”色彩重要性色彩三属性——色相、明度、纯度色彩情感和视觉感受色彩是富于情感的色彩情感和视觉感受红色黄色色彩情感和视觉感受蓝色绿色色彩情感和视觉感受橙色紫色色彩情感和视觉感受黑色灰色色彩情感和视觉感受咖啡色金属色THANK

YOU!谢谢UI界面设计USERINTERFACE网页色彩WEBDESIGN第一部分网页界面设计4色彩搭配色彩规律使用场景配色目标配色方法色彩搭配单色调单个颜色改变明暗/饱和度色彩的选择和主题一致橙色+灰色巧用同色系统一不单调同色系配色案例1巧用同色系，统一不单调同色系配色案例2巧用同色系，统一不单调同色系配色方法色彩搭配色彩搭配邻近色色环上90度内取色饮食类网页内容页面色彩的选择和主题一致色彩搭配色彩搭配对比色色环上180度取色对比色色环上180度取色扁平化色彩色彩风格的确立色彩的选择和主题一致THANK

YOU!谢谢UI界面设计USERINTERFACE网页色彩-3WEBDESIGN第一部分网页界面设计4

色彩1.重要性：色彩往往给人以鲜明的第一印象。2.色彩三属性--色相、明度、纯度3.色彩情感和视觉感受4.常见配色方案：黑白灰、同种色、同类色、邻近色、五彩色、对比色等5.色彩策略色彩策略与需求方共同确定好设计目标再考虑配色方案色彩的策略配色目标饮食类网页内容页面色彩的选择和主题一致主色与辅色主色与辅色确定主色主色与辅色分析问题的三个维度主色与辅色Keep界面精简色彩层级的意义网易云官网精简色彩层级的意义阿里云官网THANK

YOU!谢谢邻近色配色案例如何使用邻近色？UI界面设计USERINTERFACE网页色彩-4WEBDESIGN第一部分网页界面设计4

色彩1.重要性：色彩往往给人以鲜明的第一印象。2.色彩三属性--色相、明度、纯度3.色彩情感和视觉感受4.常见配色方案：黑白灰、同种色、同类色、邻近色、五彩色、对比色等5.色彩策略色彩策略分析1.传递信息：界面清晰、层次关系明确、舒适的阅读体验2.引导操作：清晰合理的操作引导3.品牌价值：品牌一致性，传递品牌感产品界面产品界面弱点分析分析的三个维度对比色用法七鱼官网配色修改设计规范核心功能模块优化重新定义icon风格重新定义插图风格改版效果配色策略THANK

YOU!谢谢UI界面设计USERINTERFACEAPP顶部导航栏设计NAVIGATIONBAROFAPPINTERFACE第二部分手机界面设计2手机界面导航画画APP界面顶部

NAVIGATIONBAROFAPPINTERFACE导航栏是指位于页面顶部或者侧边区域的，在页眉横幅图片上边或下边的一排水平导航按钮，它起着链接站点或者软件内的各个页面的作用。手机界面导航手机界面导航画画APP导航栏作用？导航栏是用来帮助用户定位、导航、操作的基础组件;首页导航栏就是一级导航栏，由首页导航栏中点开的界面就是二级页面。手机界面导航整个导航栏通常分为左、中、右三部分，左侧和右侧主要用来放置功能控件，中间部分主要用来放置文字标题或者搜索，接下里展开分析左中右三部分的构成。一级导航栏中间经常能看到搜索框，然后搜索框左右两边放置其他的控件。当导航栏的内容太多，比如有文字标题、头像、按钮等控件，搜索栏和这些控件可能无法并排放置时，可以将搜索栏横向拉长，放在下一行单独展示。现在淘宝APP首页的导航栏就做成了两行，上一行用来放置文字标题和功能图标，搜素栏集合扫码、拍照等功能单独作为一行。我们在使用产品的过程中会发现，APP的导航栏或多或少都存在一些设计上的差异。二级导航常见的还有在中间使用加粗的文字作为标题，也可以使用主标题+副标题的形式来展示更多的信息。手机界面导航画画导航栏设计样式？导航栏样式分为通栏和非通栏，通栏就是通到页面最顶部的通栏。非通栏的设计是整个导航栏跟整BANNER之间有明显分界。我们可以结合站在产品和用户客户的角度来看，思考整个导航栏。我们把导航栏做成通栏的时候，BANNER更加细腻的，导航栏上的功能入口,比如扫一扫啊，搜索啊，包括消息视觉层面上变得更加弱了。手机界面导航手机界面导航APP导航栏设计注意事项文字、搜索框和图标的大小尺寸与距离合理文字图标搜索框手机界面导航画画APP导航栏文字字号文字字号，一级导航搜索框内的文字一般28像素，图标的文字18像素；二级导航标题文字，在两倍图750乘1334的作图尺寸下，我们会把它做成36像素；文字层级间隔大于4像素；手机界面导航画画手机界面导航画画APP导航栏搜索框

手机界面导航画画APP导航栏元素间距

THANK

YOU!谢谢谢谢UI界面设计USERINTERFACE手机APP-BANNER设计APPBANNERDESIGN第二部分手机界面设计4手机界面BANNER画画Banner是什么？WHATISBANNER?Banner在UI里表现为横幅广告块儿。Banner是信息传播需要，banner需求往往来源于运营设计，为了配合某个运营活动而做的一个面向用户的展示内容。手机界面BANNER手机界面BANNER画画手机界面BANNER手机界面’BANNERbanner’大小如何设定？宽高设定根据应用里设定的位置进行设计;图一是放在商品列表页的头图banner，设计宽高为750*328；图二为“我的”页面里放置活动宣传广告，由于空间有限，宽高为750*200；101手机界面’BANNERBANNER如何设计?根据BANNER的位置和主题，选择以下构图居中左图右文左文右图铺满画面102手机界面’BANNERbanner如何设计？103手机界面’BANNER104手机界面’BANNER105手机界面BANNER画画BANNER设计总之，以上是电商BANNER中常见的几种构图形式，不同的构图方式可以传递给人不同的感觉气质。根据自己的产品、主题和素材，选择合适的构图方式，梳理出视觉层级。无论是哪一种构图形式，都要注意平衡，各种元素的呼应、制约，达到画面的和谐。THANK

YOU!谢谢谢谢UI界面设计USERINTERFACE手机APP底部TAB栏设计APP’TABDESIGN第二部分手机界面设计3110画画底部导航栏可以说是现在最流行的导航控件了，微信、支付宝、淘宝、网易云音乐等等，各种类型的APP都有应用。作用是为了做好内容分类，节省屏幕空间，等需要的时候更容易被人找到!手机界面TAB栏设计底部TAB栏是什么？WHATISIT?111手机界面TAB栏设计TAB常见布局根据BANNER的位置和主题，选择以下构图屏幕等分减去左右间距后等分图标左右间距手机界面底部TAB栏屏幕等分：技术实现比较简单，市面上使用比较多的样式。计算方法：列宽=屏幕宽度/标签个数。手机界面底部TAB栏减去左右间距后等分：标签之间相对紧凑。手机界面底部TAB栏图标左右间距相等：多用在标签数量为3个的情况，因为用屏幕等分方式图标看起来会比较散，所以可以采用这种方法。115手机界面TAB栏设计TAB背景样式常见样式白色或浅灰黑色毛玻璃透明背景手机界面底部TAB栏白色或浅灰：最为常见的背景样式，它能够更好的突出标签内容，同时不会让底部显得过重。可以使用白色加投影或者底部加浅灰色分隔线的方式将其和内容区分开。手机界面底部TAB栏黑色背景：黑色背景往往用于一些特殊类型的APP，如运动、股票等，渲染氛围。手机界面底部TAB栏毛玻璃：在前2年比较流行，多用在IOS中，给人时尚的感觉，不过会耗费大量资源，目前使用的比较少。手机界面底部TAB栏透明背景：采用透明背景，可以让用户视觉更聚焦于内容本身。但这种方式会导致标签信息展示较弱，所以透明背景多用在内容为主的APP中，如抖音。手机界面TAB栏设计TAB栏展现方式常见样式图标+文字纯图标图标+文字+驼式按钮纯文字手机界面底部TAB栏图标+文字：最常见的标签展示样式，用图标吸引人的眼球，配合文字说明，更能凸显图标标签栏。手机界面底部TAB栏纯图标：采用纯图标样式比较简洁，但识别性较低，一般适用于小众产品中，如花瓣、Pinterest，这2个产品是设计分享类平台，用户群体比较小众且目标用户是互联网从业人员，对这些图标含义较为熟悉，采用这种方式会显得产品比较有气质。手机界面底部TAB栏图标+文字+驼式按钮：这种标签栏样式常见于社区类APP中，采用驼式按钮来突出功能点，引导用户发布内容。如闲鱼PP，点击加号按钮就可发布闲置，调动用户积极性。手机界面底部TAB栏纯文字：采用这种方式能够更直观的让用户进行操作，遵循简单易用的原则。但样式比较单一，适合用户群体跨度较大但产品，多用于直播类、内容类、简单工具类APP中，例如小红书、百度翻译。THANK

YOU!谢谢谢谢UI界面设计USERINTERFACE手机界面视觉流程设计VISUALFLOWDESIGN第二部分手机界面设计5手机界面视觉流程画画视觉流程是什么？WHATISIT?视觉流程是通过设计引导使用者的眼睛，通俗的讲就是先看到什么，再看到什么，也就是视觉浏览的顺序。画画为什么进行视觉流程梳理？WHYDOYOUDOIT?一个好的设计不仅仅是好看，更重要的是做出一个正确的设计，解决实际问题，将信息展示清楚。清晰的展示信息这是非常重要的一个设计理念。手机界面视觉流程如何理解清晰展示信息？HOWDOYOUDOIT?我么可以根据主题和甲方要求，按照信息重要性，着手进行视觉信息的依次梳理。在整个视信息按照重要性的等级排列觉的表现中，有最重要的信息，也有相对次要的信息，如果把这些出来，那么就是有层级。如果我们在做设计之前对信息的层级关系首先做梳理，然后再去设计，这样设计的作品就会产生极好的视觉流程。手机界面视觉流程表现视觉层级梳理信息层级手机界面视觉流程