Пайдаланушының қабылдауы мен эстетикасын оңтайландыру бойынша ұсыныстар

2024-05-10

Осы Power Platform Жақсы сәулеттелген тәжірибені оңтайландыру бақылау тізімі ұсынысына қолданылады:

XO: 07

Классикалық дизайн принциптерін түс схемалары, типография және орналасу сияқты көрнекі элементтерге қолданыңыз. Пайдаланушылардың назарын маңызды элементтер мен әрекеттерге бағыттайтын бағытталған, теңдестірілген және интуитивті көрнекі иерархияға ұмтылыңыз.

Бұл нұсқаулық қолданушының қабылдауына әсер ететін әмбебап визуалды дизайн үлгілеріне арналған ұсыныстарды сипаттайды, олар қолданбаны қанағаттандыруға және қабылдауға айтарлықтай әсер етеді. Көрнекі элементтер тәжірибе жасау үшін пайдаланылатын негізгі құрылыс блоктары ретінде қызмет етеді. Адамдардың ақпаратты табиғи түрде қабылдау және өңдеу әдісіне сәйкес келетін көрнекі принциптерді қолдану тиімді және тартымды қолданба жасау үшін көрнекі элементтерді таңдауға және реттеуге көмектесетін құрылымдық әдістерді қамтамасыз етеді.

Негізгі дизайн стратегиялары

Адамның визуалды дизайнды қабылдауы бойынша кең ауқымды зерттеулер пайдаланушылардың көрнекі элементтерді оқшауламай қарайтынын көрсетеді. Керісінше, олар оларды басқа элементтерге және олар пайда болатын контекстке қатысты қабылдайды. Бұл қарым-қатынастар пайдаланушының қабылдауына әсер етеді, белгілі бір аймақтарға назар аударады, эмоцияларды тудырады, түсінуге көмектеседі, эстетиканы жақсартады және брендтің сәйкестігін күшейтеді. Көрнекі элементтерді мұқият таңдау және орналастыру мақсатты аудиториямен резонанс тудыратын тартымды, есте қаларлық және тиімді пайдаланушы тәжірибесін жасай алады.

Эстетикалық-пайдалану әсері

эстетикалық-пайдалану әсері тартымды өнімдерді қолдануға қолайлы деп санау үрдісін білдіреді. Пайдаланушылар қолданба туралы бастапқы пікірді шамамен 50 миллисекунд ішінде қалыптастырады. Бұл алғашқы әсерге құрылым, түстер, интервал, симметрия, мәтін саны және қаріптер сияқты әртүрлі факторлар әсер етеді. Алғашқы оң әсер пайдаланушының жалпы қанағаттануын арттырады. Зерттеулер көрсеткендей, пайдаланушылар интерфейсті көрнекі түрде тартымды деп тапқан кезде, пайдалану мүмкіндігінің кішігірім мәселелерін кешіреді. Сонымен қатар, дизайн сапасы сенімділік көрсеткіші бола алады.

Баланс және салмақ

Көрнекі тепе-теңдік визуалды қабылдаудағы тепе-теңдік пен үйлесімділік сезімін білдіреді. Ол когнитивті жүктемені азайту арқылы пайдаланушыларға көрнекі ақпаратты тиімдірек өңдеуге және ұйымдастыруға көмектеседі. Теңгерімді композициялар әдетте ұнамдырақ және түсіну оңайырақ болып қабылданады, бұл пайдаланушыларға назарды тиімді шоғырландыруға және көрнекі ынталандыруларды оңай басқаруға мүмкіндік береді. Көрнекі тепе-теңдіктің бұл когнитивтік аспектісі оның нақты коммуникацияны жеңілдетудегі және жалпы пайдаланушы тәжірибесін жақсартудағы маңыздылығын көрсетеді.

Барлық элементтер оптикалық тепе-теңдікте болғанда композиция теңдестірілген болады. Көбінесе математикалық орналастыру түзетуді қажет етеді. Көрнекі салмаққа әсер ететін элементтердің кейбірі өлшем, түс, тығыздық және ақ кеңістік болып табылады.

