Алайса, комбокс, мультиселект, исемлек тартмасы һәм төшү арасында нинди аерма бар? Бу UI компонентларының барысы да охшаш булып күренсә дә, алар төрле максатларга хезмәт итәләр. Сайлау еш булган вариантлар санына һәм аларның күренүчәнлегенә төшә. Аларның ничек аерылып торуларын, нинди максат белән хезмәт итүләрен, дөресләрен ничек сайларга икәнлеген карыйк - юлда аңлашылмаучанлыклардан һәм дөрес булмаган өметләрдән сакланыгыз.
Барлык исемлек үрнәкләре дә бер үк түгел Aboveгарыда күрсәтелгән барлык UI компонентларының бер уртак яклары бар: алар кулланучыларның исемлекләр белән үзара бәйләнешен хуплыйлар. Ләкин алар моны бераз башкачарак эшлиләр. Әйдәгез, бер-бер артлы карыйк:
Тамчы → исемлеге башланганчы яшерелгән. Combobox → фильтр өчен тип + 1 вариантны сайлагыз. Мультиселект → тип фильтрлау + күп вариантларны сайлау. Исемлек тартмасы default килешү буенча күренгән барлык исемлек вариантлары (+ әйләндерү). Ике исемлек тартмасы items әйберләрне 2 исемлек тартмасы арасында күчерү.
Башка сүзләр белән әйткәндә, Combobox текст кертү кырын тамчы исемлеге белән берләштерә, шуңа күрә кулланучылар фильтрлау өчен бер вариантны сайлый алалар. Multiselect ярдәмендә кулланучылар күп вариантларны сайлый ала (еш кына таблетка яки чипс итеп күрсәтелә). Исемлек тартмалары килешү буенча күренгән барлык исемлек вариантларын күрсәтәләр, еш кына әйләндерү белән. Кулланучылар барлык мөмкинлекләрне шунда ук күрергә тиеш булганда файдалы. Ике исемлек тартмасы (шулай ук тапшыру исемлеге дип атала) - кулланучыларга ике исемлек (сулдан уңга) әйберләрне күчерергә мөмкинлек бирүче исемлек тартмасының вариациясе. Еш кулланыла торган вариантларны беркайчан да яшермәгез Aboveгарыда әйтелгәнчә, дөрес UI компонентын сайлау 2 фактордан тора: күпме исемлек вариантлары бар, һәм бу вариантларның барысы да килешү буенча күренергә тиеш булса. Барлык исемлекләрдә дә агач структуралары, оялар, төркем сайлау булырга мөмкин.
Бер UI компоненты өчен мин еллар дәвамында йөргән бер принцип бар: еш кулланыла торган вариантларны беркайчан да яшермәгез. Әгәр дә кулланучылар билгеле бер сайлауга еш таяналар икән, аны яшерүдә бик аз кыйммәт бар. Без аны алдан сайлап ясый алыр идек, яисә (еш кулланыла торган 2-3 вариант булса) аларны фишкалар яки төймәләр итеп күрсәтә алабыз, аннары исемлекнең калган өлешен үзара бәйләнештә күрсәтә алабыз. Гомумән, популяр вариантларны һәрвакыт күрсәтү яхшы идея - хәтта UI-ны чуалтса да. Кайсын сайларга? Everyәрбер исемлеккә катлаулы сайлау ысулы кирәк түгел. 5 пункттан ким булган исемлекләр өчен гади радио төймәләре яки пунктлар гадәттә иң яхшы эшли. Ләкин кулланучыларга зур вариантлар исемлегеннән сайларга кирәк булса (мәсәлән, 200+ әйбер), комбокс + мультиселект тизрәк фильтрлау аркасында ярдәм итә (мәсәлән, ил сайлау).
Кешеләр берьюлы күп вариантларга керергә тиеш булганда, аеруча бу исемлектән күп вариантларны сайларга кирәк булганда, исемлек тартмалары ярдәм итә. Алар еш кулланыла торган фильтрлар өчен файдалы булырга мөмкин.
Ике исемлек сандыгы еш кына санга сукмыйлар. Ләкин бу катлаулы биремнәр, e..g күпләп сайлау, яки рольләр, биремнәр, җаваплылык өчен бик файдалы булырга мөмкин. Бу бердәнбер UI компоненты, кулланучыларга тулы сайлау исемлеген эшләгәнче чыганак исемлеге белән янәшә карарга мөмкинлек бирә (шулай ук "Күчерү исемлеге" дип атала). Чынлыкта, икеләтә исемлек тартмасы ешрак тизрәк, төгәлрәк һәм тарту-ташлауга караганда кулайрак. Куллану мөмкинлеге Шуны истә тотарга кирәк: барлык исемлек төрләре клавиатура навигациясенә булышырга тиеш (мәсәлән, ↑ / ↓ ук ачкычлары). Кайбер кешеләр яза башлагач вариантларны сайлау өчен һәрвакыт диярлек клавиатура өстенә таяначаклар.
Моннан тыш:
7+ вариантлары булган исемлекләр өчен, кулланучыларның үзара бәйләнешен тәртипкә китерү өчен, "Барысын да сайлау" һәм "Барысын да чистарту" функцияләрен өстәргә уйлагыз. Комбобокслы озын исемлекләр өчен, барлык вариантларны кулланучыларга басыгыз / таптагыз, югыйсә алар беркайчан да күренмәсләр, Иң мөһиме, интерактив булмаган элементларны буталчыклыкны булдырмас өчен төймәләр итеп күрсәтмәгез - һәм интерактив элементларны статик этикеткалар итеп күрсәтмәгез.
Урлау: Барысы да төшү түгел Исемнәр мөһим. Вертикаль вариантларның исемлеге гадәттә "төшү" дип тасвирлана - ләкин еш кына мәгънәле булу өчен бераз гомуми. "Тамчы" исемлекнең килешү буенча яшерелгәнлеген күрсәтә. "Мультиселект" исемлек эчендә күп сайлау (пункт). "Комбобокс" текст кертүне аңлата. “Әм" Листбокс "- һәрвакыт күренеп торган сайлап алынган әйберләр исемлеге. Максат аның өчен югарыдагы аңлатмаларга туры килергә тиеш түгел. Ләкин киресенчә, ниятләрне тигезләү - карар кабул иткәндә, проектлаганда, төзегәндә, аннары бу UI компонентларын кулланганда бер үк телдә сөйләшегез. Бу эшләргә тиешһәркем - дизайнерлар, инженерлар һәм соңгы кулланучылар - статик этикеткалар интерактив төймәләргә охшамаса, һәм радио төймәләре пунктлар кебек эшләмәсә. "ЯИ интерфейслары өчен дизайн үрнәкләре" белән танышу ЯИ интерфейслары өчен дизайн үрнәкләрен очратыгыз, Виталийның яңа видео курсы реаль тормыш продуктларыннан практик мисаллар белән - тиздән UX тренировкасы белән. Ирекле алдан карау. ЯИ интерфейслары өчен дизайн үрнәкләре белән танышу, Виталийның интерфейс дизайны һәм UX видео курсы.
Видео + UX Тренинг Видео Видео + UX Тренинг $ 450.00 $ 799.00
Видео + UX Тренинг 30 видео дәрес алыгыз (10с) + Live UX Тренинг.100 көн акча-кире гарантия. Видео бары тик $ 275.00 $ 395.00
Видео курс 30 видео дәрес алыгыз (10с). Ел саен яңартыла. Шулай ук 3 видео курслы UX бунделе бар.
Файдалы ресурслар
Автокомплект: Виталий Фридман UX күрсәтмәләре Combobox, eBay by Комбобокс, Эластик Комбобокс, Элиса Combobox, MongoDB by Комбобокс, Visa by Комбобокс, Уотсон (Докпланнер) Комбобокс, Викимедиа Комбобокс, Зендеск Multiselect (MongoDB Combobox Design Docs), MongoDB by Викимедиа тарафыннан күпкырлы эзләү Күп сайлау комбасы, Ваадин Күпкырлы, Visa Кырмыскалар дизайны буенча Трансфер (Листбокс мисалы) Хоппер исемлеге Ваадин исемлеге Исемлек тартмасы, Visa Ике исемлек селекторы, Red Hat (PatternFly) Ике исемлек, Salesforce тарафыннан (Яшен дизайны системасы) Күчерү исемлеге, Мантин Dashlite тарафыннан икеләтә исемлек Бейджлар vs. Таблеткалар vs. Чипс vs. Тэглар, Виталий Фридман Исемлек тартмалары vs. Тамчы исемлеге, Анна Калей (NN / g)
