首页

设计的UI界面总感觉乱糟糟?从这7个问题里找原因!

资深UI设计者

翻译:Siyang  审校:ArialXu  |   UXRen翻译组 #376译文
原作者:Denislav Jeliazkov
原标题:《Is Your UI Messy? 7 Common Mistakes to Avoid》

 

当我们设计高品质产品时,任何微小的细节都是至关重要的。

很多人会争论好的用户体验和好的用户界面哪个更重要,而我则认为两者都非常重要。如果其中一个失败了,你就无法对用户产生影响。然而,很多时候用户并不会考虑用户体验是什么,而是基于外观来评价一款产品。

 

1. 忽视边界/糟糕的规划

Ignoring Scope/Bad Planning

那些含有lorem ipsum(模板里填充的默认文本)的产品和库存照片,你多久使用一次? 我想大家都从来没用过。如果你想提升你的技能,设计时请注入真实内容。网页会展示哪些真实的图片,真实的标题可能有多长字符?一旦你美丽的设计被真实的内容填满,它就会面目全非。

具体来说,在开始UI设计之前,你需要知道页面的每个部分将显示什么类型的内容。你还需要知道内容的最小和最大尺寸。这些转折点(turning point)被称为极限情况(edge case),因为它们决定了界面何时以及如何改变。

图片的选择

你还需要提前研究图片的使用限制。如果你的客户没有任何定制照片或不打算购买任何照片,那你就没必要使用来自Unsplash的漂亮但毫无意义的照片。

为什么毫无意义? 因为这些照片都是纯概念性的。用漂亮的东西是不够的。相反,你需要选择那些能够创造故事情节或具有深远意义的图像。

无论你做什么,不要使用那些毫无必要的照片。如今,人们被大量信息淹没。额外一点无用的视觉信息只会激怒他们。

 

理解重复模块

另一种极限情况与重复模块有关。例如,图像+文本、图标+文本、数字+文本…。你应该考虑两行文本和十行文本时这些模块会是什么样子,以及它们是否会一个接一个地出现。

对于描述性功能的小型文本模块,使用三列布局是一个很好的选择。然而,如果你的文本超过五行,并且不能使用省略号(…)来收起文本,你就必须想出另一种视觉解决方案。为什么?因为又窄又长的大段文本只适合原始的报纸阅读,而对网络阅读十分不友好。可能的解决方案包括这两种:水平滑动的轮播模式(Slides)和两列布局。。

提前为扩展性做规划

了解内容的极限情况有助于更有效地使用屏幕空间,并为界面的各个模块选择正确的界面处理方式。但是要记住,极限情况并不仅仅是你当前已经遇到的情况。优秀的设计师总是会主动思考客户将来扩展UI的可能性。

 

 

2. 没有区分操作行为的主次

No difference between primary and secondary actions

设计应用程序时,会涉及到很多需要用户完成的操作。强化主操作(primary actions)的视觉重要性非常重要。所有的导航都是通过按钮完成,所以你必须通过加粗和突出的方式让用户更容易识别主操作,次要操作(Secondary actions)则不要那么突出,但如果用户需要寻找它们,它们是可见的即可。

以下是区分主操作和次要操作的方法:

  • 在主按钮和次要按钮上采用不同的视重(visual weights),视重最强的按钮会得到更多的关注。
  • 因此,使用强烈的颜色、粗体文本和按钮大小来强化主按钮的视重,次级按钮正好相反。

 

3. 令人沮丧的出错状态

Frustrating error states

当你在设计用户界面时,不要忘记任何用户界面的核心目标:在用户和服务之间提供尽可能流畅的交互。界面不应存在疑惑、没有答案的问题,亦或是任何的不确定性。

设计师应该向用户提供产品状态的清晰反馈,特别是在产品处于出错状态时。因此,出错时的提醒应满足以下的几个简单规则:

  • 它们应该是可识别的和引人注目的。(例如,红色是表示错误的常见 UI 模式)
  • 它们应该清楚地解释发生了什么,以及用户可以如何修复。
  • 它们应该与上下文相关联。(显示错误提示的地方最好紧邻出错的UI元素)
  • 它们不应该是带刺激性的。(你的用户对这个错误还不够恼火吗?)

设计师还应该注意那些意外错误情况(如服务器错误、页面未找到)。任何错误都是用户使用流程上的障碍。这就是我们需要帮助用户处理它的原因,提供任何可能的解决方案,并试图消减糟糕的体验,尤其是那些非用户自身原因造成的错误。例如,对于404和500错误(页面未找到),一个可能的好方案是为这些页面设计插图或动画。

 

慎重对待表单校验

在设计错误状态时,尽你的最大努力不要惹恼用户。特别要注意那些所有可能发生的表单校验情况。

举例而言,假设你有一个包含必需字段的表单。这意味着开发人员有一个相应的校验:“所有的必填字段不能为空。”假设用户试图以随机的顺序填写表单,当第1个必填字段失去焦点状态时,它会弹出一个错误提示:“请填写此字段,该选项是必填项!”

看到这个反馈的可怜用户惊叫道:“等一下伙计,我只是在表单项之间切换,还没有点击‘提交’呢!”事情甚至可能变得更糟,例如,假设你有另一个校验设置:在所有必需字段全部填写前,“提交”按钮是禁用状态。

想想看吧!你那些可怜的用户什么也没做,就无法提交表单,但是你已经将好几个错误归咎于他。这肯定会激怒所有人,你最好避免这种情况的出现。

衡量成本与价值

不要听那些开发工程师忽悠:“按你想要的交互方式开发程序,这需要耗费大量精力”。请记住: 如果不能避免这个问题会让你付出代价,“失去用户”的巨大代价!即使它的开发成本很低,没有用户的产品一文不值。

 

4. 没有对齐

Poor alignment

好吧,我承认,我是个对齐狂魔。但这只是因为一旦你发现了对齐的魔力,你就会意识到它是让任何布局看起来漂亮和和谐的关键。

许多设计师认为使用栅格系统(grid)会限制你的创造力,在某种程度上,这的确是真的。然而,如果你是一名刚入行的UI设计师,我认为你十分有必要在打破这些规则之前,先学会它们。

适当的填充(padding)和间距(spacing)可以让你的版面保持整洁有序,同时也能让读者更容易地阅读和理解信息。

在逻辑块(logical blocks)周围应该设置相同尺寸的间距(例如,在顶部和底部,以及在左边和右边)。如果间距尺寸不一,你的页面看起来会很混乱,导致用户对不同部分投入不均等的注意力。

而填充太小则意味着用户无法将内容分解成更多的逻辑模块。为了防止逻辑模块混杂在一起,你需要把它们分开,并在它们之间插入一个大的间距。

维持视觉层级结构的一个简单方法,是遵循如下的简单规则:不同逻辑模块之间的填充尺寸应该大于每个模块内标题和文本之间的填充尺寸。例如,假设你有一个包含主标题、副标题和段落的超长文本,那么你需要:

  • 将标题的底部填充(padding-bottom)设置为40px,然后再在后面在插入文本段落。
  • 段落的底部填充(padding-bottom)设置为10px。
  • 如果段落后面有一个副标题,副标题的顶部填充(padding-top)设置为30px(也即,段落与副标题之间的间隔是30px),并将其底部填充(padding-bottom)设置为20px(也即,副标题与下一个段落之间的间隔是20px)。

这样的设计可以很好的强调重点。主标题是最大号的文本,周围有相对较大的空间,但仍与紧随其后的元素保持相近的距离。

 

5. 弱对比度

Low Contrast

设计产品和设计一座公共建筑(如图书馆、学校等)有些相似之处,产品需要很高的包容性,能满足不同人的需求,这也包括了盲人、色盲和弱视群体。

你可以问问达美乐披萨是否认同产品包容性的重要价值。达美乐的网站设计一点也不无障碍(accessible),他们被一位无法通过网站订购披萨的盲人告上法庭。请不要学达美乐,做设计一定要考虑无障碍。

我们作为设计师,往往关注如何做好看的设计,而忽视了多元化用户的交互需求。

作为一个成熟的设计师,我已经能够心平气和地对待那些限制我做出“完美设计”的条条框框了,这其中就包括ADA(美国残疾人士法案)的相关条例。