Өлшем: Үлкенірек элементтер кішірек элементтерге қарағанда көбірек көрнекі салмақты көтереді. Тепе-теңдікке қол жеткізу үшін үлкенірек элементтерді кішірек элементтермен топтастыру немесе орналасу ішінде орналасуын реттеу арқылы теңестіруге болады.
Түс: Ашық немесе қарқынды түстер дыбыссыз немесе бейтарап түстерге қарағанда көбірек назар аударып, ауыррақ болып көрінуі мүмкін. Түстерді теңестіру оларды интерфейсте біркелкі таратуды немесе көрнекі үйлесімділік жасау үшін қосымша түстерді пайдалануды қамтиды.
Тығыздық: Элементтердің тығыздығы олардың берілген кеңістікте қаншалықты тығыз оралғанын білдіреді. Тығыздықты теңестіру толып кетуді немесе сирек аумақтарды болдырмау үшін элементтердің интерфейсте біркелкі таралуын қамтамасыз етуді қамтиды.
Ақ кеңістік: Теріс кеңістік ретінде де белгілі, ақ кеңістік элементтер арасындағы бос аумақтарды білдіреді. Кеңістік визуалды тыныс алу бөлмесін жасауға көмектеседі және белгілі бір элементтерді бөлектеу және ерекшелеу арқылы композицияны теңестіре алады.

Теңгерімді композицияның мысалы. Теңдестірілген композиция - элементтер арасындағы көрнекі күштердің қосындысы.

Теңгерімді орналасудың мысалы. Орналасуды теңдестіру - ең қиын тапсырмалардың бірі, себебі оны оңай өлшеу мүмкін емес.

Түсі

Реңктер, реңктер, реңктер және реңктер мағынаны жеткізе алады, эмоцияларды тудырады және эстетикалық тартымдылықты тудырады. Түс пайдаланушының назарын аударуда, иерархияны орнатуда, ақпаратты жеткізуде және пайдалану мүмкіндігін арттыруда шешуші рөл атқарады. Бірнеше себептер пайдаланушы интерфейсіндегі ойластырылған түс дизайнының пайдаланушыларға қалағандай әсер етуі мүмкін екенін түсіндіреді:

Зейін және қабылдау. Кейбір түстер басқаларға қарағанда көздің жауын алады, бұл дизайнерлерге көрермендердің назарын белгілі бір элементтерге бағыттауға мүмкіндік береді. Түс контрасты ақпаратты жылдам өңдеуді жеңілдете отырып, оқылуды жақсартады және әртүрлі құрамдас бөліктерді ажырата алады.
Эмоциялық жауап. Түстердің эмоциялар мен көңіл-күйді тудыратын психологиялық ассоциациялары бар. Қызыл және қызғылт сары сияқты жылы түстер энергия мен толқу сезімін тудыруы мүмкін, ал көк және жасыл сияқты салқын түстер тыныштық пен тыныштықты тудыруы мүмкін. Пайдаланушыларға жоспарланған тәжірибеге әсер ету үшін қажетті жауаптарды алуға болады.
Бренд сәйкестігі. Брендтік материалдарда түсті тұрақты пайдалану күшті визуалды сәйкестікті орнатуға көмектеседі және брендті тануға ықпал етеді. Пайдаланушылар көбінесе белгілі бір түстерді белгілі бір брендтермен байланыстырады және олардың тәжірибесін бренд адалдығымен және сенімімен байланыстырады.
Көрнекі иерархия. Түсті көрнекі иерархияны орнату және ақпаратты ұйымдастыру үшін пайдалануға болады. Нақты иерархия жасау және оңай шарлау мен түсінуді жеңілдету үшін маңыздылығына немесе санатына негізделген элементтерге әртүрлі түстерді тағайындаңыз.

Жақындық

