重磅改版!网易新闻安卓客户端Material design实战

2021-01-24 10:09| 发布者: | 查看: |

小编按:光说不做假把势,聊了那么多的Material design方法,现在是时候看来看中国APP如何紧跟这股时尚潮流了。今日网易游戏的同学们共享了新闻报道顾客端的Material design全过程,来体会下

以前经历几篇Feedly设计方案重做的实战演练文,参考:

网易游戏新闻报道安卓系统版一直至今生搬硬套IOS版的互动和视觉效果,这在一定水平上维持了不一样服务平台上运用设计风格和客户感受的一致性,也相对的降低了设计方案和开发设计的人力资源成本费。
商业网站建设套餐
市面上上的大部分分移动智能终端也是这般。因此,一直至今给客户的觉得是Android沒有单独独特的视觉效果设计风格,可是客观事实并不是这般。没多久前Google发布AndroidL系统软件,视觉效果語言Material design也相对问世。Google为设计方案师出示了一套详细的官方网互动视觉效果设计方案引导,平扁化、绮丽又沉稳的颜色,将卡牌的作用充分发挥到完美。

为此为突破口,网易游戏新闻报道也试着将安卓系统服务平台的视觉效果开展提升重做。在原来构架不会改变的基本上,对目前的视觉效果开展提升,使其更为合乎安卓系统服务平台的气场。

关键提升內容:

1、新闻报道目录

Material design较多的应用了大量积的图形,其出示的导航栏款式以下图:

左图:默认设置的 app bar + tab bar

下图:默认设置的 app bar + 可翻转的 tab bar

网易游戏新闻报道的二级导航栏频道许多,务必能够上下翻转转换,所述的二种方法显而易见是下图更合适。因此根据图中的视觉效果款式并相互配合网易游戏新闻报道的特点,死对头条目录的导航栏试着了下列几类改进计划方案:

计划方案一:

生搬硬套Goolge导航栏视觉效果款式,配网易游戏新闻报道原来的基本色鲜红色,设计方案出下面的图。

因鲜红色导航栏条高宽比太高,看起来压抑感,并危害客户的阅读文章感受,最后沒有选用此计划方案。

计划方案二:

除掉鲜红色导航栏条,增加了头图的高宽比,以照片主导体,视觉效果集中化点更加突显;首屏照片和文本占比1.6:1。但因修改很大,最后也未选用此计划方案。

今日头条目录往上促进出現鲜红色二级导航栏,以下:

计划方案三:

最后网上版本号,与原来版本号对比修改较小,设计风格传统。

2、上下侧抽屉柜

左边抽屉柜,将原来的灰黑色情况更换变成乳白色,并将icon设计风格平扁化,简约五彩缤纷。

右边抽屉柜,在互动同学们的相互配合下开展信息内容归类,分成上中下三一部分,上部:客户有关信息内容,中间:主题活动类信息内容,底端:作用类实际操作通道;并添加莱单项。

3、文章内容页关键点调节

Material design很实际的标准了字体大小尺寸与相对行高中间的标值,如图所示:

以1080*1920px的安卓系统手机上规格为例子,便于阅读文章的文章正文字体大小尺寸要求为54px,即18sp。在这个基础上依据文章正文字体大小尺寸来调整均衡,决策大题目、時间、来源于、导语等文本尺寸。

照片在文章内容页內部的部位关联demo,以下:

针对文章内容页底端的频道,如:有关新闻报道、受欢迎跟贴等,开展卡牌化设计方案,对每个频道开展视觉效果标准统一,并突显每个频道的主题风格,与左边抽屉柜的icon色调维持统一,如有关新闻报道与新闻报道icon的色调值同样;受欢迎跟贴与跟贴icon的色调值同样。

4、跟贴页

Material design对含有标志或是头像的內容干了实际标准,上下都有16dp的竖直行高。含有标志或是头像的內容有72dp的左侧距。以下图:

Inbox实例:

根据之上标准,尝试对新闻报道跟贴页作出以下demo设计方案:

能看出,Google标准下的各种各样间隔在具体运用时都看起来较为大,也将会是汉语的缘故。因此,在这个基础勤奋行改动,设计方案出以下最后版本号:

除开变小头像尺寸以外,还变小了网页页面上下间隔,最后的视觉效果实际效果文本看起来较为紧凑型。

5、写跟贴网页页面

Floating action button(FAB)是Meaterial design的一个视觉效果闪光点。因此,因为我费尽心思将会的把这一闪光点应用到网易游戏新闻报道中,因此尝试干了下列计划方案。

计划方案一:

此计划方案最后无法根据。缘故是互动同学们感觉FAB不适感合应用在写跟贴那样与文章内容內容有一定借助关联的网页页面中。它较为合适发布一个新的念头,如Google+这类的。

计划方案二:

写跟贴弹出窗口全屏幕网页页面显示信息,此计划方案最后也因所述缘故无法根据。

计划方案三:

最后网上版本号。与本来版本号对比无很大修改。

计划方案四:

根据大屏幕手机上的设计方案,将写跟贴的按键从右上方移到左下方,有利于客户单手实际操作。此计划方案已经开展小范畴客户检测。

6、别的网页页面

定阅、视頻、照片等频道都相对干了卡牌设计方案提升。

在仅有视觉效果提升的网易游戏新闻报道安卓系统重做中,相对性的限定过多,视觉效果设计方案起來轻手轻脚,所述一些计划方案无法得到毫无疑问,网上的设计方案又相对性传统,针对安卓系统的重做都不够完全。在一直倡导自主创新设计方案的今日,做为设计方案者来讲,本次的安卓系统视觉效果重做并沒有做到预估实际效果。期待能在之后的工作中中获得商品和互动的适用,能在视觉效果上作出自主创新,添加合适的动漫,及互动方式等。商品一直不在断探求自主创新中发展,大伙儿相互勤奋做一件事儿,结果一直会稳步发展的方位发展趋势。

【再加这三篇,Material design学习培训材料就可以了!】

Material design究竟有什么过人的地方?来这儿学习培训!

一样来源于学神的通过自学手记,干货知识满满的!

Google自己设计方案师对它的观点与实践活动感受:

创作者:

【优设网 原創文章内容 文章投稿电子邮箱:】

================有关优设网================
优设网 是中国人气值最大的网页页面设计方案师学习培训服务平台,潜心共享网页页面设计方案、无线网络端设计方案及其PS实例教程。
【特点强烈推荐】
设计方案师必须读的100这书:有史以来最齐的设计方案师书籍导航栏:。
设计方案新浪微博:有着粉絲量94万的人气值新浪微博 ,热烈欢迎关心获得网页页面设计方案資源、免费下载顶级设计方案素材图片。
设计方案导航栏:全世界顶级设计方案网站强烈推荐,设计方案师必需导航栏:
———————————————————–
想手中机上、被窝里获得设计方案实例教程、工作经验共享和各种各样出乎意料的 褔利 吗?
加上 手机微信号:【youshege】优设哥的全拼
您还可以根据扫描仪正下方二维码迅速加上:


有关大家

优设是中国具有人气值的设计方案师服务平台,2012 年创立迄今,一直潜心于设计方案师的学习培训发展沟通交流。 大家根据优设网、优优实例教程网沉定优良设计方案专业知识的同时,更首先通水互联网媒体行业。现阶段主打产品新闻媒体引流矩阵包含:、、、@优设AI高手等,各大网站粉絲量过干万。

<
>

 
QQ在线咨询
售前咨询热线
18720358503
售后服务热线
18720358503
返回顶部