为了让文字和水平空间更协调,而把字号缩小到8px;或是仅仅为了美观而使用浅灰色,这些行为都忽视了弱视访客的使用需求。

为了在Dribbble集赞,设计时我们可以忽略无障碍,但是当我们在为真实的用户设计产品的时候,忽略无障碍显然不是个好主意。

按照网络端内容无障碍设计指南(WCAG)的要求,我们至少需要提供4.5:1的色彩对比度。这份指南还阐述了针对运动、听觉和认知障碍用户的视觉设计指导方针。

为确保符合这些规范要求,你可以下载Stark软件,它可以帮助检查你的设计是否满足了无障碍设计的要求。

使用留白

我的意思是,如果你把两个完全不同的元素紧挨着排列,用户无法搞清楚哪个元素是“主要”的,哪个是“次要的”。这就是为什么我们会说,强调对比不仅仅是将不同的视觉效果应用到各个元素上,也需要使用留白的艺术。有时候为了使元素形成对比,你需要用留白来分隔它们。

留白很重要,它使内容更便于用户阅读。当然,有时候留白也会使用不当,比如有太多的空白或者在一个小区域内塞进了太多的内容,这都不是正确使用留白的例子。许多充斥各种广告的网站也缺乏足够的留白。

 

确保文本和图像之间有足够的对比度

避免把低对比度的文本放置在图像上。文字和背景之间应该有足够的对比。为了使文本突出,可以在图像上放置一个提高对比度的滤镜。黑色很流行,但你也可以使用明亮的色彩,搭配使用。

另一种做法是从一开始就使用高对比度的图像。在这种情况下,你可以把文本放在照片或图像的深色区域。

 

6. 糟糕的图标设计

Poor Iconography

当你需要通过一个小符号来表达意思或简单说明一种含义时,图标非常有用。它们也是现代界面设计的基本组成部分,特别是在移动终端上。

在应用程序中,图标通常相当于按钮。看看Instagram,你只会看到图标和文字。

这就是选择正确的视觉图标来呼应元素含义如此重要的原因。听起来很简单,对吧?其实并不简单。找到正确图标的过程是非常痛苦的。

你需要用大家都能理解的、简单的、常见的图标来表达语义。其次,你还需要将这些图标与整体UI风格相匹配,最后,你需要以SVG格式把图标提供给开发人员。

或许你曾经搜索过免费图标,当你为所有元素找到对应的漂亮图标时,你会很兴奋。你想,它们是多么完美地吻合啊! 它们会被每个人理解!遗憾的是,你所选择的图标库给人的整体印象往往是凌乱的。如何才能避免这种凌乱呢?以下是一个简要策略:

  • 线宽(Line width)
    调整尺寸后,所有图标的线宽应该都是一样的。否则,用户会明显感受到线宽不等所带来的混乱。
  • 圆角半径(Corner radius)
    如果你的图标包含一些矩形形状,仔细核对你图标库中每个图标的圆角半径。如果它们尺寸不同,你最好把它们调成一样的。
  • (针对线型图标的)线段末端形状(Line cap shape)
    它可以是矩形的,也可以是圆形的。
  • (针对线型图标的)线段转角形状(Corners join shape)
    它可以是矩形的,也可以是圆形的。

确实,没那么细心的用户可能不会特别注意到线宽或圆角半径的不统一。尽管如此,设计给人的整体印象还是哪里怪怪的,用户能感觉得到。

换句话说,虽然使用免费图标并没有错,但最好还是不要用太多。使用免费图标会让产品看起来很廉价,甚至是不专业的。另外,还有很多免费的图标,人们很容易一下子认出来。为什么? 因为他们早就发现这些图标被到处滥用。

这也是我建议严格筛选免费图标的原因,当然,如果能自己设计图标就更好了。自定义图标总是为用户提供更优越的体验。

 

7. 未考虑多终端

Not thinking cross platform

是的,理想情况下,这在当下应该不再是一个问题。

我们都知道,大多数用户通过移动设备访问网络服务。不幸的是,许多设计师仍然会忘记这一事实。(我猜或许是因为客户不愿意花钱去做移动端设计的优化?)

然而,对于专业的设计师来说,不考虑多设备的兼容优化,这种情况不应该发生。在创建UI时,你应该始终牢记“手机端优先”的法则。

请关注一下不同的用户在每个页面上所看到的内容。然后,问自己:“为了展示某个特定的内容,我选用的UI控件是否合适?”

你可能选了一个很好的UI控件,它可以完美地在桌面设备上工作,但对于手机用户来说,它就并不是那么好用了。反之亦然。这就是为什么我们必须时刻牢记现今设计必须考虑多设备终端的原因。

 

糟糕的触摸区域

微小的点触目标会让用户感到沮丧,因为它们导致用户难以完成预期的操作。我们都经历过在智能手机上点错按钮,等待错误页面加载时的沮丧感!

所以,在设计可点击元素时,请记住用户的手指大小都是不同的:

  • 记住成年人食指的平均宽度是1.6-2cm,要设计适合手指点触的目标。
  • 保证你的点触目标至少有45-57px的宽度。这将给用户足够的空间击中目标,而不必担心准确性。

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:UXRen  作者:Denislav Jeliazkov

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



把握创造力的5个层次,了解设计师如何成长!

seo达人



什么是创造力?对于在设计行业工作的人来说,这是一个很难回答的问题。如果谷歌搜索这个问题,会发现很多答案,比如:创造力就是创造新的东西。创造力就是把好的点连接在一起。创造力就是想出一个想法或一个新产品。我个人更喜欢下面的定义:“创造力是将新的和富有想象力的想法变为现实的行为。创造力涉及两个过程:思考,然后生产。”

 

如果你有一个大胆的想法,但却不付诸行动来实施它,证明你富有想象力但缺乏创造力。

因此,创造力不仅仅是思考一个想法,还要把想法变成现实。下面是5个不同层次的创造力水平:

 

层次一:复制

图片

临摹优秀的设计作品仍然是一种创造力。这是最低水平的创造力,只能用于培训或练习的目的。

我们不应该将这个层次的产出用于商业用途或者称这个想法是自己原创的。

 

层次二:复制+修改

图片

为了提高水平,我们不能仅仅临摹或复制某个东西,更需要修改它以适应现在的使用环境。这意味着我们必须开始把我们的想法投入到作品的创作中。

这个层次的产出已经可以用于商业用途,但很大一部分工作仍在复制。

 

层次三:复制+修改+改进

图片

在这个阶段,设计师已经达到了一定的成熟度。每个设计方案都必须放到产品应用的环境中,并且需要仔细考虑每个设计决策,以验证这些方案或想法。

例如,下图是原版的添加新内容的动效设计,动画效果相对复杂。

图片

通过对这个动效进行修改和改进,下图中输出的设计更简单,更容易在产品中实现,同时还减少了用户在真实产品中可能无法识别的不必要的动画效果。

图片

在这个层次上,你可以被视为是一个高级设计师。

 

层次四:趋势制造者

图片

作为趋势制造者,技能必须处于较高的水平,每一个想法都能以独特的方式执行,并且带有自己的个人风格。

这个层次的设计师的作品会受到大多数人的重视和评价,因此有足够的支持来创造一个新的“趋势”,激励其他设计师甚至影响客户使用这些作品作为他们的参考。

 

层次五:系统制造者

图片

这个层次的设计师是定义全新的设计并设置新创意的先驱,是其他人进行创意工作的基础。

在绘画方面,我们有艺术流派:印象派、野兽派、立体派、超现实主义等。在技术方面,有“人机界面设计-iOS”或谷歌Material Design-Android。无论产品设计师是什么风格,他们的设计都必须遵循这两个应用平台的规则。

 

最后

创造力的五个层次分别是:

复制

复制和修改

复制、修改和改进

趋势制造者

系统制造者

图片

通过了解创意层次希望能有助于你从另一个角度来看待创造力,了解创造力水平。

现在的你处在哪个层次呢?

 

原文地址:medium.com

译文地址:Clip设计夹(公众号)

作者:Hoang Nguyen

译者:Clippp

转载请注明:学UI网》把握创造力的5个层次,了解设计师如何成长!


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


竞品分析:新浪新闻 VS 今日头条

资深UI设计者