Бір-біріне жақынырақ орналастырылған заттар көбірек байланысты болып көрінеді. Элементтерді орналастырған кезде, бір-бірімен тығыз байланысты және байланыссыз элементтер арасындағы аралықта айтарлықтай айырмашылық бар екеніне көз жеткізіңіз.

Бұл гештальт принципі көрнекі элементтер арасындағы кеңістіктік қашықтық олардың ойша қалай қабылданатынына және ұйымдастырылғанына әсер ететінін болжайды және оның көрнекі ынталандыруларды тиімді өңдеу мен түсінуді жеңілдетудегі маңыздылығын атап көрсетеді.

Функционалдық жағынан ұқсас немесе бір иерархиялық санатқа жататын байланысты элементтерді бірге топтаңыз. Мысалы, ашылмалы мәзірде ұқсас әрекеттерді немесе опцияларды орындайтын түймелер олардың байланысын көрсету үшін тығыз топтастырылуы керек. Шарлау жолағында тығыз орналасқан мәзір элементтері қатысты опциялар жинағын ұсынады, ал мәзір санаттары арасындағы үлкен алшақтық оларды көрнекі түрде ажыратады. Байланысты пішін элементтері "мекенжай" деп аталатын бөлімдегі мекенжай өрістері сияқты топтастырылуы керек.

Абзацтар, сөйлемдер және сөздер арасындағы қашықтықты реттеу арқылы мәтіні ауыр интерфейстерде оқылу мүмкіндігін жақсартыңыз. Жақын абзац аралығы ойдың логикалық байланысын немесе жалғасын көрсетеді, ал үлкен интервал мазмұнның ауысуын немесе үзілуін білдіреді. Бұл әдіс мәтіндік ақпаратты тиімді түсінуге ықпал етеді.

Шатасулардың алдын алу үшін қатысты және байланыссыз элементтер арасындағы аралықта айтарлықтай айырмашылық бар екеніне көз жеткізіңіз. Аралық рампа элемент өлшеміне негізделген қажетті аралықты дәйекті түрде анықтауға көмектеседі.

Сол жақта ашық түсті шеңбер және қою түсті үшбұрыш, оң жақта бір ашық түсті шеңбер. Сол жақтағы шеңбер басқа шеңберге қарағанда үшбұрышқа көбірек қатысты.

Көлденең сызықтардың үш тобы тігінен орналасады, мұнда жоғарғы екі топ соңғы топқа қарағанда жақынырақ. Параграфтар арасындағы аралық бөлімдер арасындағы кеңістіктен кішірек.

Үздіксіздік

Сызық немесе қисық сызықта орналасқан элементтер сызықта немесе қисық сызықта емес элементтерге қарағанда көбірек байланысты болып қабылданады.

Шарлау мәзірлері немесе процестегі қадамдар сияқты интерфейс элементтерін реттілік немесе прогрессияны білдіретін сызық немесе қисық бойымен реттеңіз. Бұл орналасу пайдаланушыларға элементтер арасындағы қатынасты қабылдауға және ақпараттың немесе әрекеттердің логикалық ағынын түсінуге көмектеседі.

Қатысты элементтерді, мысалы, құсбелгі немесе радио опциялары немесе таңбаланған тізімдегі элементтерді бір-біріне көрнекі түрде топтау үшін жол бойына орналастырыңыз. Бұл реттеу пайдаланушыларға бұл элементтердің ортақ мақсатты бөлісетінін немесе бір санатқа жататынын ұсынады, бұл оңай шарлау мен түсінуді жеңілдетеді. Ұқсас көрінетін элементтер одан әрі ішке қарай шегініске ие болса, элементтің орны көрнекі иерархиядағы төменгі орналастырумен корреляцияланады.

