前端界面设计流程与原则

界面设计流程

界面设计先徒手画，再在使用软件开发工具（如：axcure、墨刀）实现可以运行的原型，邀请同行进行评审，反复迭代直到满意为止。一般要经历“原型创作—>原型评估－>细化”等步骤，通常需要多次迭。

界面设计原则

界面设计师在设计用户界面时，应该由易用性和美观程度出发，软件的功能需要通过用户界面来展现，界面设计既提倡外美内秀，又强调恰如其分，遵循以下几个设计原则。

• 容易理解
  所谓的容易理解是终端用户无需培训，根据界面提供的操作向导即可完成操作。界面结构能够清晰地反映工作流程，以便用户按部就班地操作。界面中的所有元素没有错误，不要让用户产生误解，所有的界面元素应当提供充分而必要的提示，如：装载图片时，应该提示图片要求的规格及预览功能
• 风格一致
  风格一致有两方面的含义，一方面在用户界面中，同类的界面元素应当有相同的视感和相同的操作方式；另一方面是同一类型软件的用户界面应当有一定程度的相似性
• 及时反馈信息
  及时反馈信息很重要，至少要让用户心里有数，知道该任务处理得怎么样了，有什么样的结果，如：用户进行某项操作后，如果几秒钟用户界面一点反应都没有，这将使用户感到迷茫和不安，因为他不知道是自己操作错了还是软件死机了
• 错误处理
  在设计用户界面时必须考虑出错处理，目的是让用户不必为避免犯错误而提心吊胆、小心翼翼地操作，如：提供对输入数据进行校验的功能。当用户输入错误的数据时，及时提醒用户改正数据。
• 合理的布局
  首先，界面的布局应当符合逻辑，最好能够与工作流程吻合。界面设计人员只有仔细地分析软件的需求，才能提取对界面布局有价值的信息。其次，界面的布局应当整洁（整齐清爽）。界面元素应当在水平或者垂直方向对齐，行、列的间距保持一致。窗体的尺寸要合适，各种控件不能过分拥挤也不能过分宽松。要善于利用窗体和控件的空白，以及分割用的线条。
• 色彩和谐
  用户界面是否美观。主要取决于该界面的布局和色彩搭配，设计和谐的色彩时，首先要限制一帧屏幕的色彩数目，否则看起来杂乱无章，其次，应当根据对象的重要性来选择颜色，重要的对象应当用醒目的色彩表示，最后，使用颜色的时候应当保持一致性，如：错误提示信息用红色表示，正常信息用绿色表示，那么切勿滥用红色和绿色

小结

行内经常说前段门槛低，但是做好很难。这里的门槛低指的是掌握了html、css、javaScript及面向对象的一些基础的理论就可以上手做，做好很难指的是界面既要精致，又要做到使用起来就像操作大众软件一样容易，这需要经验的积累。作为前段开发人员开始可以模仿国内大厂前段页面的布局，同时多思考这些大厂为什么这样做，这样做的好处在哪儿，又什么优点、缺点。这也是前端小白成为前端高手的必由之路。