编辑导读:随着互联网的迅速发展,人们越来越倾向于移动端浏览新闻资讯。一方是四大门户之一,新闻资讯行业的“老人”,另一方也依靠着抖音的引流以及其众多的视频版权而爆火。本文将就着两个新闻资讯类APP进行多方面分析,一起来看吧!


一、产品概况

1.1 产品概述及版本

新浪新闻是新浪集团旗下的新闻资讯客户端,致力于利用大数据和人工智能技术,为用户提供更丰富、场景化和个性化的内容阅读体验。新浪新闻与微博打通了双平台的内容、数据和账号体系,为用户提供全网资讯、热点要闻、深度精选、精彩视频、高清图集等精彩内容。

新浪新闻始终服务于用户的高品质内容阅读需求,除了将新浪网各频道创作的优质内容和精编专题推送给用户,还与新华社、人民日报、中央广播电视总台等众多权威主流媒体合作,为用户提供高品质的新闻;此外,还邀请众多不同领域的头部自媒体创作者入驻,为用户提供更多优质的长尾内容。

截至2020年四季度,新浪新闻APP月活跃用户已保持连续20个季度的高速增长,月活跃用户规模达1.36亿,日活跃用户规模突破6850万;手机新浪网日均用户量达5774万,月均用户量超过1.76亿;新浪移动月度生态流量突破5.1亿,领跑全行业。

最新版本7.61.0

1.2 体验环境

  • 设备型号:iphoneX
  • 操作系统:ios14.6
  • 测试网络:电信4G

1.3 选择理由

笔者是新浪新闻的老用户,平时把新浪新闻app作为主要收看新闻的方式,作为自己产品生涯的第一份竞品分析报告,选择自己喜欢并且熟悉的app进行分析更加合适。

而且没有任何一款app是完美无缺的,在这个充斥着火药味的市场中,出色的竞品无时无刻不再盯着对手的一举一动,资源争夺战一触即发,新浪新闻如果想赶超对手,力压群雄还有很长的路要走,只有增强自身的优势,补足劣势才能赢得更广阔的市场。

二、竞品选择

2.1 选择目标

今日头条(当前版本8.2.6)

今日头条是北京字节跳动科技有限公司开发的一款基于数据挖掘的推荐引擎产品,为用户推荐信息、提供连接人与信息的服务的产品。由张一鸣于2012年3月创建,2012年8月发布第一个版本。

2.2 选择理由

今日头条基于个性化推荐引擎技术,根据每个用户的兴趣、位置等多个维度进行个性化推荐,推荐内容不仅包括狭义上的新闻,还包括音乐、电影、游戏、购物等资讯。是当今最热门的新闻手机客户端之一,并且通过抖音引流,有大量的新用户涌入,有很多值得学习和借鉴的地方。

2.2.1 市场分析

资讯市场概览:

  • 新资讯行业在疫情期高峰过后用户需求有所减退2020年3月至5月活跃用户规模逐月下降;但到了6月至7月,也许是受到“毕业季”的影响,行业活跃用户出现了小波幅的增长,7月份的MAU接近7亿。
  • 作为连接用户与信息的桥梁,内容对于新资讯平台来说是长久吸引并留住用户的核心要素;资讯内容已从最初单一的专业采编发展成百花齐盛的生产模式,现阶段内容生态正在逐步完善。
  • 目前资讯内容的建设已发展出自采自编、自建生态及内容聚合三种模式;自采自编模式可以保障内容质量内容聚合模式下的内容丰富度更高,而自建生态模式则结合了上述二者的优点。

2.2.2 市场趋势以及行业现状

2.2.2.1新闻资讯行业发展趋势

新闻资讯行业从2012年的PC门户时代,经过移动化、视频化发展,进入基于5G和物联网带来的智能新时代。资讯平台整体月活超6亿,覆盖近八成的移动网民。

由用户每月使用到的各类app统计图来看,新闻排在第6位,有效使用时长排在第4位,说明新闻类的app在人们日常生活中的使用较为频繁,部分用户有通过新闻类app了解资讯的习惯。

                                               数据来源:艾瑞数据

2.2.3 竞品市场规模

2.2.3.1 新资讯行业活跃用户规模

2020年3月开始,随着疫情的好转,新资讯行业整体呈现退潮效应活跃用户规模回落至相对正常水平;到了6月至7月,也许是受到“毕业季”的影响,用户对于高考、大学志愿填报、招聘等相关资讯内容需求增加,行业活跃用户出现了相对明显的增长,7月份的MAU接近7亿,环比Q2的4月份增长约1500万,但随后又有所回落。

2.2.3.2 用户活跃度

移动互联网市场已经全面进入存量时代,用户结构趋于稳定。新闻资讯领域MAU达6亿,今日头条、腾讯新闻、新浪新闻三强鼎立,逾七成的新用户流向这三家。

对比2020年和2021Q1新闻资讯市场MAU、同比变化情况,新浪新闻增长强劲,2020年同比增长60%,2021仍能保持行业里较高水平的增长,从行业第三居上,超过腾讯新闻,成为行业第二;搜狐新闻同比增长在行业里排名第一;看点快报、趣头条MAU连续下跌。

2.2.3.3 用户使用时长

2016-2019年,移动设备单月使用次数呈升高趋势,但使用时长有明显下降。2021Q1今日头条、新浪新闻、趣头条都超过40分钟,而排名较后的看点快报、网易新闻、腾讯新闻在20分钟以内;排名靠前的新浪新闻、排名较后的腾讯新闻、网易新闻的同比增长率较高,趣头条、搜狐新闻的用户使用时长缩短。

2.2.3.4 下载次数

2.2.3.5 平台渗透率

在主要新资讯平台中,百度APP的用户量级处于绝对领先地位,2020Q3渗透率达42.7%,较去年同比有2个百分点的增长。今日头条和新浪新闻等资讯平台在Q3均没有较大幅度的渗透率增长,甚至多数平台同比为负增长。

2.2.3.6 日均新增用户

2020Q2及Q3,百度APP平均每日新增用户数均为150万左右,属主要资讯平台中新增用户量级最大的平台,且在03较去年同期的新增用户多出40万,新浪新闻在03较去年同期新增用户为10.3万,而今日头条等新增用户量同比却有较大幅度的缩减。

三、竞品定位以及用户分析

3.1 产品定位

3.2 使用人群性别占比

新浪新闻:

今日头条:

数据来源:艾瑞数据

从上图可以看出,不管是今日头条还是新浪新闻,男性用户略多。

3.3 使用人群年龄占比

新浪新闻:

今日头条:

数据来源:艾瑞数据

由上图不难发现,在31岁以上的使用人群中,占比是随年龄增长而递减的,说明随年龄增长习惯使用手机来获取新闻资讯的人越来越少。两者人群年龄结构差异主要体现在35岁以下的使用人群当中,新浪新闻使用最多的用户群体在24岁以下,而今日头条使用最多的用户群体在25-30岁。新浪新闻使用群体结构更加年轻化,随着年龄的增长逐渐递减。今日头条在25岁以上的用户群体中则均比新浪新闻占比要多。可以看出,新浪新闻推送的内容以及使用方式可能更受年轻人的青睐。

3.4 使用区域占比

新浪新闻:

今日头条:


数据来源:艾瑞数据

分析建议:两者都有显著的特点,用户群多都集中在沿海或者经济较为发达的地区,说明经济条件较好的地区人们有更大的新闻热点资讯需求,更习惯使用新闻类的app,新浪新闻可以增强对内地市场的拓展,抢先占据市场。

3.5 用户主要使用场景时长

由于移动互联网的普及,用户方方面面都离不开互联网,同时,人们对移动新闻客户端的依赖性也逐渐上升,大概分析了下具体的使用场景有以下:

  • 使用场景一:某一白领在早上醒来的时候,会想尽早看到早上的头条新闻,就会打开手机用新闻客户端看新闻。
  • 使用场景二:这个白领在吃完中饭,午休的这段时间,拿出手机看一下有没有什么有趣娱乐的休闲新闻来打发时间。
  • 使用场景三:下班回家,乘地铁的时候,坐下来寻找看看自己感兴趣话题的新闻。

3.6 用户对资讯内容形式偏好

用户对于资讯内容的形式偏好发生改变,视频化趋势明显