Пайдаланушылардың назарын бағыттау және интерфейс арқылы көрнекі жолдарды жасау үшін сызықтарды немесе қисықтарды пайдаланыңыз. Мысалы, көрсеткі пайдаланушының көзін белгілі бір жол бойымен мазмұнның бір бөлімінен екіншісіне бағыттай алады, бұл қосылымды немесе прогрессті көрсетеді. Бұл әдіс пайдаланушыларға интерфейсті интуитивті түрде шарлауға көмектеседі және барлауды ынталандырады.

Пайдаланушылардың назарын аудару және фокус нүктелерін жасау үшін әрекетке шақыру түймелері немесе маңызды ақпарат сияқты негізгі интерфейс элементтерін көрнекті сызықтар бойымен реттеңіз. Мысалы, Fluent MessageBar үлгісі көбінесе мазмұн аймағында көрнекті теңдестірілген хабарлама ретінде көрсетіледі, сол жақта хабарлама оң жақта әрекетке шақыру түймелеріне әкеледі. Бұл орналасу стратегиясы осы элементтерді бөлектейді және өзара әрекеттесу ықтималдығын арттыра отырып, олардың маңыздылығын көрсетеді.

Қисықтар мен сызықтарды түске қарсы көрсететін мысал. Қисықтар/сызықтар біздің қабылдауымызға түстен күштірек.

Шебердің немесе жұмыс ағынының көрнекі көрінісі. Шеберлер пайдаланушыларды тым көп ақпаратпен толтырмай, қадамдардың қосылғанын көрсету үшін үздіксіздікті пайдаланады.

Жабу

Адам миы кейбір ақпарат жетіспейтін болса да, жекелеген объектілерге бір таныс үлгіні тани отырып, толық пішіндерді көруге бейім.

Пішіндер, түстер және өлшемдер сияқты дизайн элементтерінің визуалды сәйкестігін қамтамасыз етіңіз, тіпті олар әртүрлі контексттерде ұсынылған болса да, пайдаланушыларға күтуі керек үлгілерді үйренуге көмектесу.

Пайдаланушыларға бұрынғы тәжірибелері негізінде жетіспейтін ақпаратты толтыруға мүмкіндік беретін қарапайым және таныс белгішелерді немесе белгілерді пайдаланыңыз. Мысалы, үлкейткіш әйнек белгішесі әдетте мәтінмен бірге болмаса да іздеу функциясымен байланысты.

Ақпаратты пайдаланушыларға біртіндеп ұсыныңыз, ол прогрессивті ашу деп те аталады. Интерфейспен әрекеттесу кезінде пайдаланушыларға жетіспейтін мәліметтерді толтыруға рұқсат етіңіз, оларды тым көп ақпаратпен толтырмау және зерттеуді ынталандыру.

Пайдаланушыларды нысандарды біртұтас нысан ретінде қабылдауға шақыратын біртұтас көрнекі үлгілерді жасаңыз. Мысалы, қатысты элементтерді бірге топтау пайдаланушыларға олардың қарым-қатынасы мен мақсатын түсінуге көмектеседі. Сегменттеуді көрсету үшін Гештальт принциптерін қолдана отырып элементтерді визуалды түрде реттеңіз. Интерфейс элементтерінің айналасында тұйықталу сезімін жасау үшін кеңістікті тиімді пайдаланыңыз.

Пайдаланушылардың назарын аудару және интерфейс күйіндегі өзгерістерді жеткізу үшін анимация мен ауысуларды пайдаланыңыз. Әртүрлі күйлер немесе экрандар арасындағы біркелкі ауысулар пайдаланушыларға элементтер арасындағы қатынасты түсінуге және жетіспейтін ақпаратты толтыруға көмектеседі. Power Apps қол жетімді бірнеше заманауи басқару элементтері табиғи түрде анимацияларды көрсетеді.

Шаршы және төрт толық емес шеңберді қамтитын жабуды қабылдауды көрсететін мысал Шаршы төрт толық емес шеңберден бұрын танылады.

Екі байланысты элемент арасындағы алшақтықты жабу әрекетін көрсететін мысал. Картадан модальға дейінгі анимация екеуінің арасындағы алшақтықты жабуға және оларды бір-бірімен байланыстыруға көмектеседі.

