Веб-интерфейс дизайны дегеніміз не - толық анықтама
· Время на чтение: 14мин · бойынша · Жарияланды · Жаңартылған 
Бұл мақаланы тыңдаңыз
Веб-интерфейс дизайны дегеніміз не? Интерфейс дизайны (яғни пайдаланушы интерфейсінің дизайны) адамдар мен машиналар арасындағы ақпаратты тасымалдау және алмасу құралы болып табылады. FaceUI аппараттық интерфейс пен бағдарламалық интерфейсті қамтиды деп айтылады. Бұл информатика мен психологияның, дизайн өнерінің, когнитивтік ғылым мен эргономиканың қиылысы. Соңғы жылдары ақпараттық-компьютерлік технологияның қарқынды дамуымен, сондай-ақ желілік технологияның қарқынды дамуымен адам мен машина интерфейсін жобалау және дамыту халықаралық компьютерлік және дизайндық үйірмелердегі ең белсенді зерттеу саласына айналды.
UI дегеннің аббревиатурасы болып табылады пайдаланушы интерфейсі. Пайдаланушы интерфейсінің дизайны адам мен компьютердің өзара әрекеттесуінің жалпы дизайнын, жұмыс логикасын және әдемі интерфейсті білдіреді. Жақсы пайдаланушы интерфейсінің дизайны бағдарламалық жасақтаманы жеке және стильді етіп қана қоймайды, сонымен қатар бағдарламалық жасақтаманың жұмысын ыңғайлы, жеңіл және еркін етеді, бағдарламалық құралдың орналасуы мен сипаттамаларын толығымен көрсетеді.
Интерфейсті жобалаудың әртүрлі талаптарын және интерфейсті жобалау элементтерінің пайдаланушы әрекетіне әсерін жіктеу арқылы интерфейсті жобалаудағы пайдаланушылардың маңыздылығы зерттеледі.
интерактивтілік веб-интерфейс дизайнының мақсаты болды. Дизайн қолдануға жарамдылық талаптарына сай болуы үшін пайдаланушының сипаттамалары мен әртүрлі талаптарды жан-жақты түсіну қажет. Ол үшін пайдаланушының сан алуан талаптарын құжаттау және жүзеге асырудың дұрыс жолын табу қажет.
Интерфейс адамдар мен объектілердің өзара әрекеттесетін орта болып табылады, басқаша айтқанда, интерфейс дизайнерлер объектілерге беретін жаңа бет болып табылады.
Веб-интерфейс дизайнының классификациясы
1. Функцияларды жүзеге асыру негізінде интерфейсті жобалау
Ең негізгі қасиеті интерфейс дизайны Өзара әрекеттесулердің барлығы функционалдылық пен ыңғайлылыққа қатысты. Интерфейсті жобалау арқылы пайдаланушылар функционалдық операцияны түсіне алады, ал операцияның өзі туралы ақпаратты пайдаланушыға, яғни функционалды интерфейстің бар болуының негізі мен мәні болып табылатын пайдаланушыға біркелкі жеткізуге болады. бірақ білім деңгейінен бастап және мәдени фон пайдаланушылар әртүрлі, интерфейс жұмыстың өзі туралы ақпаратты неғұрлым халықаралық және объективті түрде көрсетуі керек.
2. Эмоционалды көрініске баса назар аудара отырып, интерфейс дизайны
Дизайндың нағыз көркемдік сүйкімділігі интерфейс арқылы пайдаланушыға эмоцияны жеткізуде жатыр. Жұмыспен байланыста болған пайдаланушының сезімі адамдарда эмоционалдық резонанс тудыруы мүмкін, ал эмоционалды экспрессия жұмыс пен қолданушы арасындағы эмоционалдық қатынасты тиімді көрсету үшін қолданылады. Әрине, беруде белгілілік пен белгісіздіктің бірлігі бар эмоционалды ақпарат. Сондықтан, біз пайдаланушылардың туындылармен байланысқан кездегі эмоционалдық тәжірибесіне көбірек көңіл бөлеміз.
3. Қоршаған орта факторларына негізделген интерфейсті жобалау
Ешқандай интерактивті жобалау жұмысы ортасыз өмір сүре алмайды, ал қоршаған орта жобалау жұмысының ақпаратын жеткізуге ерекше әсер етеді. Өз тарихының, мәдениетінің, технологиясының және басқа да көптеген аспектілердің сипаттамаларын біріктіру, интерфейс үшін орта жасау - бұл назардан тыс қалмайтын дизайн жұмысы, сондықтан фильмді көргенде шамдарды өшіру керек.
Веб-интерфейс дизайнын қалай үйренуге болады
Ең алдымен веб-дизайнға қажетті тілді - html тілін үйреніңіз. html - бұл бағдарламалау тілі емес, белгілеу тілі екенін ескеріңіз. Бұл тілдің мазмұнын үйрену салыстырмалы түрде оңай және HTML кодын онлайн режимде іске қосуды қолдайтын веб-бет бар.
HTML/CSS үйреніңіз
Веб-дизайн әдетте html тілі мен CSS тілінің тіркесімін қажет етеді. CSS - бұл веб-дизайндағы таптырмас веб-сайт жасау тілі. Мұнда мен runoob деп аталатын бетті ұсынамын, ол мен сияқты жаңадан бастаушыларға үйренуге өте қолайлы бірнеше тілде кодты жөндеуге және іске қосуға болады.
Javascript тілі де пайдалы болады
Веб-беттердегі арнайы эффектілерді жақсарту үшін сізге JavaScript үйрену керек. Javascript тілі динамикалық терілген тіл болып табылады және қазір әртүрлі динамикалық веб-беттерді әзірлеу қажет. Егер сізде жеткілікті дағдылар болса, Java тілін де үйренуге болады.
Сізде белгілі бір көркемдік дағдылар болуы керек
Шынында да жақсы суреттер әдетте кодпен жасалмайды, сондықтан сізде жақсы сурет салу дағдылары болуы керек. Әрине, сіз сурет сала алатын достардан көмек сұрай аласыз. Photoshop бағдарламалық құралын пайдалануды үйрену үшін бұл графикалық дизайнның маңызды бағдарламалық құралы. Бұл бағдарламалық жасақтама ең көп қолданылатын және үйренуге оңай дизайн бағдарламалық жасақтамасы. Бұл салыстырмалы түрде қолжетімді және пайдалану оңай деп айта аламыз.
Егер сіз шынымен веб-сайтты өзіңіз әзірлеуге тым жалқау болсаңыз, оны дамытуға көмектесу үшін басқалардан да сұрай аласыз, бірақ бағасын алдын ала келісу керек, сайып келгенде, веб-сайт жасау оңай жұмыс емес!
Web UI дизайны үшін қандай дағдылар қажет
Көптеген адамдар веб-пайдаланушы интерфейсінің дизайнері болғысы келеді, сондықтан олар игерілуі керек кейбір дағдыларды білгісі келеді, сондықтан келесіде мен сізге веб-пайдаланушы интерфейсін жобалау үшін қандай дағдылар қажет екенін таныстырамын, көрейік.
1. HTML/CSS коды
HTML/CSS веб-әзірлеудегі ең оңай тіл болып табылады және веб-дизайнерлердің оқуды, өңдеуді және мәселелерді шешуді түсінуі маңызды. Қалай болғанда да, стильдер мен түстер код арқылы қалай басқарылатынын және конфигурацияланатынын түсіну ұзақ мерзімді перспективада өте пайдалы болуы мүмкін.
2. Тақырыптарды жазу
Веб-беттерді жобалау кезінде негізгі бөлімдерді тақырып ретінде емес, толтырғыш ретінде пайдалануға болады. Концептуалды дизайнда көрнекі және мазмұндық ақпарат тақырып арасындағы байланыс болып табылады және сіз жай ғана бір сөйлемді пайдалана алмайсыз.
3. Әртүрлі жабдықтармен танысу
Веб-дизайнер ретінде сіз интернетті шолу үшін әртүрлі сандық құрылғыларды пайдалана білуіңіз керек. Әртүрлі жүйелер мен құрылғылардың көру тәсілдері әртүрлі, сондықтан веб-интерфейс дизайнерлері өздеріне ең таныс электрондық құрылғылардан бас тартуға және әртүрлі сандық құрылғылармен тәжірибе жасауға дайын болуы керек.
4. Трендтерді түсіну
Web UI дизайнері ретінде сізге барлық трендтерді білудің қажеті жоқ, бірақ танымалдардың кем дегенде үшеуі. Осы дизайн тенденцияларының көрнекі сипаттамаларын, оларды не үшін қолданасыз, қалай жұмыс істейтінін, неліктен сізге ұнайтынын немесе ұнатпайтынын және т.б. түсіндіре білу.
5. Жобалау теориясын түсіндіріңіз
Түс, ағын, баланс, пропорциялар, интервалдар Бұл жалпы дизайн тұжырымдамаларын веб UI дизайнерлері де түсінуі керек. Бұл ұғымдарды жобаны жасау кезінде түсіну және қолдану керек. Дизайн тек жақсы көріну емес, ондағы ұғымдар мен принциптер пайдаланушыларға не айта алатынын білдіреді. Оларды түсіну және түсіндіре білу теңгерімді сұлулықты тудырады.
Қарапайым және практикалық веб-дизайн бағдарламалары дегеніміз не?
Macromedia әрқашан веб-дизайндағы көшбасшы болды және оның «Үш веб мушкетері» веб-дизайнда алдыңғы қатарға ие. «Веб мушкетерлердің веб-беттері» веб-дизайн процесінде кеңінен қолданылатын үш бағдарламалық құрал, атап айтқанда Dreamweaver, Fireworks және Flash.
Dreamweaver веб-дизайн бағдарламасы
арманшыл ыңғайлы және практикалық WYSIWYG теру құралдары мен функциялары бар қуатты веб-дизайн құралы, интерфейс өте ыңғайлы және пайдалану оңай. Сіз HTML тілін меңгермей-ақ кәсіби веб-беттерді әзірлеу үшін оның қуатты мүмкіндіктерін пайдалана аласыз.
Dreamweaver сонымен қатар ыңғайлы бағдарламалау құралы болып табылады, ASP, PHP, JSP кодын оңай жаза алады, бағдарламалық құралды автоматты түрде аяқтау функциясы және кодты бояу функциясы пайдаланушыларға әртүрлі кодтарды жазуға және жөндеуге тиімді көмектеседі. Dreamweaver көмегімен әртүрлі динамикалық немесе статикалық веб-сайттарды жылдам және оңай жасауға болады.
Dreamweaver веб-сайтты оңай жасай алады және оның негізгі мүмкіндіктері келесідей:
- Dreamweaver сайтын жасауға болады – Dreamweaver сайты арқылы сайттың жұмыс ортасын көрсетуге, сайттағы файлдарды реттеуге, сайттағы әртүрлі ресурстарды ыңғайлы және жылдам басқаруға, әртүрлі ақпаратты жазуға болады.
Dreamweaver сайтын жасағаннан кейін ғана сайттағы файлдарды басқару үшін Dreamwaver бағдарламасының әртүрлі мүмкіндіктерін толық пайдалана аласыз. Мысалы, сілтемелерді автоматты түрде қадағалаңыз және жүргізіңіз, файлдарды басқарыңыз және файлдарды ортақ пайдаланыңыз. - Сіз веб-беттерді, веб-үлгілерді және CSS мәнерлерін жасай аласыз. Бұл жерде Dreamweaver бағдарламасымен жұмыстың көп бөлігі шоғырланған. Dreamweaver ұсынған құралдар веб-беттерді, веб-үлгілерді және CSS мәнерлерін жасауды жеңілдетеді.
- Веб-беттерді тексеруге болады. Dreamweaver веб-беттеріңіздегі ықтимал мәселелерді жылдам анықтауға көмектесетін ыңғайлы және сенімді веб-беттерді тексеру мүмкіндіктерін ұсынады.
- Веб-беттерді жариялауға болады. Қашықтағы торап сервері туралы ақпаратты орнатқаннан кейін сайтты жүктеу үшін Dreamweaver қолданбасын тікелей пайдалануға, сондай-ақ қашықтағы тораптағы мазмұнды тікелей өңдеуге болады.
Flash веб-дизайн бағдарламасы
Жарқыл Macromedia ұсынған және Adobe сатып алған интерактивті векторлық графика мен веб-анимация стандарты. Веб-дизайнерлер өлшемі өзгертілетін әдемі навигациялық интерфейстер мен басқа да сәнді әсерлерді жасау үшін Flash пайдаланады. Flash-тің предшесі болып табылады Future Splash of Future Wave Company, Flash құжаттарын жобалауға және өңдеуге арналған әлемдегі алғашқы коммерциялық 2D векторлық анимация бағдарламалық құралы.
Flash анимация дизайнының үш негізгі функциясы графикалық кескіндерді салу және өңдеу, tweening және масканы қоса алғанда, барлық Flash анимация дизайны білім базасы үшін маңызды және негізгі болып табылады. Бұл бір-бірімен тығыз байланысты үш логикалық функция және бұл үш функция Flash пайда болғаннан бері бар.
Бағдарлама мүмкіндіктері:
- Flash веб-беттердің векторлық анимациялық дизайнында кеңінен қолданылады. Векторлық амалдарды (VectorGraphics) пайдаланудың арқасында алынған фильм жадта аз орын алады.
- Flash көмегімен жасалған фильмдердің өздерінің арнайы файл пішімі (SWF) болады. Компания әлемдегі 97% веб-шолғыштарында кіріктірілген Flash ойнатқыштары (FlashPlayer) бар деп мәлімдейді.
- Flash – Macromedia ұсынған «Бай интернет қосымшасы» (RIA) тұжырымдамасын іске асыру платформаларының бірі.
Веб-интерфейс дизайнының кейбір мүмкіндіктері
1. Пайдаланушыға бағдарлану принципі
Веб-бетті жобалау кезінде біз алдымен веб-беттің пайдаланушыларын анықтауымыз керек және дизайнды пайдаланушы тәжірибесі тұрғысынан қарастырып, жобалауымыз керек. Бұл әрекетті орындау үшін пайдаланушылармен олардың қажеттіліктерін, мақсаттарын, күтулерін және қалауларын түсіну үшін байланысу керек. Веб-беттерді әзірлеушілер пайдаланушылардың әртүрлі және олардың мүмкіндіктері әртүрлі екенін білуі керек.
- Мысалы, кейбір пайдаланушылардың көру қабілеті нашар (мысалы, түс соқыр) және көптеген түстерді ажырата алмайды;
- Кейбір пайдаланушылардың естуінде ақаулар болуы мүмкін және веб-сайттың дауыстық сұрауларына баяу жауап беруі мүмкін;
- Компьютер пайдаланушыларының айтарлықтай саны үшін тәжірибе әлі де қарапайым және күрделі операциялар үшін өте көп уақытты қажет ететін болып көрінеді.
Сонымен қатар, пайдаланушылар пайдаланатын компьютер конфигурациясы айтарлықтай өзгереді, мысалы, графикалық карта, дыбыс картасы, жад, желі жылдамдығы, операциялық жүйе және браузер және т.б. әртүрлі болады. Дизайнер бұл айырмашылықтарды елемейтін болса, жобаланған веб-бет әртүрлі машиналарда көрсетілгенде шатастыруға әкеледі.
2. Жұмыстың қарапайымдылығы мен ыңғайлылығы принципі
Қарапайымдылық пен қолданудың қарапайымдылығы веб-дизайндың ең маңызды принциптері болып табылады. Веб-сайт негізінен жалпы веб-пайдаланушылардың ақпаратына қол жеткізуге арналған желілік қызмет болып табылады. Веб-бетте тым көп операцияларды орнатудың және көптеген күрделі және сәнді суреттерді жинаудың қажеті жоқ. Бұл принциптің талаптары келесідей:
- Веб-бетті жүктеу 6 секундтан аспауы керек (әдеттегі үйдегі кең жолақты 2M, ал жылдамдығы әдетте 220кбит/с);
- Веб-беттер мәтіндік сілтемелерді барынша пайдалануы, үлкен кескіндер мен анимацияларды пайдалануды азайтуы және веб-беттерді ашу уақытын жылдамдату керек;
- Жұмыс схемасы мүмкіндігінше қарапайым болуы керек және жұмыс туралы нақты кеңестер болуы керек;
- Веб-сайттың барлық мазмұны мен қызметтері пайдаланушыларға барынша көрнекті жерде түсіндірілуі керек.
3. Орналасуды басқару
Веб-беттің орналасуына келетін болсақ, көптеген веб-дизайнерлер оған жеткілікті назар аудармайды, веб-интерфейстің дизайны мен орналасуы тым қатал, тіпті басқалар көшіреді. Егер веб-беттің макеттері бейберекет болса, бетте көп ақпаратты жай ғана жинақтау оқырманның оқуын қиындатады. Жалпы алғанда, веб-интерфейс макетін құрастырған кезде ұстанатын принциптер келесідей: −
1. Миллер формуласы 7±2
Психолог Джордж А.Миллердің зерттеуі бойынша адамдардың бір уақытта алатын ақпарат көлемі шамамен 7 бит. Формуланы қорытындылайтын болсақ: адамның бір уақытта алатын ақпарат көлемі 7 ± 2 бит. Бұл принцип веб-сайттарды жасауда кеңінен қолданылады. Жалпы алғанда, веб-беттегі бағандардың ең жақсы таңдауы 5 пен 9 арасында. Көрерменге таңдау үшін веб-сайт ұсынатын мазмұн сілтемелері осы ауқымнан асып кетсе, адамдар психологиялық тұрғыдан тітіркенеді. Бұл адамдарға ақпараттың көрінбейтін тым тығыз және өте шаршағанын сездіреді.
Мысалы, Aol.com бағанының параметрлері: Main, MyAol, Mail, People, Search, Shop, Channels және Devices барлығы сегіз санатқа ие. Msn.com баған параметрлері: MSN Басты, Менің MSN, Hotmail, Іздеу, Шопинг, Ақша және Адамдар және Чат, барлығы жеті. Дегенмен, көптеген отандық веб-сайттарда осы ауқымнан тыс бағандар бар.
2. Пакеттік өңдеу
Жоғарыда айтылғандай, ақпараттың немесе бағандардың жіктелуі 9-дан аспауы керек. Бірақ сіздің мазмұныңыз тым көп болса, 9-дан көп болса, оны топтастыру керек. Егер сіздің веб-бетіңізде ондаған мақала сілтемелері болса, оларды топтау үшін әрбір 7 мақалаға бос жол немесе параллель жол қосу керек.
Егер веб-сайтыңыздың мазмұнында Tencent веб-сайты немесе бірнеше басқа белгілі порталдар сияқты 9-дан астам бағандар болса, онда көптеген бағандар және 9-дан көп. Миллер 7 ± 2 формуласын бұзбау үшін неғұрлым өкілдік санаттар жуан болады. дизайнда, содан кейін табиғаты бойынша топтастырылған және соңында 6 үлкен бағанға бөлінген.
4. Көру тепе-теңдігі
Веб-беттерді жобалау кезінде әртүрлі элементтерде (мысалы, графика, мәтін, бос кеңістік) визуалды теңгерім болуы керек. Көрнекі принцип бойынша графиканың көрнекі әсері мәтін бөлігіне қарағанда жоғары.
Сонымен, визуалды тепе-теңдікке қол жеткізу үшін веб-парақты жобалау кезінде көп мәтіні бар кескінді теңестіру керек. Мысалы, мәтініңіздің көпшілігі солға реттелген <туралау=солға>, веб-беттің оң жағына кейбір кескіндерді немесе ашық және көз тартарлық түстерді қосу керек.
Әдетте, әрбір веб-беттің үстіңгі және төменгі деректеме бөлігі болады. Тақырып бөлігінде әдетте жарнамалық баннерлер немесе шарлау жолақтары және Веб-сайт LOGO, ал төменгі деректеме бөлігінде әдетте байланыс ақпараты, авторлық құқық туралы ақпарат және т.б. бар, сайт мыналарға назар аудара отырып жасалуы керек. көру тепе-теңдігі.
Сондай-ақ, ақ кеңістіктің құндылығын елемеуге болмайды, веб-бетте көрсетілетін ақпарат өте тығыз, бұл оқырмандарға оқуға қолайсыз ғана емес, тіпті оқырмандарды жиіркенішті және веб-сайттың имиджін бұзады. Веб-дизайнда веб-бетіңіздің кескіні мен эстетикасын қысқаша етіп жақсарту және жақсарту үшін тиісті орындарға бос орын қосыңыз.
Пайдаланушы интерфейсінің дизайны мен веб-арттың айырмашылығы неде
Ең алдымен, пайдаланушы интерфейсінің дизайны мен веб-арттың сәйкес жауапкершілігін түсіндіру қажет:
- UI дизайны: пайдаланушы интерфейсі іс жүзінде пайдаланушы интерфейсінің аббревиатурасы болып табылады, ал пайдаланушы интерфейсі адам мен машина әрекеті процесіндегі интерфейсті білдіреді. Пайдаланушы интерфейсінің дизайны - адам мен компьютердің өзара әрекеттесу процесінде қажетті элементтер мен қадамдардың дизайны. Ұялы телефонды мысал ретінде алатын болсақ, ұялы телефон интерфейсі пайдаланушы интерфейсіне сілтеме жасайды. Пайдаланушы осы интерфейс арқылы ұялы телефонға нұсқауларды жібереді және ұялы телефон осы нұсқауларға сәйкес тиісті кері байланыс жасайды. Көрнекі интерфейс элементтерінің осы жинағын құрастыратын адам пайдаланушы интерфейсінің дизайнері деп аталады.
- Өнер: әдетте жалпақ өнер, веб-арт және үш өлшемді өнерге бөлінген тегістік, түс, реңк, шығармашылық және т.б. қосатын техникалық таланттарды білдіреді. Жалпы, Photoshop сияқты дизайн бағдарламалық жасақтамасын білу қажет. Көптеген өнер мамандықтары электронды коммерцияның өсуіне байланысты дамып келеді, олар негізінен компанияның кескіндерін орау, веб-сайтты оңтайландыру, өнімді жылжыту альбомдары және электрондық коммерция тақырыбының дизайнына жауап береді.
UI дизайны мен өнер арасындағы айырмашылық мынада:
1. Өнер, аты айтып тұрғандай, веб-сайттың сыртқы түрін безендіруі керек. Тереңірек деңгей - бұл веб-сайттың коннотациясына баса назар аудару. UI дизайнері болудың нақты мағынасы өнер туралы емес (және бұл жай ғана «безендіру» жұмысын орындау емес).
2. Дәлірек айтсақ, UI дизайнері өнімді зерттеу мен әзірлеуге маманданған UI дизайнеріне сілтеме жасайды. Мақсат - пайдаланушылардың санасында өнімді жақсарту үшін функцияларды қанағаттандыру алғышарттарына сәйкес, ақылға қонымды GUI дизайны арқылы пайдаланушыларға түсінуді және жұмыс істеуді жеңілдету.
3. Екі-үш жыл бұрын веб-бет интерфейстің сыртқы түріне көбірек көңіл бөлді, сондықтан статикалық интерфейсті жасаған адамдар суретшілер деп аталды. Негізінде бет құрылымын ескерудің қажеті жоқ, бәрі реттелді және тұтынушы оны стильді етіп жасағысы келді. Соңғы екі жылда веб-бет талаптарының интерактивті тиімділігі күшейіп, күшейіп, пайдаланушы тәжірибесіне де назар аударылды. Дизайнда дизайнерлер дизайнды пайдаланушының пайдалануы тұрғысынан ұйымдастыруы керек.
4. Пайдаланушы интерфейсі АТ бөлігі екені даусыз және ол АТ белгілі бір дәрежеде дамыған кезде ғана пайда болатын өнім.
- АТ-ның дамуы функцияларды жүзеге асырудан сұлулыққа және ізгілендіруге ұмтылуға дейін барды;
- Сонымен қатар, ол эстетикаға негізделген пайдаланушы әрекеттерін сәйкестендіру процесі болғандықтан өнер категориясының бөлігі болып табылады.
Сондықтан, тек функцияларды жүзеге асыра алатын АТ өнімдері енді пайдаланушылардың қажеттіліктерін қанағаттандыра алмайды және тек өнерді ескеру де пайдаланушы тәжірибесін елемеуге әкеледі.
5. Сондықтан, жалпы алғанда, UI мен графиканың айырмашылығы - UI негізінен пайдаланушы тәжірибесіне бағытталған, ал графикалық дизайн - бет туралы көбірек білімге бағытталған бет әсерлері.
Никола Топты оқығаныңыз үшін рахмет