近年来,用户对于图文形式的资讯内容偏好度有所减少,更多的注意力转移到短视频、长视频及直播上;其中,短视频凭借“简短有力”的特质,在整个内容产业迅速幕延,直播则具备全时性、即时性、互动性等特点,极大地丰富了用户获取资讯的体验,同时也为平台的商业变现提供了很大的机会;在未来,随着5G技术的发展,互联网直播的体验将会有很大的提升,届时资讯+直播的形式或会抢占用户更多的注意力

数据来源:极光数据

分析:内容载体越来越丰富,用户对于资讯短视频的偏好度明显提升,而刚起步不久的资讯直播形式则极具发展潜力。今日头条通过加大各类视频的发展力度也吸引了大批用户流入。但是新浪也没必要仿照今日头条的发展路线,在做好自身各项新闻资讯功能的同时,完善优化视频专栏。

四、产品结构

今日头条:

结构分析:

不难看到目前版本由四大板块组成(头条,西瓜视频,放映厅,我的),先来看一下首页板块,其实首页作为一款App的核心用户场景,结构简洁肯定是用户非常看重的因素,可以看到头条的首页其实很简单,就是由频道标签(包括)以及编辑、搜索组成,简洁但又能突出重点。紧接着西瓜视频板块的话跟首页类似,但分类的颗粒度要远大于首页相比之前的版本,今日头条取消了底部的微头条,更换成了播放长视频的放映厅。

前三部分的简洁化,使得头条将更多的功能堆放在了“我的”中,这也使得今日头条又有点娱乐视频类app的成分。虽然功能做多做复杂会使产品偏离最初的产品定位,但这些内容也不无显示着今日头条新的尝试与业务扩展方向,但作为用户的话,还是希望产品简单便捷易用,好在功能添加的地方并不明显,也能使用户较为容易的接受。

新浪新闻:

结构分析:

新浪新闻底部由首页,视频,发现,我的组成。和今日头条类似,首页看起来非常简洁,就是紧凑的各类新闻,紧接着是分类颗粒较大的视频页,与今日头条不同的是新浪新闻第三栏为发现栏,点开后首先显示的就是实时热点,也更加方便人们快速了解热度较高的新闻,并且发现页面的分类也更明确。发布动态选项在此页,底栏位置也和微信朋友圈位置一样,方便人们更快的习惯软件。而在我的选项栏则较为复杂,汇集较多功能在此,可执行的操作也更多。与今日头条相比,新浪更加注重新闻资讯相关内容,而今日头条则把一部分重点放在了各类视频上。

五、核心功能

5.1 产品更迭

新浪新闻:

  • 运营:高考上线专题报道、志愿宝典,疫情时上线大量查询工具,DAU猛增。在财经上,是其他平台资讯的来源。娱乐活动方面有优势,“微博之夜”是独家,上线明星打榜功能。
  • 功能:发现页中有精选功能、热门流、话题贴,新增小视频弹幕、热点、热评榜、声浪、听书、“钉”在桌面功能。热榜、快讯功能上线较早,明星打榜、爆款评论声浪是特色。

今日头条:

  • 从版本信息可以看出,头条早期在完善产品功能,促进用户关注大V和朋友,促进用户互动,增加dislike、帮上头条功能,优化推荐系统,2016年就支持视频直播聊天了,上线热搜、热榜。目前热榜有头条热榜、今日关注、本地热榜(疑似下线)。
  • 2020年上线疫情专区、放映厅,小说频道新增千本书籍。

5.2 功能差异

虽然资讯类产品的同质性较高,但通过功能分析可以看出:

  • 新浪新闻:新闻功能全面很全面,背靠微博资源,在娱乐方面有独特优势。
  • 今日头条:推荐流中有问答;底部tag有放映厅功能(资金雄厚才能买得起版权);西瓜视频(偏中长)和小视频的展示分开,内容丰富。

5.2.1 P/UGC

除用户评,新浪新闻虽然可以发布UGC内容,但几乎只在话题里曝光,更偏向PGC平台。

今日头条可以发布UGC内容,支持发布直播和问答 ,其他产品只支持图文、视频。头条还会将用户在抖音里发布的内容同步过来,偏向于PUGC平台。

5.2.2 特色频道

今日头条除了有丰富的视频资源外,未发现特色频道。新浪有微天下、【声浪】热评以及网罗各类明星新闻八卦的星浪圈。【声浪】热评功能会将用户热评显示到相应的资讯页面,加强用户与产品的互动,鼓励用户参与新闻资讯评论与探讨,增加用户黏度。

5.2.3 热榜

今日头条热榜包括事件详情、相关内容等,目前还没有做垂类热榜。新浪新闻很好地利用了微博的资源,在热榜上榜单更加丰富,分类更加细致明确。

5.2.4 放映厅

今日头条拥有有放映厅功能,拥有众多电影、电视剧、动漫等栏目的版权,并且免费、没有广告。这也是今日头条渗透率高的重要原因。

5.2.5 推送

推送是内容平台的重要业务,占据各公司相当比例的DAU。 oppo、vivo厂商操作系统对推送数量限额,且用户默认关闭系统通知权限,而华为、Apple等机型无限制所致。各个竞品的推送包括全量、个性化、地方推送等,作用都是提高用户活跃度。

今日头条、版权丰富,有独家内容,今日头条部分内容会在收到其他竞品push后很久收到,可能为机器推送。新浪新闻速度较快,而且文案质量更高。

数据来源:艾瑞数据

六、交互设计

以下笔者将站在交互和设计的角度,分析两者在各个功能和流程界面设计优劣,比如登陆页面、我的界面,搜索界面等。

6.1 加载页面

新浪:                                                                                    今日头条:

在加载页面两者都能体现各自的风格。对比来看,今日头条使用纯白色背景简洁舒适,红色字体的slogan方方正正,极具现代化。

而对于加载页面而言新浪新闻做的仿佛更加优秀(个人主观),使用白色和浅灰的山水画作为背景,“大浪逐新”中间黑色书法字体slogan显得潇洒飘逸且极为醒目。融入了中国文化元素,第一次就能给用户留下很深刻的印象。

6.2 登录页面

  • 可以明显看到今日头条的登录页面更加简洁,由于抖音app庞大的用户群体,将抖音一键登录选项设置为红色长按键放在正中央,十分醒目;而把手机登陆放在下端,微信、QQ登陆放在了隐藏栏;这也能看出来字节跳动对自身账号体系的信心,如此登录便无需其他多余操作,给用户流畅的体验感。
  • 新浪新闻则是将手机验证登陆放在首选,需要用户手动输入手机号码并且获取验证码登陆。其它选项则依次排列在下端。把“登录赚金币”的标语放在顶端来诱导用户登录。总体看来登录页面信息布局要比今日头条密度更大。

6.3 首页

新浪新闻:

  • 两者都是以红白作为主色调,将分类置于搜索栏下方并且可以在分类最右端编辑自己的频道。点击相应频道便是相关内容资讯,十分方便。文章与文章之间的间距适当,翻阅点击新闻方便,给人以效率简单的感觉。由之前的核心功能分析可知今日头条的发布功能更加全面,所以今日头条将其放在了搜索栏的右边。而新浪新闻较今日头条的明显优势便是其热榜功能,所以将其放在了比较显眼的位置,用户打开app便可以注意到搜索栏边上的热榜功能,而今日头条主页频道里的热榜则需要用户手动添加编辑。
  • 搜索界面来看,两者的历史记录包括清除搜索历史记录选项都置于搜索栏下端,这也符合用户使用搜索功能的习惯,但是今日头条在下方加入了无痕浏览模式的选项,对于不想保留搜索历史的用户可以直接在此处进行模式的选择,无需在切换别的页面去设置。布局方面今日头条十分简单,白色背景给人以清新爽朗的感觉,猜你想搜功能非常的显眼,会根据用户平时的搜索习惯显示相关内容,吸引用户点击浏览。并且热度较高的新闻话题会在边上有一个红色的“热”字标注,点击便可进入话题,和头条热榜;而新浪新闻把其有突出优势的热搜榜和其独特的热评榜放在了此处,占据了主要空间,用户在搜索的同时便能注意到实时热点资讯以及各种有趣的热评,吸引用户点击进入相关内容。
  • 新浪新闻在首页添加了收听功能,分为听书和听新闻。并且点击之后直接自动播放,免去了用户思考的时间。并且图片加上新闻标题的排版会提高用户的收听兴趣。这一功能也增加了用户了解新闻资讯的方式,无需通过手动操作便可以收听新闻,能让用户在忙于其他事情的同时也使用这一功能收听了解资讯。