Фокустық нүкте

Фокус нүктесі – көрерменнің назарын бірден аударатын дизайн элементі. Ең дұрысы, дизайнда пайдаланушыны мазмұн арқылы әдейі бағыттау үшін реттелген, әдетте, бір және үш арасындағы фокус нүктелерінің тізбегі болуы керек.

Интерфейсті ақпараттың анық иерархиясы бар жобалаңыз, мұнда ең маңызды мазмұн немесе әрекеттер фокус нүктелері ретінде баса көрсетіледі. Бұл элементтерді ерекше ету үшін өлшем, түс, контраст және орналасу сияқты көрнекі белгілерді пайдаланыңыз. Ақпаратты ең маңызды нүктелерден бастап бірте-бірте ұсыныңыз. Бұл әдіс пайдаланушыларға ең сәйкес мазмұнды немесе әрекеттерді жылдам анықтауға көмектеседі және оларды интерфейс арқылы логикалық ретпен бағыттайды.

Негізгі әрекетке шақыру түймелерін интерфейс ішінде көрнекті етіп орналастырып, оларды ең күшті фокус нүктелеріне айналдырыңыз. Бұл түймелер басқа элементтерден көрнекі түрде ерекшеленуі және пайдаланушыларды сатып алу немесе тіркелу сияқты қалаған әрекеттерге бағыттау үшін стратегиялық орналасуы керек. Еркін дизайн тілі осы элементтер үшін бренд тақырыбы түсін пайдалануды ұсынады.

Фокус нүктелерін жасау үшін контрастты тиімді пайдаланыңыз. Түс, жарықтық, өлшем немесе типографияның айырмашылығына байланысты ерекшеленетін элементтер пайдаланушының назарын табиғи түрде тартады. Қараңғы мәтінмен немесе фирмалық элементтермен ашықырақ беттерді контраст жасау анағұрлым көрнекті фокус нүктесін жасайды.

Қоршаған элементтерден көрнекі бөлуді жасау арқылы фокус нүктелерін бөлектеу үшін бос орынды пайдаланыңыз. Бұл әдіс алаңдаушылықтың алдын алуға көмектеседі және пайдаланушыларға ең маңызды мазмұнға немесе әрекеттерге назар аударуға мүмкіндік береді. Айналасында аралығы көбірек UI элементтері көбірек назар аударады және бос орын аз элементтерге қарағанда маңыздылығы жоғарырақ болып қабылданады.

Бірыңғай пайдаланушы тәжірибесін қамтамасыз ету үшін барлық интерфейсте фокустық нүктелерді пайдаланудағы жүйелілікті сақтаңыз. Фокус нүктелерінің үлгісін орнату арқылы сіз пайдаланушылардың интерфейсте шарлау үшін түсінуі керек иерархия туралы күтулерін бағыттайсыз және оларға әртүрлі экрандар немесе беттер арқылы маңызды ақпаратты немесе әрекеттерді табуға көмектесесіз.

Тепе-теңдікті сақтау және пайдаланушыларды тым көп бәсекелес орталық нүктелермен толтырмау маңызды екенін есте сақтаңыз.

Фокусты көрсету үшін түсті пайдалану мысалы. Көз алдымен көк шаршыға тартылады.

Блоктарды пайдаланып әрекетке шақыру мысалы. Іс-әрекетке шақыру сияқты элементтер пайдаланушылардың оларды байқайтынына көз жеткізу үшін негізгі нүктелер болуы мүмкін.

Ұқсастық

Ұқсас болып көрінетін нысандар жиі топ немесе үлгі ретінде қабылданады, бұл пайдаланушыларды бірдей функционалдылыққа ие болады деп күтуге әкеледі.

