㈠ app界面设计要注意哪些细节问题
您好: 手机APP界面设计的重点无非就是两个:一个是界面视觉设计,一个是考虑界面设计的用户体验。
㈡ 如何做好APP界面设计
熟悉各个平台设计规范(最重要)
例如安卓端
1、功能优先:确定你最想给用内户使用的功能,用容最直接的方法展示出来
2、遵循android 4.x设计规范:大量使用holo布局、控件、色彩、操作方式
3、创造特色:个性的logo、独特的配色、流畅的特效都能让用户记住你的应用
㈢ 如何一步步设计开发一款音乐播放器App
OooPlay 是一款极简音乐播放器,本文是产品原型设计培训师、OooPlay 设计者尹广磊的分享,文中详细阐述了OooPlay在产品原型设计和开发过程中的思维演化方式以及产品心路历程,在此分享给感兴趣的读者。
先谈谈主体设计
在开始谈论如何设计出这款应用之前,先来看看OooPlay这款应用的演示视频让大家有个直观的了解。看过视频之后,因为布局或交互方式也许大家会觉得有一点酷的感觉,但本质上我们未不是在追求酷的感觉,而是始终在围绕功能做一款随性而紧凑的产品设计。
那下面就来还原一下,是如何一步步递进到现在的设计结果的:
首先,iPhone自带的音乐播放器不方便在列表上试听歌曲,一点击就会进入到另一个播放界面。这样想试听几首歌曲的话需要频繁点击“返回”。后来注意到有这样一款应用Panamp是在列表上直接播放的就很方便,只可惜这款应用不常用到的功能比较多,所以算不上精简和巧妙的设计导致特色不是很突出。我想从最初的角度出发如果让它能够是列表的形式并能听歌的话,只需要一个列表和播放暂停按钮就够了。就像下面的草图这样:
然而仅仅这样是不够的,因为随着列表的浏览和滚动,如何能够快速回到正在播放的歌曲上就变得重要,所以需要在列表的顶端或底端能有一个按钮,可以快速定位到正在播放的歌曲上。想到必须要有这么个东西,那么加什么元素才能显示不突兀多余,又能跟整体的简洁风格比较和谐呢?于是想到歌曲的CD画面对于反 映正在播放的歌曲是谁很重要,而且CD画面还能消除一些软件界面的单调。
另外,播放中时还应该有一些动态效果以体现出正在播放中的状态来。基于这些功能和元素的结合,想到了用CD圆盘来显示“CD画面”,用圆盘的转动来 体现出“正在播放中”,用点击圆盘的边缘来回到“正在播放的歌曲”,这样才算达到了一种“紧凑”的设计。后面就是把播放、暂停、上一首、下一首这样最常用的功能,融入到CD圆盘的旁边。如下图这样
然而,细想之下只有这些还是不够,因为搜索歌曲虽然不常用,但是当需要用到时不能让用户从几百首歌里找不出那首歌曲来。所以需要有搜索功能,后面意识到还不止,还有随机、单首循环等,那么把这些功能加在什么位置?加在顶部吗?底部已经占用比较多的高度了,加在顶部一下子就会挤压到中间内容的空间,同 时让简洁的感觉荡然无存。我就创造性的在纸上尝试着画了一个侧栏,把搜索、随机、单首循环放在上面。
因为觉得歌曲列表的宽度压缩一点没关系。没想到这样放的效果不错,同时这种非对称的设计让CD圆盘待在那个位置特别恰当。我不想把CD圆盘放在中间那样毫无新意的表达方式。于是有了下图:
这样基本的布局有了,然后继续去细化一些功能。我个人经常听到一首歌突然很有感觉,就想到手机里还有这个人的另外一首歌也很不错,就想去听一下。所以,需要有个功能可以通过一首歌找到这个人的全部歌曲。于是在歌曲名称的后面增加一个“小人”图标,可以搜索这个演唱者的其它歌曲,使用搜索的方式也是为 了不额外增加界面,同时把“搜索”这么一个不常用的功能也变得常用了。
另外,很多播放器都有了定时结束播放的功能,以便于睡觉前听着音乐入睡。我也增加了此功能,从常用的角度只保留了30分钟和60分钟两个时间档(沙漏是倒计时结束播放)。再有就是为软件的“关于”保留一个入口,还有因为我有蓝牙立体声耳机所以增加了AirPlay功能的支持(无AirPlay设备时 不出现此图标)。于是就有了下图:
其实,在只有列表的时候我就想到让音乐可以左右滑动以置顶置底了。这个是受Clear应用视频的影响,Clear的设计方式真的带给了设计师一些新的思考方向。本质上那种重要的信息偏靠上不重要的信息偏靠下的内容,都可以采用这种方式处理。
我个人觉得,音乐就可以恰当的使用这种方式,那些因为心情等暂时不想听的歌曲直接右滑就可以置底,意思是“死的远远的”,那些比较关注想多了解的歌 曲就可以左滑把它置顶,这样最方便找到。这样随性的处理,就可以让上面的歌曲偏好听,下面的歌曲偏不好听。这是其它音乐播放器所做不到的,况且它使用起来是如此的简便,这也是这个播放器最大的亮点。
同时,由于把想关注的歌曲左滑置顶了,所以也不需要再保留自带播放器“播放列表”的功能了,因为接近顶端的位置就算是播放列表了。而且我总觉得过去“播放列表”的方式,把歌曲在多个列表间移来移去过于机械化,一点也不随性和简便。歌曲左右滑动见下图:
我并没有保留可以拖动歌曲排序的功能,因为单手那样操作并不容易,即便要双手来这样操作那大概也是有强迫症思维的人才会去刻意组织每一首歌的排序。“刻意”就违背我“随性”的原则,况且按住并拖动歌曲也会大大增加误操作的机率。
至此该应用主要功能的设计过程应该介绍完了,简单总结为三点:
在列表直接播放,可以快速试听歌曲。
左右滑动可以将歌曲好听与否快速分开。
点击演唱者图标可以快速查看该演唱者歌曲。
因为手机有侧键可以控制音量,所以没有在软件界面上保留音量控制。听音乐时没想到还需要进度条,所以没有进度条控制,不过跟自带播放器一样你可以按住“下一首”来快进歌曲(同时支持线控方式)。 因为OooPlay播放器只有一个主界面且全图标设计,不需要额外的翻译即可全球发行。基于全球用户这样一个市场,无法提供比较靠谱的联网显示歌词服务。加上用户iTunes自带的音乐多数不带歌词且无法逐句定位显示,所以综上原因我们也舍弃了显示歌词的功能,就让随性的音乐响起,不必在意他唱的每一句都 是什么。
再谈谈细节
为了把产品做到接近于完美,OooPlay极简音乐播放器还有很多细节做了精心的处理,下面列举几点(部分内容在之前文章中介绍过,已经了解的可直接跳过):
正在播放的歌曲如果右滑,那表示不想听,所以此歌曲会停止播放并置底,然后开始播放“下一首”歌曲;如果是正在播放的歌曲左滑,表示好听 或想关注,所以不能够停止播放。该歌曲需要置顶,但是该歌曲需要留在原来的位置上,因为当该首歌播放完以后需要播放下面一首歌,而不能去播放顶上的第二首歌,因为那些可能是从上听下来刚刚听过的歌曲。
左右滑动是全局性的操作,在任何搜索结果中左滑过的歌曲,回到所有歌曲列表时依然能够在最上面找到,不必担心只有回到那个搜索结果才能在上面找到。
不是所有歌曲后面都显示演唱者图标,只有某演唱者在库中的歌曲数量在1首以上时才会显示,因为如果该演唱者只有一首歌曲的话,你再去搜索也没有意义了,避免你搜索完发现还是只有一首歌曲而失望。
随机播放时的算法做了特殊处理,曲库如果有10首歌以上,最下面1首歌随机时不会被播放到;如果有20首歌以上,最下面2首歌不会被播放到。以此类推最多会有30首最下面的歌随机时不会被播放到。避免你随机播放时还是会听到你最近不想听的歌曲。
列表的方式会有误操作的可能,如果你错点了一首歌曲,可以在5秒钟以内按“上一首”,就可以回到刚才听的歌曲,并且从断开的位置继续播放。5秒钟以后,说明你大概不是误操作,再按“上一首”就会正常跳到“上一首”歌曲上。
当一首歌快唱完的25秒以内,也就是歌曲高潮基本唱完的时候,如果你按“上一首”按钮,会重新播放当天歌曲。因为当快唱完的时候你按“上一首”大概是这首歌曲听着很爽,想再来一遍。iPhone自带的播放器是开始播放3秒钟以后,按“上一首”重新播放当前歌曲。
如果你新同步了5首歌进到手机里,新同步的歌曲会排在原来所有歌曲的最上面。你新同步进来的歌曲大概就是马上想听下它们吧,所以把它们放在最上面。你原来那些歌曲的排序也都保留了,不会因为同步而让你所有歌曲重新排序。
正如你看到的,从启动画面开始我们就做了连贯的动画衔接,让每一层含义都清晰可辩。
我们不想单单为了让你看一下无用的“关于”信息就多占用一个界面,所以在那里我们的“夜间模式”还能给你最后一层惊喜。
开发过程大致经历了以下几个阶段:
2013-01-21 受到DailyCost激发,决定要从音乐播放器角度做个产品。
2013-01-22 上午纸上完成草图,晚上制作出了最初的主原型界面。
2013-01-24 经朋友介绍找到我应用的开发者 rexshi,28日找到界面设计 soioi。
2013-03-03 过完春节并完成所有原型细节,回到北京。
2013-03-16 沟通完各项工作,开始进入开发阶段。
2013-05-15 主体开发功能完成,放出了一个开发者版本的演示视频。
2013-05-24 发布了一个公测的预览版本。
2013-06-14 提交AppStore审核。
2013-06-21 OooPlay审核通过上线,当天达到付费音乐榜第7名,次日达到第3名。
㈣ iphone版酷狗音乐主界面的设计理念 用到了什么ui控件
狂小狗风格
㈤ OPPO音乐手机的手机介绍
2008年OPPO公司正式推出音乐手机,那么OPPO的音质的确是做得深受大家的喜欢。主要是音质方面很好,所以音乐手机会有这么多狂热者。
㈥ APP界面设计注意什么
APP界面设计应从图片、文字、色彩、图标、留白这些方面注意着手于设计。
1、图片,如同一个人的衣着品味
图片在APP中是非常常见的,图片的展现形式和图片的质量都影响着用户对产品的感官体验。
图片的定位就如同一个人的衣着品味,不同的穿衣风格会使别人对你作出不同的判断,为你打上不同社会属性的标签。
下面我们一起来看看图片在APP设计中需要注意的关键点,将会从图片比例、一致性、图片质量与真实性等方面进行分析。
1.1、图片比例有什么讲究?
不同比例的图片所传达的信息主体不尽相同,根据产品属性我们会选择与之相符的图片比例进行整体的框架布局。
通过体验一些主流的APP,我们会发现一些比较常用的图片比例,如 1:1、4:3、16:9、16:10等等;
也会发现一些打破常规比例的设计,我们需要分析它们的性格,结合自身产品的特点,才能在自己的APP设计中合理的加以运用。
1:1 强调主体的存在感
1:1的图片比例是比较常见的一种设计比例,利用此长宽比更容易将构图归整得简单,突出主体的存在感。
常用于产品展示、头像、特写展示等场景,在电商类APP中尤为常见。
4:3 图像紧凑、更易构图
4:3的图片比例可以使图像更紧凑,更易构图,方便设计师发挥。由于手机屏幕容量较小,作为全屏展示时,该比例在App设计布局上面占用空间较大。
16:9 电影场景般的效果
16:9的图片比例可以呈现电影场景般的效果,多用于横向构图,是应用非常广泛的尺寸比例之一,能给用户一种视野开阔的体验。
在很多影视娱乐类APP设计中运用广泛,如腾讯视频、网易云音乐等。
16:10 拥抱黄金比例
黄金比例就像金字塔上的明珠,越接近她越有魅力,反之会魅力减弱,16:10的图片比例最为接近。
设计没有绝对的标准,我们可以遵循一些优秀的经验规则,但是也要敢于突破规则,尝试更多的可能性。
X:≤Y 瀑布流设计
X:≤Y代表宽度固定,高度在最大值之间自定义的瀑布流设计,在一些用于用户没有很明确的目的,只是喜欢获取尽量多的信息的情况下采用这种设计方式。
X:≤Y的图片比例要注意高度的控制,不要超出屏幕可显示区域的范围,如花瓣网在750x1334px的设计中高度最大值为:848 px。
以上列举的仅为部分常用比例的分析与说明,还有更多的比例这里就不一一演示,分享的目的是让大家养成分析的习惯,结合自身产品特点选择适合的图片比例。
图片比例选择方式:
a. 以商品展示效果为准,选择能够充分表现商品特点的图片展示比例;
b. 以产品气质为准,选择符合产品内容气质的图片展示比例;
c. 结合产品特点选择合适的常用比例;
d. 根据版面布局灵活的自定义特殊的比例值;
e. 分析→打破→创新,创造出符合某种规律或者美学概念的比例值。
1.2、图片比例的一致性
当我们结合产品特点确定合适的图片展示比例以后,需要针对整体的布局与图片分布情况,规范出那些布局可以采用相同的图片展示比例。
在保障视觉效果与交互形式的情况下,相同的主体,在不同的页面中最好采用相同的比例呈现,这样的好处不仅可以保持视觉表达的一致性,也能给后期运营维护带来便利。
1.3、提高图片的质量
越来越多的产品对图片质量开始加以重视,比如网易严选对产品图片的拍摄与处理都有严格的规范,目的就是为了提升产品气质和在用户心中的印象。
我们在设计的时候更要以最佳的图片来烘托我们的设计稿,图片的质量影响着整个界面的格调。
很多伙伴儿会觉得图片都是后期运营上传的,我设计稿做得再精美最终也是没用的。对于这个问题我的观点是这样的:
a. 最佳的设计输出是设计师专业的体现;
b. 把最好的效果呈现给决策者,增加他对你设计能力的印象;
c. 通过制定运营视觉规范来把控图片质量,是可以严格把控你对图片的视觉追求;
d. 你的态度会给你带来好运。
1.4、图片的真实还原
虽然前面提到图片质量的重要性,但是我们不能为了视觉效果选择一些与主题无关的配图,这样也会给决策者一种误导。
我们可以提高配图的质量,但是需要保证图片的真实还原,这样才能让你的设计作品更加真实合理。
在一些本土的产品设计中,对于国外图片素材的运用,需要谨慎对待。如案例中的模特形象,文案信息的传达更加偏向于国内的场景,
如果运用一张国外的模特素材也许逼格更高,可是却无法真实的还原产品场景,会给决策者传达一种错误的认知。
2、文字,我只想知道重点在那里
文字设计的层次感决定了信息的高效传达,通过对文字信息的层次处理可以有效的帮助用户获取信息,提高用户对产品的操作效率。
2.1、对文字信息进行层级区分
当我们拿到交互原型或者别的需求文档时,我们需要对文字的信息层级进行有效的区分,这样才能让用户快速的获取和理解信息传达的内容。
文字信息可以简单划分为重要信息、次要信息、辅助信息等。在进行文字排版时,需要明确的梳理好信息之间的层级关系,提高用户对产品的整体体验。
通过对字体大小、颜色、留白、层级划分等处理,把相同属性的信息归类设计,让整个信息排列主次分明,层级清晰。
设计师在对文字进行视觉表现时,为了达到整体界面的视觉平衡也需要减少对文字样式的运用,不可为了突出文字信息而采用过多的表现样式。
2.2、预估好信息呈现的最大值
当我们在进行界面设计时,初级设计师往往会忽略文字信息的最大值,只是按照自己的习惯进行完美的布局。
最终进入到测试环节时才发现为什么比自己预期的字数多出这么多信息,此时就会出现返工的情况,给整体的产品开发进度带来风险。
作为一名合格的UI设计师,我们需要预估好信息呈现的最大值,而不是取最小值或者随意进行设计,这样将会在执行的过程中遇到更多不可控的风险。
2.3、善于利用提示符进行设计
在一些会出现大篇幅文字信息的界面设计中,为了提高用户对信息的获取效率,我们会根据整体视觉效果选择合适的提示符进行设计。
很多初级设计师会过于遵循交互原型,往往对大篇幅文字的处理过于随意,只做着交互原型的美化,缺乏对用户体验的主动性。
在进行产品交互设计时,有时候产品或者交互无法站在视觉的角度进行信息的梳理和布局,我们需要利用自己的专业来优化你觉得可以更好的地方,也能为你在整个产品环节中树立专业性。
关于提示符的设计表现形式主要有数字、字母、图形、色块等等,只要能有效的区分信息层级即可。
3、色彩,如何成为“色”计师
色彩给人的感受是最直观的,不同性格的配色传达不同的情感。关于配色有一些方法可寻,但是也存在一定的感性判断。
作为视觉设计师,我们需要学习理性的方法技巧,也要不断欣赏优秀的作品,提高自身的审美能力。
3.1、色彩基础知识
色彩分为无彩色系和有彩色系,无彩色系是指白色、黑色、各种深浅不同的灰色;有彩色系是指红、橙、黄、绿、青、蓝、紫等颜色。
关于色彩的更多理论知识这里不做展开,大家自行脑补色相、纯度、明度、对比、性格等等方面的理论知识。
3.2、建立色彩库
作为初级设计师我们对配色的把控不是很稳定,为了提高工作效率,我们需要通过一些理性的方式建立大量的色彩库,应对不同的需求。
下面列举部分个人比较常用的方式供大家参考,色彩收集的方法有很多,我们只需要掌握几个比较适合自己的即可,只要养成习惯并长期坚持,哪怕只运用一种方式,也是收获颇丰的。
a. 通过各类APP采集色彩
体验不同领域的APP,建立不同领域对APP色彩组合的选择,为后期项目设计奠定基础。根据主色进行分类,
如红色系列:网易云音乐、京东、网易严选、网易考拉等等;也可以根据产品气质分类,如文艺、时尚、科技、可爱等等。
b. 通过Dribbble采集色彩
在Dribbble上面,每一幅作品右侧都有该作品的配色文件,发现优秀的作品要养成这种采集配色文件的习惯。
c. 通过摄影作品采集色彩
通过优秀的摄影作品采集色彩也是常用的方法之一。
采集方式:
Photoshop打开图片 → 存储为Web所用格式→ 选择GIF格式 → 颜色选择 8 → 颜色表中双击色块 → 拾色器
d. 通过马赛克采集色彩
借助Photoshop滤镜将图片进行马赛克处理,可以得到优秀作品或者摄影图片的配色组合,特别适合采集同色系的配色。
采集方式:
Photoshop打开图片 → 滤镜 → 像素化→ 马赛克 → 设置单元格大小
e. 从电影中采集色彩
相信大家都喜欢看大片,这部片子之所以能得到大家的追捧,必定有太多值得大家学习的元素。
作为神经敏感的设计师群体,那些刺激到我们神经元的优秀影片场景总是不能错过的。
3.3、提高审美,增强感性判断力
配色能力虽然可以通过一些理性的方法提高,但是也存在一定的感性判断。配色中细微的差异往往都是感性的判断。
我们需要不断的欣赏摄影、绘画、设计作品等等,综合的提高自身的审美,才能不断增强感性的判断力。
作为UI设计师,你不能只关注界面设计,你可以看平面作品、摄影绘画、影视动效,体验手工艺制作、运动娱乐、细心的体验生活中的每一次变化。
3.4、养成分析的习惯
要想拥有良好的配色能力,积累的过程是很重要的。当我们看到优秀的作品,要分析配色之间的对比关系、颜色在色环上的位置关系、HSB数值的关系等等。
只有不断的分析和总结才能逐步形式自己的思维方式,提高不同配色的把控能力。
分析的习惯不只是运用在色彩上面,对于版面布局、文字信息的处理、icon设计风格、间距留白等等方面都需要不断的进行分析总结,掌握优秀作品的规则才能形成自我的标准习惯。
4、图标,从会画到画好之间有多远
图标是APP设计中的点睛之笔,既能辅助文字信息的传达,也能作为信息载体被高效的识别。图标也有一定的界面装饰作用,提高界面整体的美观度。
很多初级设计师都会忽略图标的重要性,也养成去素材网站下载复用的习惯,当这样的习惯养成后便会逐步丧失自己动手的驱动力,什么元素都希望能找到素材下载,工作数年之后很快就遇到了自己的瓶颈期。
设计师对图标设计的态度与把控能力,将会是拉开你与其他设计师差距的因素之一。
图标设计有下载复用 → 动手设计 → 规范设计 → 融入品牌基因等几个阶段,你现在属于哪个阶段呢?
4.1、下载复用
下载复用是很多初入行业的设计师习惯的工作方式之一,由于自身对软件技法、设计技巧、创意能力等方面的不足,无法从创意到标准制图完成一个合格的图标设计。
缺点:图标设计风格与细节处理都完全不统一,这样的习惯一旦养成就会逐步丧失自己的动手能力。
4.2、动手设计
对于大部分有设计追求的设计师,都会意识到图标设计的重要性,也会结合产品特点绘制统一风格的图标。
注意事项:图标设计风格有:线性图标、填充图标、面型图标、扁平图标、手绘风格图标和拟物图标等。
无论我们选择何种表现形式,在进行设计的时候都要保持风格的统一性,由于图标的体量不同,相同尺寸下不同体量的图标视觉平衡不尽相同,例如相同尺寸的正方形会比圆形显大。
因此,我们需要根据图标的体量对其大小做出相应的调整。
4.3、规范设计
当设计师养成自己动手的习惯以后,恭喜你已经进步了,保持这样的习惯。随着软件技法的成熟我们需要严格控制自己的随性,运用标准的规范进行图标设计。
在标准设计的基础上面我们可以发挥自己的创意,也不一定要局限在标准里面,但是总体的本质需要符合设计规范。
4.4、融入品牌基因
图标设计的差异化逐渐变得模糊,随着很多功能的相似性,图标的造型设计也几乎雷同,很多对设计比较讲究的产品,也开始根据自身品牌基因,进行图标定制化。
融入品牌基因的图标设计具有很强的品牌识别性,不仅可以形成独有的视觉差异化,也可以增强用户对产品的记忆。
5、留白,我只想要足够的空间
适当的留白可以让你的界面更有灵性,给信息之间预留更多的空间,也能更好的表达信息之间的层次感,相比拥挤的信息布局更能给人舒适的体验。
当设计师的留白意愿被产品或运营以“希望放更多内容”拒绝时,作为设计师我们可以从不同的方向试着表达自己的观点:
a. 设计出对比稿,把产品需要的方案和你觉得完美的方案进行对比;
b. 筛选出这样处理的优秀案例,以成功的案例说服产品接受你的方案;
c. 进行用户测试,选择一些目标用户进行体验,从用户心声入手设计最佳的方案;
d. 更多沟通的方法有待你去挖掘,最终的目的都是希望做出更好的产品。
设计小结
1. 不同的图片比例反应不同的特征,根据产品特点合理的选择;
2. 设计中保持相同的图片比例,不仅使视觉表达一致,也能给后期运营维护带来便利;
3. 通过提高图片的质量来提高设计作品的美感度,但是也要保证图片的真实还原;
4. 文字排版需要注意信息的层次、信息容量的最大值、巧妙的运用提示符等;
5. 养成不断建立和丰富色彩库的习惯;
6. 提高审美,增强感性判断力,养成分析的习惯;
7. 图标设计经历的几个环节:下载复用 → 动手设计 → 规范设计 → 融入品牌基因;
8. 适当的留白可以给人更加舒适的体验。
㈦ oppo音乐手机平面广告设计说明
你好!这需要和oppo公司或者oppo委托的广告制作人员联系。一般来说是不公布的。
㈧ 有关音乐的设计理念怎么写
是不是指创作理念?
主要是你创作时考虑的最核心的观念。一般就是写你想表达回什答么,如何表达。比如想表达宁静这种心态,通过旋律的延宕柔缓来表达;比如想表达童年的回忆,通过加入小孩子的笑声和玩具的声音这些元素来表达;比如想表达无常,通过各种变奏来表达。等等。
以上是大致思路,至于如何展开,那就是一般写作的问题。可以多看些音乐人和音乐的介绍或者音乐论文。