建议:可以在收听功能中也加入热榜,使用户也能通过收听的方式了解各类热门事件。根据个人喜好推送相关内容,培养用户收听新闻资讯的习惯,增加用户黏性。

6.4 热榜

  • 新浪新闻热榜以深色为背景界面清新、沉浸感十足。而今日头条则是象征着“热”的红色,画面霸气简单,一片红色让用户产生极强视觉冲击效果,给用户留下很深刻的印象。
  • 因为其丰富的微博资源,从之前的结构图可以发现新浪新闻其实很多页面都能进入热榜,并且位置很醒目。因为其丰富的微博资源,热榜分类很多,并且在第一条热榜拥有配图,能更直观的了解最热资讯。拥有垂直类热榜,用户能够了解更多类别以及相关方向的热点。而今日头条则相对简单,只有头条热榜和本地热榜,供用户选择不多。

6.5 视频推荐页

新浪新闻的视频页整体布局为白和淡灰,看起来非常整洁,推荐栏下又进行了一系列分类来供用户选择,虽然种类更多,但是给人有点眼花缭乱的感觉,与上端分类略显重复;今日头条则是将红色为主色调的顶栏贯穿了首页,视频以及放映厅,使用户随时可以在当页进行搜索功能。

建议:新浪新闻的视频分类比较多,可以尝试增加根据用户观看视频偏好把顶端分类自动做排序的功能。

新浪新闻滑动到视频相应位置的时候视频会自动播放,但是没有声音,这种模式用户不用点开视频便可以了解到视频的开头内容,这样,部分视频便会吸引用户点击进入观看完整视频。二级页面有点类似抖音的播放模式,通过上下滑动来播放视频,这种模式的优点便是可以提高用户的观看兴趣,因为不知道下一个视频是什么,便会更想滑到下一个视频去观看。而且除了对应的推荐视频,旁边还有热榜,可以以短视频的方式来了解热点资讯,并且热点视频下端会标记热度排名,用户体验感好。

今日头条的视频不会跳转二级页面播放,点击后滑到相应位置便会自动播放,这样的播放视频的方式免去了很多操作步骤,使用户操作起来更加简单便捷。

6.6 我的页面

布局方面今日头条从简洁清新的风格出发,包括图标、背景颜色、功能布局等等都是给人小而精致的感觉。记而新浪新闻则以红色占据了顶端空间,与下面的白色背景形成视觉反差,两个颜色分割明显,给人一种突然断层的感觉,视觉效果不比今日头条好。

新浪下端加入了签到功能以及福利任务功能,可以提高用户使用应用的乐趣,促使用户每天使用今日头条,增加用户黏性。新浪新闻在常用功能里也分了三页,可以看出来功能明显多于今日头条。但同时也会导致页面排版较为凝重密集。

七、产品优劣势

基于以上的分析,将两款APP进行基于SWOT模型的一个整体的分析

八、总结

从SWOT模型中我们可以清楚的了解到两款APP之间的优势与不足,目前聚合信息流平台产品已进入下半场,进入存量用户时代,之后产品迭代应该会逐渐放缓,各个竞品会在每次热点事件发力,并加速布局其他赛道。

在我看来,产品的基础能力包括冷启动、推荐算法、内容从产出到展现链条、推送策略、广告可适应性、促进互动等等,今日头条擅长算法,冷启动准确率高,新浪的推送质量高,运营上反应迅速。

各大新闻媒体客户端在自身产品上,至少在核心功能都已经很完善了,不管是功能上还是用户体验上,而基于各自的定位,其用户群也各不相同,所以,这一点上,保持自身特色很重要。而现在目前限制新闻类资讯发展的阻碍,内容同质化很严重,所以继续增加优质内容,将大数据与优质算法结合的优点继续保持,才是重点。内容差异化极其重要,优秀创作者和IP资产将成为头部新资讯平台搭建内容生态壁垒的聚焦点。至于是谁能够脱颖而出最后稳坐行业龙头,现在还不好说。

而现在整个行业,用户正在朝着碎片化,移动化,垂直化发展,媒体外延不断扩展,小而精的媒体资讯也成为用户的需求,而随着硬件的发展,包括智能可穿戴设备的发展,用户接受信息的渠道进一步增加,新浪新闻能否针对这些变化做出正确的改变,也是对整个团队的考验

未来内容生态趋势:

 视频化

用户更加喜好视频化资讯内容,头部资讯平台持续加码,布局短视频、直播内容以吸引用户注意力,同时通过扶持、孵化内容创作者以及打造核心IP来筑建自身的内容生态壁垒5G、点云和可穿戴设备等技术的发展可能会从采编到分发形态给新闻行业带来革新,直播体验会有很大提升,资讯+直播会抢占用户更多注意力。

② 新热内容

热点是能吸引两个领域及以上用户的内容,目前新浪新闻在热榜上做得比其他竞品较为完善,新浪热榜也是2021Q1 MAU大涨26.9%的原因,未来今日头条或许将筹备个性化的兴趣热榜,更好满足用户对科技、财经、体育等垂直领域用户。

③ 深度内容

获取深度信息的用户,沉浸行为相对稳定,根据巨量引擎的今日头条人群洞察报告,这部分用户更喜欢娱乐、体育内容,平台使用频率相对低,但粘性和使用时长相对高。满足这些人的需求,可能对平台留存、品牌和调性的塑造有正面影响。

笔者对新浪新闻的几点完善优化建议:

  • 根据用户使用时段偏好,新浪平台更应重点提高使用高峰时段新闻的质量,并且增加高峰时段推送新闻的频率来吸引用户。不应在使用频率较低的时间段过于频繁的推送新闻,此时人们大多数忙于自己的事情,较少有空闲时间去浏览新闻,此时推送新闻可能导致用户关闭手机app通知权限。
  • 吸引更多优质媒体的入驻,让自媒体作家与自家平台签独家协议,可以推出类似今日头条“创作者计划”活动,大力鼓励创作,打造更多的新浪新闻独家内容,为了提供优质化内容做努力。
  • 加强新闻推送审核,根据App Store差评用户反馈,“标题党”“文章内容质量差”出现较为频繁,可以增加文章类似“踩”的差评功能,根据媒体发表的历史文章质量以及好评率决定推送媒体文章的先后顺序.

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:人人都是产品经理   作者:-_Maybe

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



Centos7 Yum安装 PHP5.5,5.6,7.0

前端达人

默认的版本太低了,手动安装有一些麻烦,想采用Yum安装的可以使用下面的方案:

1.检查当前安装的PHP包
yum list installed | grep php
如果有安装的PHP包,先删除他们
   yum remove php.x86_64 php-cli.x86_64 php-common.x86_64 php-gd.x86_64 php-ldap.x86_64 php-mbstring.x86_64 php-mcrypt.x86_64 php-mysql.x86_64 php-pdo.x86_64
2.Centos 5.X
    rpm -Uvh http://mirror.webtatic.com/yum/el5/latest.rpm
  CentOs 6.x
    rpm -Uvh http://mirror.webtatic.com/yum/el6/latest.rpm
  CentOs 7.X
rpm -Uvh https://mirror.webtatic.com/yum/el7/epel-release.rpm
rpm -Uvh https://mirror.webtatic.com/yum/el7/webtatic-release.rpm
 
如果想删除上面安装的包,重新安装
rpm -qa | grep webstatic
rpm -e  上面搜索到的包即可

3.运行yum install
  yum install php55w.x86_64 php55w-cli.x86_64 php55w-common.x86_64 php55w-gd.x86_64 php55w-ldap.x86_64 php55w-mbstring.x86_64 php55w-mcrypt.x86_64 php55w-mysql.x86_64 php55w-pdo.x86_64

yum install php56w.x86_64 php56w-cli.x86_64 php56w-common.x86_64 php56w-gd.x86_64 php56w-ldap.x86_64 php56w-mbstring.x86_64 php56w-mcrypt.x86_64 php56w-mysql.x86_64 php56w-pdo.x86_64

注:如果想升级到5.6把上面的55w换成56w就可以了。