Ұқсас функциялары бар интерфейс элементтерінің тұрақты көрнекі мәнерлері бар екеніне көз жеткізіңіз. Мысалы, ұқсас немесе бірдей салмақты әрекеттерді орындайтын түймелер бірдей түске, пішінге және өлшемге ие болуы керек, бұл пайдаланушыларға ортақ функционалдық мүмкіндіктерін білдіреді. Керісінше, функционалдық жағынан айтарлықтай ерекшеленетін элементтердің анық ажыратылатынына көз жеткізіңіз. Екі әдіс анық көрнекі белгілерді орнату арқылы шатасушылық пен көңілсіздікті болдырмайды.

Барлық интерфейсте ұқсас әрекеттерді немесе мүмкіндіктерді көрсету үшін дәйекті иконография мен таңбаларды пайдаланыңыз. Пайдаланушылар өздерінің бұрынғы тәжірибелеріне негізделген белгілі белгішелерді арнайы функциялармен байланыстыруға бейім. Осы үміттерді қанағаттандыру үшін жалпыға бірдей танылған белгіше метафораларын пайдаланыңыз. Fluent UI иконографиялық кітапханасы сияқты бір жиынның белгішелерін пайдалану арқылы белгішелерді сәндеудің сәйкестігін қамтамасыз етіңіз.

Элементтер немесе санаттар арасындағы ұқсастықтарды көрсету үшін түс кодтауын қолданыңыз. Мысалы, тізімдегі қатысты элементтерді бөлектеу үшін бір түсті пайдалану немесе диаграммадағы ұқсас деректер нүктелерін топтау көрнекі үйлесімділікті жақсартады және пайдаланушыларға үлгілерді анықтауға көмектеседі.

Ұқсас мақсаттарға қызмет ететін элементтер үшін типография мен мәтінді сәндеудегі біркелкілікті сақтаңыз. Тұрақты қаріп мәнерлері, өлшемдері және пішімдеу байланысты мазмұнды немесе әрекеттерді пайдаланушылардың танылуын жеңілдететін біртұтас көрнекі тілге ықпал етеді.

Интерфейстегі ұқсас әрекеттер үшін дәйекті интерактивті кері байланысты қамтамасыз етіңіз. Меңзерді түйменің үстіне апару немесе сілтемені басу, пайдаланушылар көрнекі ұқсастық пен функционалдық баламалылық арасындағы байланысты нығайту үшін біркелкі жауаптарды күтуі керек. Платформа өз алдына меңзерді апару және басылған күй түс мәндері сияқты көптеген интерактивті әрекеттерді қамтамасыз еткенімен, құрамдас элементтерді нөлден жасау немесе кері байланыс күйлерін қолмен орындау кезінде осы дизайн принципін есте сақтаңыз.

Әртүрлі қажеттіліктері мен қалаулары бар пайдаланушыларды қанағаттандыру үшін көрнекі ұқсастықтардың мәтіндік белгілер немесе дыбыстық кері байланыс сияқты басқа белгілермен толықтырылғанына көз жеткізіңіз. Функционалдылықтың көптеген сенсорлық модальділіктер арқылы тиімді байланысы ыңғайлылық пен инклюзивтілікті арттырады.

Пішіндер мен түсті қолдану арқылы ұқсастық мысалы. Элементтер орналасуы (бағандар мен жолдар) емес, пішіні мен түсі бойынша топтастырылған.

Орналасудағы ұқсастық мысалы. Бақылау тақтасындағы бір карта бүйірлік панель ретінде ашылса, пайдаланушылар олардың барлығы осылай ашылады деп күтеді.

Сурет және жер

Адамдар инстинктивті түрде элементтерді не «фигура» (алдыңғы жағында ерекшеленетін) немесе «жер» (фонға түсетін) деп қабылдайды. Сондықтан контекст қабылдауға әсер етеді және маңызды элементтерді фоннан ажырату үшін жеткілікті шекараны қамтамасыз ету өте маңызды. Ақ кеңістік (теріс кеңістік) мазмұнды түсінуді арттырады.

