提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
首先,最明显的问题是,整体设计非常的不一致,在上一版设计中,缺乏明确地设计语言,没有明确的色彩与字体使用规范,甚至连布局上,有几个页面也非常不一致。VI设计上,也没有很好地延续网站的视觉风格——名片、明信片、海报。历经了很久的磕磕绊绊后,我们决定推倒重来。我们决定创造出高扩展度的界面,同时达成响应式布局,让多平台均可以舒服地浏览。
第二,我们意识到,我们之前的品牌形象和我们的目标不太相符。随着多方合作不断增多,用户基础不断增加,我们需要更加精致、细腻、专业的品牌形象。
回到去年11月,我们和我们的朋友Eddie Opara以及他的设计团队开始合作,旨在构建更符合品牌形象的视觉设计。
首先,我们决定先打磨一下Logo,作为改版的核心之一,Logo至关重要。我们慎重的和用户、合作伙伴、老板讨论了之后。我们开始了Logo得重构。
优秀的Logo设计,需要让颜色、字体、图标互补,且一致。而且Logo的重设计,也决定了其他部分的重设计。下面是我们的种种努力,各位可以看一看。
在和Pentagram团队(Eddie Opara的设计团队)确定了Logo、字体、图标、颜色后。我们决定将这套样式应用到我们整个网站生态系统中。首先,我们需要构建一套一致的UI设计模式,方便我们重设计时重用元素。我们花了2个周构建了一套可缩放大小的UI套件。
这里我们开始了实际设计阶段,很磨人,但是是非常重要的。根据站点地图,我们重设计了70多个页面。我们先规划好任务周期和期限,最终,我们完成了各种里程碑。
最后这个阶段,主要是验证阶段。我们开始实施并验证我们的重设计,我们选择了一些用户和版主,邀请他们实时测试,并认真听取反馈并修改。
虽然整体的重设计完了,但是一些小细节上,还是需要打磨,我们会不断推陈出新,让大家更愉快地学习编码。
我们的通知页采用了单栏布局
将内容限制在单栏,有助于用户凝聚注意力,同时用户阅读顺序是自然而下的,我们就更方便去进行视觉引导。而且,还有一点,单栏有助于响应式设计的构建,能够很好地适应手机和平板。
贯穿网站的用户推荐评价卡
我们的网站是为用户而服务的,我们不想做独断专权,强迫用户的人。在重设计中,我们更加注重用户,因为用户来Codecademy都是为了学习的,每一个用户都需要被励志或者励志别人。我们希望用户能把自己在Codecademy中的收获写出来,或是一些哲理的句子,或是自己的成功经历。
此次重设计,我们在色彩运用上变得保守,对比感明显的色彩主要在一些行为召唤、悬停状态、按钮和控件中出现,这样用户便能够按照引导来操作,提高效率
简化后的注册窗口
填表冗长,用户会感到厌烦众人皆知。因此我们最小化了填表域所需的信息,旨在提高转化率,减少用户输入。
具备行为召唤的元素不宜太多,否则会让用户感到认知过载
减少单个页面中行为召唤元素的个数,根据希克定律,选项越多,用户就越难做抉择,因此我们必须保证主要元素具有视觉吸引力,删减次要元素。
内容卡片,当悬停后,或出现相关的操作项。
我们决定让内容为王,当用户悬停在某个元素上时,我们直接提供与内容相关的操作,而不是进入跳转链接。
这是我们的新博客,展示出较为清晰的视觉层次感。
设计师能力的高低,要看他设计的视觉层次感。通过字体、颜色、图标的布局,我们意图打造清晰的内容顺序和视觉层次感,从而提高文本的可读性。
正在处理中得项目卡片,顶部可以实时预览项目
在生理上,人类能够记忆起不久之前的东西。因此我们在整体的生态系统中(个人页,后台)等,均提供了项目快照,让用户对操作的对象更加熟悉,避免误操作。
选择填表域的行为召唤感最为强烈
根据费茨定则,目标越大(指针和目标的距离越近),越能快速完成操作。因此,一些主要的、需要交互的UI元素,比如填表域、按钮、卡片、链接。我们都将尺寸提高,同时还方便移动设备的触摸操作。
即便用户的使用记录为空,但是依然要打造热忱的欢迎体验。
优化新用户的使用体验,鼓励用户,让他们变得更自信,学的更多,走的更远。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册