yum install php70w.x86_64 php70w-cli.x86_64 php70w-common.x86_64 php70w-gd.x86_64 php70w-ldap.x86_64 php70w-mbstring.x86_64 php70w-mcrypt.x86_64 php70w-mysql.x86_64 php70w-pdo.x86_64

4.安装PHP FPM
yum install php55w-fpm 
yum install php56w-fpm 
yum install php70w-fpm

注:如果想升级到5.6把上面的55w换成56w就可以了。

 

我们要使用yum来安装php-fpm和比较新版本的php,nginx,MySQL-server的话, 首先得给yum添加几个源,CentOS默认的源里面软件比较旧,有些软件、库还没有。

EPEL源:

Extra Packages for Enterprise Linux (or EPEL)或者叫企业版 Linux 附加软件包, 是一个由特别兴趣小组创建、维护并管理的,针对 红帽企业版 Linux(RHEL)及其衍生发行版 (比如 CentOS、 Scientific Linux)的一个高质量附加软件包项目。

EPEL 的软件包通常不会与企业版 Linux 官方源中的软件包发生冲突,或者互相替换文件。 EPEL 与 Fedora 项目基本一致,包含完整的构建系统、升级管理器、镜像管理器等等。

EPEL源官方网站:https://fedoraproject.org/wiki/EPEL

添加EPEL源:

32位CentOS,在命令行运行下面命:  rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/i386/epel-release-6-8.noarch.rpm  

64位CentOS,在命令行运行下面命令:  rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm  

EPEL源只能作为CentOS官方源的补充,里面还都是一些系统基础的软件包, 我们要安装的php,php-fpm,mysql等软件里面还是没有,所以接下来添加另一个软件源Remi。

Remi源中的软件几乎都是最新稳定版。或许您会怀疑稳定不?放心吧, 这些都是Linux骨灰级的玩家编译好放进源里的,他们对于系统环境和软件编译参数的熟悉程度毋庸置疑。

Remi官方网站:http://rpms.famillecollet.com/

添加Remi源,不管32位还是64位的系统,运行下面命令:   rpm -ivh http://rpms.famillecollet.com/enterprise/remi-release-6.rpm  

Remi源默认是没有启用的,我们来启用Remi源,修改 /etc/yum.repos.d/remi.repo 文件,把文件内的 enabled=0 改为 enabled=1 ,注意:改文件内有2个 enabled=0 我们修改[remi]下面的,不要修改[remi-test]下面的。

到这里yum源的配置结束,下面安装软件就简单了。安装时候有询问y/n的时候都是y

安装php,php-fpm以及php扩展:  yum install php php-fpm php-bcmatch php-gd php-mbstring php-mcrypt php-mysql  

PHP配置文件php.ini路径: /etc/php.ini 

php-fpm配置文件php-fpm.conf路径:/etc/php-fpm.conf

 

成功只是比失败多走了一步而已,坚持自己的梦想,永不言弃!






蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自:csdn 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


CentOS 7 64位下MySQL5.7卸载改成MySQL5.6版本(YUM)

前端达人

1: 检查是否安装了MySQL组件。

[root@DB-Server init.d]# rpm -qa | grep -i mysql
mysql-community-client-5.7.19-1.el7.x86_64
mysql-community-common-5.7.19-1.el7.x86_64
mysql-community-libs-compat-5.7.19-1.el7.x86_64
mysql-community-libs-5.7.19-1.el7.x86_64
qt-mysql-4.8.5-13.el7.x86_64
mysql57-community-release-el7-11.noarch
mysql-community-server-5.7.19-1.el7.x86_64
perl-DBD-MySQL-4.023-5.el7.x86_64 

2: 卸载前关闭MySQL服务

systemctl stop mysqld

yum -y remove mysql-community-client-5.7.19-1.el7.x86_64
yum -y remove mysql-community-common-5.7.19-1.el7.x86_64
yum -y remove mysql-community-libs-compat-5.7.19-1.el7.x86_64
yum -y remove mysql57-community-release-el7-11.noarch
yum -y remove mysql-community-server-5.7.19-1.el7.x86_64

3:删除MySQL对应的文件夹

检查各个MySQL文件夹是否清理删除干净。

[root@DB-Server init.d]# whereis mysql
mysql:
[root@DB-Server init.d]# find / -name mysql
/var/lib/mysql
/var/lib/mysql/mysql
/usr/lib64/mysql
[root@DB-Server init.d]# rm -rf /var/lib/mysql
[root@DB-Server init.d]# rm -rf /var/lib/mysql/mysql
[root@DB-Server init.d]# rm -rf /usr/lib64/mysql

4:确认MySQL是否卸载删除

[root@DB-Server init.d]# rpm -qa | grep -i mysql


5:重新安装MySQL5.6版本,主要参考 (略写,主要参考以下链接)

http://blog.csdn.net/huhuhuemail/article/details/77498891

shell> wget https://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm shell> yum mysql57-community-release-el7-11.noarch.rpm  
  1. 这步如果报错:已加载插件:fastestmirror, langpacks
  2. 没有该命令:mysql57-community-release-el7-11.noarch.rpm。请使用 /usr/bin/yum --help
改用以下命令:
  1. yum localinstall mysql57-community-release-el7-11.noarch.rpm
  1. shell> yum repolist enabled | grep "mysql.*-community.*"
  1. shell> yum install mysql-community-server
  1. 修改mysql配置文件
启动MySQL服务






蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自:csdn 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


mysql下载哪个centos_Centos7安装Mysql

前端达人

为什么要写这篇文章,因为现在在网上找的资料基本都是错误的,或者有错误,看着不爽。

在百度上搜 centos7 mysql  错的最离谱的就是这篇http://jingyan.baidu.com/article/ce436649fec8533773afd385.html    照着装了半天装了是mariadb

后来找了一些文章,发现基本都过时了。

因为直接yum install mysql 是装不上mysql的!!   而是装上了mariadb !   那就是因为默认的仓库里就是mariadb的包

那yum这么好的工具用不了就?? 当然有解决办法,我在官网上找到一篇文章叫做“A Quick Guide to Using the MySQL Yum Repository“  就是教我们如何用yum工具安装mysql的

首先 将mysql加到yum仓库中   (我这的命令都是centos7的,其他liunx平台用啥命令,你们自己搞定哈)

shell >  wget http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm

shell >  rpm -ivh mysql-community-release-el7-5.noarch.rpm

然后再在命令行里输入

shell >  yum repolist all | grep mysql

结果:

mysql-connectors-community/x86_64 MySQL Connectors Community enabled: 14

mysql-connectors-community-source MySQL Connectors Community - So disabled

mysql-tools-community/x86_64 MySQL Tools Community enabled: 19

mysql-tools-community-source MySQL Tools Community - Source disabled

mysql55-community/x86_64 MySQL 5.5 Community Server disabled

mysql55-community-source MySQL 5.5 Community Server - So disabled

mysql56-community/x86_64 MySQL 5.6 Community Server enabled: 154

mysql56-community-source MySQL 5.6 Community Server - So disabled

mysql57-community-dmr/x86_64 MySQL 5.7 Community Server Deve disabled

mysql57-community-dmr-source MySQL 5.7 Community Server Deve disabled

一堆disabled,只看enable的,可以输入命令

shell >  yum repolist enabled | grep mysql

结果:

mysql-connectors-community/x86_64 MySQL Connectors Community 14

mysql-tools-community/x86_64 MySQL Tools Community 19

mysql56-community/x86_64 MySQL 5.6 Community Server 154

这里再多数一句,可以看到先在mysql5.6 是可用的,可我就想装现在最新版的5.7可咋办?   是有办法的。

需要修改文件,执行以下命令

shell > vi  /etc/yum.repos.d/mysql-community.repo

会看到

[mysql-connectors-community]

name=MySQL Connectors Community

baseurl=http://repo.mysql.com/yum/mysql-connectors-community/el/7/$basearch/

enabled=1

gpgcheck=1

gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

[mysql-tools-community]

name=MySQL Tools Community

baseurl=http://repo.mysql.com/yum/mysql-tools-community/el/7/$basearch/

enabled=1

gpgcheck=1

gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

# Enable to use MySQL 5.5

[mysql55-community]

name=MySQL 5.5 Community Server

baseurl=http://repo.mysql.com/yum/mysql-5.5-community/el/7/$basearch/