Фигура мен жер арасындағы нақты қатынасты орнату үшін түс, өлшем немесе көрнекі стильдегі контрастты пайдаланыңыз. Маңызды элементтер фонда ерекше көзге түсіп, оларды оңай ажыратуға және пайдаланушылардың назарын тиімді бағыттауға мүмкіндік береді. Ашық түстері бар және фонда қарама-қарсы көрнекі элементтері бар беттер көбірек көрнекті болады. Бұл тәсіл көрнекі тәртіпсіздікті азайтады және пайдаланушыларға негізгі ақпаратты анықтауға көмектеседі. Көру қабілеті бұзылған пайдаланушылар үшін оқу мүмкіндігін жақсарту, мазмұнға қол жеткізу және түсіну қабілетін жақсарту үшін алдыңғы және фондық элементтер арасында жеткілікті контрастты қамтамасыз етіңіз.

Интерфейс элементтерін орналастыру мен сәндеудегі дәйектілікті сақтау фигура-негіз қатынасын нығайтады және пайдаланушыларға интерфейс құрылымын түсінуге көмектеседі. Дизайн үлгілері мен көрнекі белгілерді дәйекті пайдалану пайдаланушылардың әртүрлі экрандар мен контекстердегі алдыңғы және фондық элементтерді жылдам ажырата алатынын қамтамасыз етеді. Дизайндағы сәйкессіздіктер пайдаланушылардың психикалық үлгілерін бұзуы және интерфейсте тиімді шарлау қабілетіне кедергі келтіруі мүмкін.

Қараңғы элементтері бар біркелкі жиналған ақ контейнерлердің екі қатары төмен контрастты жиектермен бөлінген. Төмен контраст және минималды теріс кеңістік ақ тіктөртбұрыштарды фон бөлігі ретінде қабылдауға ықпал етеді.

Түсті фонда иллюстрациялары және сол жақта көрнекті ақ мазмұн ұяшығы бар экран макетінің мысалы. Пайдаланушылар маңызды мазмұнға назар аударуы үшін бүйірлік сурет фонға өтуі керек.

Топтастыру

Элементтер, әдетте, нақты анықталған шекарасы бар аумақты бөліссе, топтар ретінде қабылданады.

Қораптар, карталар немесе жиектер сияқты көрнекі контейнерлердегі қатысты элементтерді топтау пайдаланушыларға оларды біртұтас бірлік ретінде қабылдауға көмектеседі. Бұл тәсіл ақпаратты анықтау мен өңдеуді жеңілдететін мазмұн мен функционалдылықты көрнекі түрде ұйымдастырады. Түсінікті топтаулар аралас интерфейсті болдырмауға және шатасуды немесе тиімсіздікті азайтуға көмектеседі. Топтастыру жақындық мүмкін болмаған кезде де тиімді; мысалы, экранда бірнеше басқару элементтерін қамтитын хабар жолағы жиектері мен өң түсіне байланысты қатысты бірлік ретінде қабылданады.

Топтастырылған элементтер үшін дәйекті визуалды стильді сақтау олардың байланысын нығайтады және пайдалану мүмкіндігін жақсартады. Осы элементтер үшін ұқсас түстерді, қаріптерді немесе белгішелерді пайдалану олардың бір санатқа немесе функцияға жататынын баса көрсетеді. Көрнекі көрсетілімдегі сәйкессіздіктер қабылданатын топтастыруды әлсіретуі және пайдаланушылардың элементтер арасындағы қарым-қатынастарды елемеуге немесе олардың мағынасын немесе мақсатын дұрыс түсінбеуіне әкелуі мүмкін.

Бөлу үшін шекараларды пайдалану мысалы. Элементтің немесе элементтер тобының айналасында жиектерді қосу қоршаған элементтерден бөлуді жасайды.

Мазмұнды бөлудің пайдасын көрсететін мысал. Мазмұнды бөлу пайдаланушыларға тақырыптың ауысып жатқанын түсінуге көмектеседі.

