欧宝网官方站入口-欧宝(中国)




    H5游戏制(zhì)作
    H5游戏制作(zuò)
    H5游戏制作(zuò)
    H5案例
    H5开发
    扫一扫(sǎo)
    h5定制
    h5定制

    回到顶部

    产品必备的(de)H5交互设计知(zhī)识分享

    H5交(jiāo)互设计 2022年12月13日

    每个人对交互设计下的定(dìng)义(yì)都不一(yī)样,交互设计的对象是行为,我理解的交互设计是指(zhǐ)在交(jiāo)互系统(tǒng)中,用户使用产(chǎn)品的操(cāo)作行(háng)为,用户行为可能是主动的(de)也可能是被动的,也(yě)就(jiù)是(shì)交互设计师、产品经理(lǐ)、设计师等,都需要懂(dǒng)得并熟练运用交互知识在产品设计上,不仅要让产品达到(dào)好用、易用、想(xiǎng)用的目标,同时也要通过(guò)对用户行为的引导来提高页(yè)面的转化率。下面,欧宝网官方站入口和蓝橙互(hù)动就给大家(jiā)分享一下H5交互设计应(yīng)该怎么(me)做。

     

    一(yī)、交互设(shè)计流程

     

    H5项目制作(zuò)流程通常是:产品需求 → 交(jiāo)互设计 → 视觉设计 → 开发。其中(zhōng)交互设计包含:架构图、流程图、界面原型、demo(动(dòng)态原型)。交互设(shè)计的(de)核心要素是用户、场景及任务。通俗的讲就是人在什么时间?什么地(dì)点、什么环境、什么心理下会使用(yòng)我们这(zhè)款产品?那使用(yòng)产品的目的是什(shí)么?要通过什么行为才能达到这个目(mù)的?如(rú)何高效的引导用(yòng)户达成目标?……这(zhè)些过(guò)程都需(xū)要我们(men)思考。

     

    H5交互设(shè)计


    二、交互设计的作用

     

    目前市面上已经有(yǒu)很多产品,我们(men)看一下平时在一(yī)些H5案例APP使用(yòng)过程中,有没有遇到过以(yǐ)下这些糟糕的情况:

     

    H5交互设计

     

    是不是遇到这些情况就不想用这款产品了,更别(bié)说转化了。这就是为什么我们要做(zuò)好(hǎo)交(jiāo)互设(shè)计。

     

    三(sān)、交互的十大可(kě)用(yòng)性原则

     

    1、状态可见

     

    状态可见(jiàn)是(shì)让用户知道现(xiàn)在的状态(tài),对过去发生、当(dāng)前目标、以及对未来去向有所了解(jiě),不致(zhì)于在产(chǎn)品(pǐn)中迷路。比如用户在进行刷新,点(diǎn)击,评论,点赞,输入等动作时系统应该(gāi)即时反馈让用户知道自己的操作是有效的,知道自己现在(zài)自己所处的(de)状(zhuàng)态和位置。

     

    过(guò)程中(zhōng)反馈-进度条(tiáo)

     

    当用户进行一些不(bú)会马上完成(chéng)的(de)任务时(shí),系统需要有一个加载、校验、查(chá)询或计算的(de)过程。在这个过程(chéng)中,我们必须让(ràng)用户(hù)的操作(zuò)得到恰(qià)当的反馈(kuì),能让(ràng)用(yòng)户能感知(zhī)到现在的(de)进程是否成功或者进度(dù)是什么样的。比如(rú)进(jìn)度(dù)、内容加(jiā)载时,增加用户掌控(kòng)感,消除用户(hù)的焦虑(lǜ)感。常见的场景有:上传、下载(zǎi)、更新……

     

    H5交互(hù)设计(jì)


    操作(zuò)结果(guǒ)反馈

     

    系统(tǒng)适当反(fǎn)馈是用(yòng)户界(jiè)面设计的最基本准则。当用户通(tōng)过点击按钮、填写表格等一系列行(háng)为(wéi)并完成最终任务时,设计师需要明确的告(gào)知(zhī)用户任务的(de)结果:失败还是成功,后(hòu)续需要做什么。常(cháng)用场景有(yǒu):提交、增加、保存、收(shōu)藏、点赞(zàn)……

     

    H5交互(hù)设计


    ③位置可见(jiàn)

     

    告诉用户处在系统的什么位置,特别是对(duì)于新(xīn)用户(hù),需要提供(gòng)必要的信息,否则容易(yì)迷惑。比如:导(dǎo)航菜(cài)单、面包屑、标签(qiān)页、步骤条、分(fèn)页器等等。

     

    H5交互设计


    2、环境贴(tiē)切现实(shí)

     

    字面解释就是系统的信息要与现(xiàn)实(shí)环境表现一(yī)致。使用的语言、文字等,需要是用户(hù)熟悉的、能理(lǐ)解(jiě)、不会有歧义(yì)的。减(jiǎn)少用(yòng)户的(de)学习成本,不要认为用户能记住你设计新(xīn)颖的信息。

     

    H5交互设计


    3、用户可控

     

    用户拥有控制权。用户可以自由(yóu)的控制返回(huí)和去到的地方。

     

    H5交(jiāo)互(hù)设计


    4、一(yī)致性原则

     

    对于用(yòng)户来说,同样(yàng)的文字、状态、按钮(niǔ),都(dōu)应该触发相同的事情,遵从通用的平台(tái)惯例;也就是,同一用语、功(gōng)能、操作(zuò)保持一致(zhì)。轻量级反(fǎn)馈统一(yī)用toast反馈,重级(jí)反馈统一用模态弹框展示。

     

    H5交互(hù)设计


    5、防错原则

     

    在错误发生之前就避免它。可以帮助用户排(pái)除一(yī)些容易出错的情(qíng)况,或在用户提交之前给他一个确认的选项。

     

    重要操作提供二次确认

     

    对(duì)于一些不可逆或很重要的操作(zuò),系统(tǒng)大(dà)部分(fèn)会提供二次确(què)认提示,如此(cǐ)可(kě)以使用户避(bì)免因误(wù)操(cāo)作而给自己带来损(sǔn)失。

     

    H5交互设计


    ②预判错误并告知

     

    给(gěi)予用户(hù)必要的预判性(xìng)错误提示——告诉用户,这样走可能会错

     

    H5交互设计


    ③合理(lǐ)设(shè)计

     

    屏蔽会引起歧义的设计、本身不(bú)合理(lǐ)的设计,不让用户因为产品的设计缺陷而导致用户犯错。让(ràng)用户频繁(fán)碰壁、产生挫折感的设计,其(qí)原(yuán)因不(bú)是用户的愚蠢、而是设计的愚(yú)蠢。

     

    H5交互设计


    ④给(gěi)予正确引导

     

    把简单留(liú)给(gěi)用户(hù),把复杂留(liú)给自己:通过系统的优良设计(jì)约束和指引用户(hù)的操作,把出现错(cuò)误的可能降(jiàng)到最低。

     

    H5交互设计


    引起用(yòng)户注意

     

    利用一些视觉元(yuán)素引起用户注意 ,提供警示作用,如下图。

     

    H5交互(hù)设(shè)计


    6、易取原则

     

    好记性不如(rú)烂笔(bǐ)头。尽可能(néng)减少用户回忆负担,把需要记忆的内容摆上台面(miàn)

     

    ①智能获取

     

    通过智能读取用户之前填写过(guò)的信息,或者智能(néng)识(shí)别等形式,减少用户(hù)记忆(yì)负担与(yǔ)操(cāo)作负担。

     

    H5交(jiāo)互(hù)设(shè)计


    ②让用户选(xuǎn)择(zé)而不是填写

     

    比起让用(yòng)户输入,让用户选择更能降低用户的记(jì)忆成本,更好地辅助用户做决策。如果(guǒ),有很多的信息或(huò)者选项是用(yòng)户高频率会选择的(de),不妨给(gěi)用户提前做好选择(zé),提供默(mò)认选项,如(rú)下图:

     

    H5交互设(shè)计


    ③草稿箱(xiāng)或(huò)历史记录

     

    作为(wéi)用户,你不记得(dé)的操(cāo)作,系(xì)统可以帮你记录。为(wéi)用户提供历史记录,文本创作的(de)过程中自动保存草稿,让用户方便查询自己的进程,这就是(shì)信息(xī)易取原则的(de)设计。保留历史(shǐ),最为常见(jiàn)的就是(shì)为用户(hù)保(bǎo)留历史搜索和(hé)历史浏览、储存账号(hào)和密码。视频(pín)APP会详细记录用户的(de)观(guān)看记录,当用(yòng)户没有看完某部电影时,下次进(jìn)入直接从断点续(xù)播(bō)上次(cì)播(bō)放(fàng)的位置,无(wú)需用户记忆上(shàng)次看到哪里了。

     

    H5交互设计(jì)


    ④跳转(zhuǎn)明确

     

    提供用(yòng)户明确的跳(tiào)转入口,不(bú)需(xū)要用户记忆操作路径

     

    H5交(jiāo)互设计


    ⑤行为(wéi)输(shū)入代替字符输(shū)入

     

    这一点其实也(yě)非常好理解,一(yī)个简单的动作,比打字要轻松得多,常见的就是(shì)在设备解锁的时候,用(yòng)手势解锁替代密码(mǎ)解锁。随着技术发展,有了更(gèng)多的行(háng)为代替(tì)输入的方式,比如指(zhǐ)纹识(shí)别和面(miàn)部识别,用简单的操(cāo)作,就可以达到(dào)进入系(xì)统的(de)目的,这就避免了用户(hù)需要较多的操作和(hé)密码的记忆(yì)。

     

    H5交互设计


    ⑥可视(shì)化

     

    将选择的对象,动作(zuò),选项可视(shì)化,让用户一看就懂。注意(yì)图(tú)标符号化能让人理解(jiě),避免引起误解。

     

    H5交(jiāo)互设计


    7、灵活(huó)高效(xiào)

     

    一些快(kuài)捷操作的功能,虽然会被(bèi)专家用(yòng)户(hù)忽略,但可能为新手用户(hù)所使用,并帮(bāng)助(zhù)提升其(qí)使用效(xiào)率(lǜ),因此,系统需要同时(shí)满足新手用户和专(zhuān)家(jiā)用(yòng)户的需求。

     

    ①提供定制化服务

     

    让用户灵活定制,最典型的例(lì)子是各类软件和App的配置(zhì)功能,基本上所有软件都(dōu)会提供定化功能,从快捷键设置,到页面布局,再到自定义参数,软件(jiàn)系统会尽量提供全(quán)面的(de)个性化置(zhì)功(gōng)能,来满足不同用户的使用诉求(qiú)和习惯,提(tí)升用户的使用效率和体验。

     

    H5交(jiāo)互设计(jì)

     

    还有一种是系统根据用户常用自动整理归纳(nà),以提升使用效率,减少用户(hù)多余(yú)操作。

     

    H5交互设(shè)计(jì)


    ②“跳过”按钮

     

    通过(guò)用(yòng)户快捷跳过(guò)的入口,比如常见的:引导页、操作(zuò)手(shǒu)册、还是(shì)开屏广告,有“跳过(guò)”或者”立(lì)即进入(rù)“按钮真的(de)很贴心。

     

    H5交互设计


    ③允许用户重复操作

     

    对于用户频繁使用的部分,提(tí)供快捷的重复(fù)使(shǐ)用操作,比(bǐ)如:外(wài)卖app,用户可以快捷地再来一单,同时保存上一次操作记录。

     

    H5交互设计


    8、审美和简约设(shè)计

     

    内(nèi)容框(kuàng)中不应包含无关或很少用(yòng)到的信息。在内(nèi)容(róng)框中每增(zēng)加一个(gè)信息,就(jiù)意味着(zhe)降低了主要信息(xī)的相对(duì)可见性。此(cǐ)原则根本目标是让用户快(kuài)速找(zhǎo)到界面的(de)重(chóng)要信(xìn)息,引导用户(hù)的视(shì)线及操作行为。


    对重要信息突出显示

     

    用户注意力资源有限,应该保持信息精炼,突出重(chóng)要信息,弱化次要信(xìn)息。

     

    H5交互设计


    ②视觉统一

     

    好(hǎo)的(de)原型是(shì)黑白(bái)灰的,很多产品经理喜欢(huān)用图(tú)片原件、用各种(zhǒng)颜色(sè)块去(qù)“让自己(jǐ)的原型变的美观(guān)”,没必要(yào)。那我的原(yuán)型中会(huì)出现不同级别(bié)的内容和文字,怎么(me)体现呢?黑和(hé)灰都有不同(tóng)的色度,颜色(sè)饱和度的高低可以直接让用户知(zhī)道内容(róng)的优先级。

     

    H5交互设(shè)计


    9、容错(cuò)原(yuán)则

     

    容错原(yuán)则(zé)是(shì)指帮助用户从错误中恢复,将损失降到最(zuì)低。如果无(wú)法自动挽回,则提供(gòng)详尽的说明文字和指导方向。

     

    ①提(tí)供撒销/修改(gǎi)功能

     

    部分系统可(kě)提供撤销操作来帮助用户减少因自己的冲动而进 行(háng)操作带来(lái)的后(hòu)果。

     

    H5交互设计


    ②减少错误代价

     

    防错原则有一个(gè)非常重(chóng)要(yào)的点“发现错误,及(jí)时反馈”,当用户已经操(cāo)作错误的时候,系统需要(yào)及时提醒用户当前操作(zuò)错误,可通(tōng)过文字说明和颜色辅助的方式(shì)提醒,而不(bú)是等到用户(hù)全部操(cāo)作完(wán)了(le)之后再(zài)提(tí)醒,这(zhè)样会影响用户(hù)体验。

     

    H5交互设计


    ③提供(gòng)解决方案

     

    在出错(cuò)界面给出解决(jué)方案(àn),可以是文字提醒或者按钮跳转等形式,帮(bāng)助用户解决问题。比如(rú)缺(quē)省页的设(shè)计除了(le)配置插(chā)图还会有提示文案与(yǔ)操(cāo)作按钮,引导用户去操作,去进一步解决问(wèn)题(tí)。

     

    H5交互设(shè)计


    10、人性化(huà)帮助

     

    人性化帮助原则的根本(běn)目(mù)标是用户在使用(yòng)产品的(de)过程中有所依循(xún),因为产品已经贴心地为他们准备好了(le)帮(bāng)助方(fāng)式,或者即时提示和反(fǎn)馈(kuì),或者客服。帮助性提示最好(hǎo)的方式是:

     

    H5交(jiāo)互设(shè)计


    ①常(cháng)驻(zhù)提示

     

    常驻提示需要一直固定在(zài)某个位置实(shí)时帮助用(yòng)户。红点、数字或文字,一般出现在通知图标或头像(xiàng)的右上角,用于显示需要(yào)处理的消(xiāo)息条数(shù),通过(guò)醒目视觉形式吸引(yǐn)用户处理。

     

    H5交互(hù)设计


    ②帮(bāng)助(zhù)文(wén)档

     

    最后就是帮助文档了,一般用于解释规(guī)则(zé)或者热(rè)点问题,通常以超链(liàn)接的形式存(cún)在(zài)于页面中,或者以(yǐ)集(jí)合形(xíng)式位于(yú)设置页(yè)中(zhōng),此时(shí)需要注意要易于检(jiǎn)索。

     

    H5交互(hù)设(shè)计


    总的来说,尼尔森十大可用性(xìng)原则可灵活运用于各个地方,可以是(shì)交互(hù)设(shè)计,也可以(yǐ)是(shì)界面设(shè)计,深入(rù)了解该设计原则,可(kě)以找到更好(hǎo)的解决方(fāng)案,提高用户的使用(yòng)体验。要注意的是,这(zhè)10项原则是启发式(heuristics)的、广泛的经验法则,而(ér)不是具体的(de)规定。



    联系(xì)QQ:2899301896

    欧宝网官方站入口和蓝橙(chéng)互动(dòng)·致力于为(wéi)企业提供更高效(xiào)的开(kāi)发服务

    欧宝网官方站入口-欧宝(中国)

    欧宝网官方站入口-欧宝(中国)