enabled=0

gpgcheck=1

gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

# Enable to use MySQL 5.6

[mysql56-community]

name=MySQL 5.6 Community Server

baseurl=http://repo.mysql.com/yum/mysql-5.6-community/el/7/$basearch/

enabled=1

gpgcheck=1

gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

# Note: MySQL 5.7 is currently in development. For use at your own risk.

# Please read with sub pages: https://dev.mysql.com/doc/relnotes/mysql/5.7/en/

[mysql57-community-dmr]

name=MySQL 5.7 Community Server Development Milestone Release

baseurl=http://repo.mysql.com/yum/mysql-5.7-community/el/7/$basearch/

enabled=0

gpgcheck=1

gpgkey=file:/etc/pki/rpm-gpg/RPM-GPG-KEY-mysql

我们只需要把5.7的enabled 改成1  把5.6的enabled改成0 就行了。 我装啥版本无所谓,这块我没有亲自去试过,直接安装默认版本。

上边所有的工作都做完了,我们终于可以用我们最喜欢的yum来安装了

shell >  yum install mysql-community-server

安装过程省略,一路按y

成功之后,启动mysql

shell > service mysqld start

查看mysql 的状态

shell > service mysqld status

现在还需设置root的密码,删除匿名用户等一些设置,我看其他文章写的很复杂,其实有一个简单的命令

shell > mysql_secure_installation

初始密码为空,直接按回车键,然后输入你想设置的密码,其他的根据你自己的需求,y或者n

that is all

如果有错误,请及时联系,互相学习,互相进步,谢谢。





蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自:csdn 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



mysql导入sql文件出错的一种解决方法

前端达人

 在一个工程中数据库往往要分为实际运用数据库和测试数据库,最直接的方法当然是从源数据库中导出.sql文件再导入到本地的数据库中,我这的实例是原有一个项目数据库在服务器上现在想导出一份到本地做测试用,工程中用的是mysql-connector-java-5.1.13-bin.jar,而我现有的mysql数据库是

mysql-connector-java-5.1.6-bin.jar不知道是否是版本不一,在本地使用navicat for mysql可以连接到服务器数据库,但是从服务器数据库导出的.sql文件后再导入到本地的数据库中总是出现错误:

[Err] 1064 - You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ****
[Err] /*

    一、在网上找了很多方法都无法解决,无意中看到一个mysql数据同步的方法:

 1>在本地建一个与数据库同名的数据库

 2>选择navicat中连接服务器的数据库,在菜单栏选择工具-->数据传输


  3>在弹出的的窗口中“源”部分就是你要导出的源数据库,“目标”就是本地的数据库,点击左下角全选后,再点击开始按钮


     点击确定


    点击关闭




     再来查看一下本地数据库,是不是数据和结构都已经导入到本地数据库中了呢。

    二、从备份中导出.sql再导入到本地数据库中

    1>在连接服务器中的数据库上新建备份,选中要备份的数据库-->点击菜单栏上的备份-->新建备份


    2>选择备份文件提取SQL






这样我们就得到了备份转储的.sql文件,再将这个.sql文件导入到本地的数据库中,结果...就不再提示有错误了,

果真是菜鸟,要学的还很多


蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


转自:csdn 

分享此文一切功德,皆悉回向给文章原作者及众读者.

免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


app界面赏析+图标分享 ——— 北京蓝蓝设计 移动端UI设计资源分享(二十八)

前端达人

App界面设计对于设计师而言一直是盛久不衰的话题,尤其是如今越来越多的流量转移到了移动平台,使得更多的UI设计师涌入移动端领域,甚至出现了市场饱和的言论,对于从事移动端的UI设计师来讲,充满压力的同时又面临无限机遇,唯有不断的学习才能滋生出源源不断的设计灵感,站稳脚跟。

摹客想在这方面给各位设计师朋友做点什么,除了提供简单好用的设计工具,我们也整理了非常多的优秀设计案例,希望可以对设计师朋友有借鉴意义。这将会是一个系列的专题,我们以月为单位,整理了国内外设计师的优秀APP界面设计案例,我们是搬运工,更是好设计的传达者,希望你会喜欢。

接下来为大家分享精美的app UI设计案例:


WechatIMG2101.jpegWechatIMG2102.jpegWechatIMG2103.jpegWechatIMG2104.jpegWechatIMG2105.jpegWechatIMG2106.jpegWechatIMG2114.jpegWechatIMG2112.jpegWechatIMG2111.jpegWechatIMG2110.jpegWechatIMG2109.jpegWechatIMG2107.jpegWechatIMG2115.jpegWechatIMG2116.jpegWechatIMG2117.jpegWechatIMG2118.jpegWechatIMG2119.jpeg














--手机appUI设计--

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服



  更多精彩文章:

      手机appUI界面设计赏析(一)

       手机appUI界面设计赏析(二)

       手机appUI界面设计赏析(三)

       手机appUI界面设计赏析(四)

       手机appUI界面设计赏析(五)

       手机appUI界面设计赏析(六)

       手机appUI界面设计赏析(七)

       手机appUI界面设计赏析(八)

       手机appUI界面设计赏析(九)

        手机appUI界面设计赏析(十)

       手机appUI界面设计赏析(十一)

      手机appUI界面设计赏析(十二)

      手机appUI界面设计赏析(十三)

      手机appUI界面设计赏析(十四)

      手机appUI界面设计赏析(十五)

      手机appUI界面设计赏析(十六)

      手机appUI界面设计赏析(十七)

      手机appUI界面设计赏析(十八)

      手机appUI界面设计赏析(十九)

      手机appUI界面设计赏析(二十)

      手机appUI界面设计赏析(二十一)

     手机appUI界面设计赏析(二十二)

     手机appUI界面设计赏析(二十三)

     手机appUI界面设计赏析(二十四)

     手机appUI界面设计赏析(二十五)

UI弹窗设计总结篇

seo达人


弹窗在APP中无处不在, 这段时间刚好在整理弹窗组件这一块,所以就想跟大家分享一下弹窗的一些设计思路。

一、弹窗分类

模态弹窗/非模态弹窗

一般根据是否打断用户操作把弹窗分为:模态弹窗(重提示)和非模态弹窗(轻提示)。

 

▲ 模态弹窗

打断用户的操作行为,用户必须对该弹窗进行操作,否则不能进行其他操作。

优点:可以很好的获取用户的视觉焦点。

缺点:会打断用户当前的操作流程。

常见类型:对话框Dialog/Alert、底部动作栏Actionbar、浮层Popover/Popup

 

▲ 模态弹窗

不会影响用户操作,通常都有时间限制,出现几秒后自动消失。

常见类型:Toast/Hud、Snackbar

undefined

 

1、模态弹窗常见样式

1.1 Dialog/Alert  对话框

对话框是常用的弹窗,它通常出现在页面的中间,这类弹窗对用户的干扰比较大,需要用户主动触发选择才可以继续当前的操作。

一般只有1~3个按钮,需要用户进行简单的选择。一般产品会把期待用户点击的按钮会放在右边并突出显示。

 

常见类型举例:

 1.1.1、信息选择确定  

1)系统功能的授权

如下图“百度地图”是否允许访问麦克风、“网上厨房”是否允许访问位置的弹窗,相信大家一定在许多APP中都见过,这就属于系统自带的授权弹窗。

undefined

 

2)版本更新

版本升级弹窗通常会弱化暂不升级的按钮,突出升级主按钮。如下图所示:

undefined

 

3)消息通知

高德地图与饿了么的消息提醒弹窗属于使用后期APP为了推送消息,主动提示你开启消息通知。

undefined

 

4)重要提示/信息二次确认

同程汽车票购买弹窗属于消息提示,告知用户相关信息。百度网盘弹窗属于信息确认,询问用户选择哪种方式下载。

undefined

 

1.1.2、运营活动

这类弹窗通常是一些活动、广告、领券优惠等,主要是吸引用户点击参加活动,这类弹窗视觉上通常会设计的比较吸引人,造型多样,根据运营目的会突出领取、参与、查看等大按钮,弱化关闭按钮。如下图所示:

undefined

 

1.1.3、信息-输入选择 

这类弹窗通常是一些比较简单的信息选择或者内容填写,通常只有确定和取消两个按钮。

如微博对于已关注人的分组及备注,操作简单。设置备注时直接调出键盘即可输入,方便快捷。

undefined

 

1.2Actionbar操作栏

Actionbar主要分为Action Views和Action Sheets,通常由底部弹出。

优点:可以让用户清楚的感知当前的操作,比跳转到新页面更加有安全感。

 

 1.2.1 Action Views操作视图

这类弹窗通常占屏比较大,有全屏弹窗和半屏弹窗2中。 它一般从底部弹出,如下图所示:

淘宝和京东的购买页面弹窗都是比较典型的,属于半屏弹窗,在各种电商产品中用的非常多。

undefined

 

百度网盘和闲鱼发布闲置都属于全屏弹窗,占满整个屏幕,可操作空间更大。

undefined

 

1.2.2 Action Sheets 操作列表

操作列表相对于操作视图更单一。主要以文字展示功能按钮为主,重要的操作功能一般会用主题色或者红色突出显示,主要运用在一些功能选择、日常控件等场景中。如下图所示:

undefined

 

1.3Popover/Popup 浮层

浮层是指用户点击某个功能后浮出一个临时气泡对其功能进行补充,用户需要点击功能区域操作,或者点击空白处取消才能进入下一步操作。

 

1.3.1 指向浮层 

这类浮层一般伴随有小三角指向,强调归属。气泡里面的功能通常以单一的文字或文字+图标的结合形式来展示。如下图所示:

支付宝和微信的顶部加号补充浮层,展示形式差不多,只是UI样式不一样,支付宝是白色气泡黑色半透明遮罩,微信是深灰色气泡。

undefined

 

再如下图这种选中文字的弹出气泡在复制文字时很常见 。

undefined

 

2、非模态弹窗常见样式

2.1Toast/Hud 提示框

这种弹窗属于一种轻提示,给予用户及时反馈,让用户知道自己当前所处的状态。

 

2.1.1状态提示

反馈用户当前操作的状态,出现1到2秒后自动消失,在操作遇阻提示、操作成功反馈正在操作状态等场景中使用。如下图所示:

undefined

 

2.2 Snackbar

Snackbar是Android中的一个控件。它一般会超时自动关闭或者在屏幕上滑动关闭,设置出现的时间会比Toast长,而且可以点击按钮进行交互。如下图所示:

京东的Snackbar提示用户点击箭头查看喜欢的商品,为用户推荐商品,它有一个关闭的按钮。

酷狗音乐的Snackbar给用户开通会员的快捷入口,它一直浮于页面底部,没有关闭按钮。

undefined

 

同程用车的领券活动放在这里,吸引用户点击,是一种常用的营销手段。

QQ的断网提示类似通知条的样式,会一种浮于页面上方直到网络恢复。

undefined

 

二、总结思考

1、Alert的阻断感大于Action Sheets,使用时根据产品重要程度决定使用什么样式的弹窗。

 

2、常见弹窗出现的位置有上部、中部、下部。位置不同,重要程度不同。

中部:强度高、重要性高,如对话框弹窗、toast提示等。

上部:强度中等、重要性高于底部,重要消息tips提示。

底部:强度低、重要性低,如底部操作栏、Snackbar。

具体使用哪种还是要根据实际情况考虑。希望我的文章对大家有帮助,也不费我花时间整理了,哈哈~

图片素材来源于网络和应用截图,仅用于学习交流。

 

原文地址:泡芙喵F设计教室泡芙喵F设计教室

作者:泡芙喵F


 

转载请注明:学UI网》UI弹窗设计总结篇

蓝蓝设计建立了UI设计分享群,每天会分享国内外的一些优秀设计,如果有兴趣的话,可以进入一起成长学习,请扫码蓝小助,报下信息,蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作,也请与我们联系。

截屏2021-05-13 上午11.41.03.png


文章来源:站酷   作者:陈皮Celia 

分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。

蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

设计沉思录|临感VR官网升级(视觉篇)

seo达人

临感官网设计升级,我们将会从【流程篇】、【视觉篇】两个角度进行的复盘,本次分享主要从视觉方向进行阐述,下一期由交互伙伴分享流程篇,本次分享主要从视觉方向进行阐述,欢迎大家持续关注和探讨。

                     

前言

临感官网设计升级,我们将会从【流程篇】、【视觉篇】两个角度进行的复盘,本次分享主要从视觉方向进行阐述,下一期由交互伙伴分享流程篇,本次分享主要从视觉方向进行阐述,欢迎大家持续关注和探讨。

a

01.产品背景

临感是58同城旗下独立品牌,专注于3D空间数字化服务,自2017年起临感作为58同城、安居客的技术提供方为两个平台提供了空间自动化建模、VR拍摄、VR看房、VR带看、VR装修等服务,累计服务用户数过亿,临感通过不断的技术积累以及对行业的理解,正在成长为3D空间数字化领域的一流平台。
随着B端合作用户的激增、业务的完善及拓展,最初的临感官网在设计风格和框架上,已经无法承载更多业务拖展,同时也无法诠释「VR聚合平台」这个概念的诉求。因此,我们在此契机之下,由设计发起这次临感官网改版项目。 

 

旧版存在的问题

图片

对比其他VR竞品网站,旧版整体框架过于传统,设计语言陈旧,无法体现VR的概念。作为VR服务平台,我们需要展现给用户的专业化的一面。

a

02.设计目标

图片

在项目进行前,我们与产品和交互同学通过大量的竞品分析,结合自身产品的目标导向,确立设计目标:给用户酷炫的feel(对整体复盘流程有兴趣的伙伴,可以去看之后交互同学即将发布的”流程篇“)

1

03.设计拆解             

视觉升级强化品牌认知

图片

本次官网的配色方案,延用了最新的定义的《临感品牌升级规范》中的品牌色体系。

图片

首页的视觉主体“百变魔方”的灵感,源自新定义的《临感品牌升级规范》中的临感CUBE。基于临感CUBE的形态,进行了3D化再塑造,赋予了临感CUBE百变的新形态。

1

定义视觉基调

图片

s
灵感收集

图片

同时我们与交互同学们一起找了大量的国内国外的优秀案例进行分析参考,在视觉表现上得到了很大灵感启发。(后续的动画呈现与风格方面,主要参考了2020年的微软vivo宣传片中,抽象与现实结合的手法。)

2

设计风格

图片

初期概念稿中的设计元素以抽象的几何体展现,但呈现效果缺失了生活气息与温度。

图片

经过不断的讨论与设计打磨,最终我们采用了科技与温度并存,抽象与写实互补的展现形式。

r

UI

图片

整体UI采用轻量化设计,按钮模仿毛玻璃拟态效果,使UI与整体动画更加融洽,在交互与视觉上体验更好。

s

动画

为让动画衔接更加自然流畅,动画间无缝衔接,尽量做到用户无感知的切换体验,我们需要带着思考去制作。
首屏临感CUBE不同形态转时,用户产生交互,动画如何过度?
针对用户在浏览时随时的翻页的行为,不同模块动画如何衔接?
用户停留在一个功能,无交互行为,动画如何进行?
动画地址
带着以上诸多思考,我们的3D设计师陈明经过不断调试,最终动画呈现超出预期。

a

技术对接

技术对接时,我们遇到了整个项目进程中最大的难点,同时也是最大的阻碍。为让动画效果更加饱满,在灯光材质等方面采用了OC渲染,而技术伙伴做动画还原时,无法读取到OC数据相关的所有数据,于是我们的3D设计师与对接技术伙伴一起,尝试了很多不同的导出格式,并不断转换3D设计软件,还是无法用技术还原视觉动画。最终我们选择了折中的方式,采用视频适配的播放形态上线。
为做到伪技术实现的效果,我们在每个模块与下一模块衔接前做了几秒的循环动画,这样用户停留某一模块无操作时,可以衔接播放循环动画,让整个页面的动画感知更顺畅。

d

04.结语

临感官网是58UXD首个用动画制作的网站,在设计上也是新的探索与尝试。未来临感还需要不断的探索完善,希望用更精彩的视觉呈现和更友好的产品设计,让用户感受科技的温度。
感谢在设计的过程中辛苦付出的3D设计师与交互伙伴。


 

原文地址: 58UDX(公众号)

作者:环铁艺术家


 

转载请注明:学UI网》设计沉思录|临感VR官网升级(视觉篇)

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档