UI界面设计 课件 重大 2.3 手机界面APP导航栏设计、2.4 手机界面APP-BANNER设计

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；25手机界面’BANNERBANNER如何设计?根据BANNER的位置和主题，选择以下构图居中左图右文左文右图铺满画面26手机界面’BANNERbanner如何设计？27手机界面’BANNER28手机界面’BANNER29手机界面BANNER画画BANNER设计总之，以上是电商BANNER中常见的几种构图形式，不同的构图方式可以传递给人不同的感觉气质。根据自己的产