Сигналдар шуға қарсы

Сызықтар, контраст және интервал сияқты көрнекі белгілер пайдаланушыларға маңызды нәрсе екенін білдіру үшін пайдаланылады. Дегенмен, тым көп сигналдар немесе маңызды емес ақпаратты бөлектейтін сигналдар тез шуға айналады.

Пайдаланушыларға маңызды ақпарат немесе әрекеттер туралы сигнал беру үшін қалың мәтін, қарама-қарсы түстер немесе белгішелер сияқты фокустық нүкте принциптерін пайдаланыңыз. Мысалы, маңызды түймелерді немесе тақырыптарды ерекше ету үшін ашық түсті пайдаланыңыз.

Пайдаланушыларды тым көп ақпаратпен толтырмау үшін бөлектейтін нәрселерді таңдап алыңыз. Пайдаланушының тапсырмасы немесе мақсаты үшін шынымен маңызды сигнал элементтері ғана. Тым көп сигнал шатастыруға және пайдаланушыларға басымдық беруді қиындатады. Пайдаланушы үшін ең маңызды ақпаратты анықтаңыз және оны тиісті түрде атап көрсетіңіз. Әдетте әр бетте әрекетке шақыру түймесі ғана болуы ұсынылады. Пішіндерде пайдаланушының назарын аудару үшін қажетті өрістерді бөлектеңіз. Бұл пайдаланушылардың қажетсіз мәліметтерде адасып кетуіне жол бермейді және олардың назарын маңызды нәрсеге аударуға көмектеседі.

Пайдаланушыларға үлгілерді тануға және әртүрлі сигналдардың мағынасын интуитивті түрде түсінуге көмектесетін нұсқаулық ретінде қызмет ету үшін сигналдар интерфейстің барлық бөлігінде дәйекті визуалды тілге сәйкес келетініне көз жеткізіңіз.

Белгілі бір контекстке және пайдаланушының қажеттіліктеріне сәйкес сигналдарды бейімдеңіз. Мысалы, егер пайдаланушылар белгілі бір тапсырмаларды ұсынатын интерфейсті сканерлеп жатқан болса, олардың назарын аудару үшін маңызды күй мен әрекет ететін элементтерді анық көрсетеді. Мәтінмәндік сигналдар пайдаланушыларға қатысты емес мәліметтерге алаңдамай, қажетті ақпаратты жылдам табуға көмектеседі.

Пайдаланушыларды бағыттау үшін сигналдарды пайдалануды көрсететін мысал. Сигналдар пайдаланушыларды мазмұн арқылы бағыттауға және маңызды нәрсені жеткізуге көмектеседі.

Көрнекі шуды блоктармен суреттейтін мысал. Көрнекі шу шатастырады және сигналдарға кері әсер етеді.

Power Platform жеңілдету

Кенеп қолданбаларында қатысты элементтерді топтау үшін орналасу контейнерлерін пайдаланыңыз. Ең дұрысы, сіз контейнерлердегі барлық бет элементтерін ұйымдастыруыңыз керек, ал орналасу контейнерлері бос орын сипатын реттеу арқылы еншілес контейнерлерді де тиімді ажырата алады.

Үлгіге негізделген қолданба пішіндерінде бөлімдерді байланысты өрістерді немесе элементтерді топтау үшін пайдалануға болады.

Қайта пайдалануға болатын арнаулы құрамдастары бар жалпы көрнекі элементтердің сәйкестігін енгізіңіз.

Кенеп қолданбаларында заманауи басқару элементтері олардың дизайнында біріктірілген сигнализация мүмкіндігі бар. Атап айтқанда, түйме және белгі басқару элементтері стиль сипаттарында опцияларды ұсынады, бұл оларды тиімді сигналдар етеді. Әрбір құрамдас үшін ең жақсы тәжірибелерді ұстаныңыз және оңтайлы байланысты қамтамасыз ету үшін сигналды таңдап қолданыңыз.