谈谈PC端的一些设计

说到PC端,这里不得不提到web,这两个概念有些人容易弄混淆,认为是同一个意思。但其实是有区别的,准确的叫法会显得你更专业一些。

web是指网页,web端是需要多屏幕适配,即可以用电脑呈现,也可以用移动端来呈现。而PC仅仅是指用于在PC(电脑)浏览器上使用的 web页面,可以说PC端是web端中的一个呈现形式。所以相对应地前端开发工程师我们一般称为web前端工程师。了解了这个概念后,我们进入今天想要聊的关与PC端的几个问题:

1、PC端官网还有必要做吗?

2、后台管理系统的设计价值在哪里?

3、与开发工程师交付时踩过的那些坑


一、PC端官网还有必要做吗?

现在越来越移动端化,有人会问是否还有必要浪费资源做PC端的官网?但其实PC端还是要做的,只不过是需要用可适配的web端技术来做,而不是PC端和移动端分开来做,当然呈现形式和一屏的展示内容会有所不同,要遵循不同设备上的交互规则和操作习惯,来做一些个性化的调整。但整体的内容呈现和操作逻辑要相同,不然两端相差太大会给用户一定的学习和操作成本。

互联网人的操作习惯一般都是先上网了解下该公司的相关信息,然后再决定是否会选择这家公司,不管是购买服务产品还是其他。电脑端的特性就是内容呈现较丰富,对于坐在电脑前或使用电脑比较方便的用户来说,是便于查询信息的最佳选择。当用户经过查询企业的相关信息后觉得比较满意、感兴趣,才有可能会去下载移动端来进行产品的进一步体验;所以说PC端是一个重要的引流方式,不可或缺。比如官网一般长这样,第一屏幕里有显眼的引导下载移动端的入口。

图片来自网络


二、后台系统的设计价值在哪里?

后台管理系统一般被称为B端,即大多面向企业内部员工操作,用于流程的管控与操作,不同部门间的审核流转;再一个是作为平台提供给商家的后台订单管理系统,比如一般都有商户端(B端)和用户端(C端),而企业内部管理系统作为商户端和用户端的连接点来进行整体监督和管控。

为了更好的迭代和优化、节约资源成本,小公司一般基于大公司做的开放组件库来套入自己的业务内容,稍许调整就可以使用,省时省力。而大公司资源丰富,组成专业团队来自行设计、开发属于自己公司的组件库,更贴合自身公司的业务场景和产品需求,更能灵活运用,从而提高统一性、效率性。如饿了么的 element、阿里蚂蚁金服的 Ant Design 都是使用率较高的第三方开放组件库。

图片来自网络


既然说小公司做后台管理系统一般都是套用大公司的组件库,那是不是说产品出了需求后,不用经过交互和界面设计就直接可以找开发同学套模版上线了?我不认为是这样,产品需求只是在描述要做的事情,但至于怎么页面交互更能让用户便于操作,怎样的界面元素展示更能让用户明了要传达的信息,减少其理解成本,这些都是提高人效的考虑因素,虽然是公司内部人员使用,但和C端产品一样都是服务于“人”这个对象,也要遵循”人“的理解能力和操作习惯。不同的是B端在操作和名词上允许有一些行业内的专业术语,要尽量贴合日常中的一些称呼,便于沟通理解。

B端产品一般信息都比较多,稍不注意就会造成功能臃肿和信息凌乱,设计难点和价值在于多角色、多场景、多节点之间的流转交互和状态的展示、更需要在深刻理解业务的基础上去做,这就要求设计师要贴近业务场景、多与产品经理和一线业务人员沟通、交流;才有可能做出提高操作人员效率的管理系统。B端产品一般都有自身核心内容的特殊性,一般没有什么参考产品可言,因为设计商业机密,成熟的行业内的大公司也不会把自己的B端产品暴露出来,供我们学习参考。这一点相对于C端来说需要一点的门槛和难度。


三、与开发交付时踩过的那些坑

1、相同色值在不同屏幕下显示不同

之前有做个一个网页端的banner,中间使用主图,当屏幕更大时,左右用纯色背景来填充;相应的只提供给开发同学一个中间的主图就可以了,左右的纯色由开发同学用代码自己写;但开发同学在给我看效果的时候,发现同一个色值在图片上的颜色和左右大码写的颜色视觉上有色差,而且还很明显,下面图来自网络,非真实案例,此处只做示例展示:

主图来自网络


上面的图这样做,大家发现有什么问题吗?当时经验还不是很足,一时不知道什么原因,就上网搜索相关资料,原来是因为不同品牌的电脑显示器显示的色彩会有差别,包括饱和度都有差别。苹果的电脑色彩显示还算比较标准,更接近标准,这也是为什么大多设计师都选择用苹果的电脑的原因之一。

不光是在这个开发小哥哥上的显示有色差,在别的电脑上可能还会展示成其他的色彩效果。这就是我们就可以理解为什么不同手机显示的界面会有所差别

问题弄清楚了,下一步就是进行调整,把banner主图的左右改为渐变透明(之前是纯色),这样不管在任何电脑上主图和两边的背景都能完美过渡融合了。如下融合示例:

图片来自网络


2、按钮的可延展性

如某个类型的按钮文案字数不是固定的,2-6个字不等,这种按钮在后台系统上很常见,有时候不能为了精简而精简,还是需要能通过准确的表达让用户一眼明了、不要让用户去猜是什么意思。由于当时没有充分了解到最少文案和最多文案的字数情况,因为产品文档上是以4个字为示例的,所以设计图上也就只给出了一个固定宽度为4个字的按钮;由于前期没有考虑周全,后期就会增加很多工作量,如重新设定最小按钮宽度(按钮2个字的时候如果固定左右的间距会显得按钮特别小),当超过4个字后再固定文案左右的间距来增加按钮宽度来适应展示:


3、表格的缩放定义

后台管理系统中常见的表格,大多组件里默认设定的每一项宽度都是等比缩放,但对于某些需求来说是不太合适的,比如表格里的信息项特别多,有的信息特别短,有的信息又特别长,如日期和地址之类的。这时候如果用默认等比缩放宽度的话就显得不太合适,必要的情况下就应该按照需求做相应的特殊性处理,比如按不同的百分比来区分展示不同项内容的宽度,或固定某些少内容的项宽度,内容多的项做缩放展示等。这样做出来的产品可能更符合需求预期,记得做之前要把自己的想法和开发同学进行沟通,如果不沟通的话,可能他也就按默认的做了,后面再调可能就有些重复性的工作了,


总结

工作中都是一个逐步积累经验的过程,不要害怕犯错而止步不前,因为不犯错可能永远也不知道它别后的原因是什么,正确的又应该是怎样的。这样的话下次才能避免一些“坑”,才能有理有据的说出这么做的理由,而不是只是感性设计。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容