Новата едноставност во дизајнот на интерфејсот
1 Новата едноставност во дизајнот на интерфејсот. Скеуоморфизам наспроти рамен дизајн Изабела Димпфл М А С Т Е Р А Р Б Е И Т доставен до Универзитетот за применети науки магистер по дигитални уметности во Хагенберг во септември 2013 година
3 Декларација На заклетва изјавувам дека го напишав сегашното дело самостојно и без надворешна помош, дека не сум користел други извори освен дадените и дека ги обележав пасусите земени од изворите како такви. Тезата не е доставена до кој било друг орган за испитување во иста или слична форма. Хагенберг, на 30 септември 2013 година Изабела Димффл iii
4 Содржина Објаснување Извршно резиме Апстракт iii vi vii 1 Вовед Интерфејсот Едноставност Скеуоморфизам Дефиниција Скеоморфизам или реализам? Реализам во корисничките интерфејси Предностите на реализмот во метафорите за дизајн на кориснички интерфејс Емоции Технолошки хардвер Проблемите на реализмот кај корисничките мрежи Непријатната долина на дизајнот на интерфејсот Ограничувања на скеоморфни дизајни Ретина прикажува реални икони Рамен дизајн на модерни принципи за дизајн на интерфејс Принцип 1: горд начело за добра работа 2: Помалку често е повеќе Принцип 3: Брз и динамичен принцип 4: Автентично дигитален принцип 5: Освојте заедно Модерна навигација за дизајн на интерфејс iv
5 Содржина v икони Типографија Анимација Во живо плочки Потекло и влијанија Дизајн на информации во швајцарски стил Maон Маеда: Закони за едноставност Скеу-минимализам за ре-дизајн на ios Проблеми на дизајн со дефиниција на рамен дизајн Скеу-минимализам на Google Заклучок: 2D работи подобро на екраните на допир 53 A Содржина на CD-ROM/ДВД 55 А.1 Главен документ А.2 Бројки А.3 ПДФ датотеки А.4 Извори на Интернет Список на извори 56 Литература Филмови и аудиовизуелни медиуми Извори на Интернет
7 Апстракт Со дизајнерите на iphone се појавија нови територии во областа на дизајнот на мобилен интерфејс. Со создавање метафори (или таканаречени скеоморфизми, тип на дизајн каде што се имитираат материјали и работи од реалниот свет), дизајнерите се обидоа да ги направат полесните за корисниците првите чекори во новиот медиумски смартфон. Идејата беше дека корисниците треба да можат интуитивно да ракуваат со новиот уред. Како последица на тоа, многу дизајнери ги користеа овие ефекти како бонбони за очи за нивните апликации. За жал, употребливоста честопати исчезна во позадина. Се чини дека едноставноста на раната дигитална ера се врати во дизајнот на интерфејсот. Мајкрософт избувна во оваа радикална нова насока со дизајнот на својот интерфејс Windows Phone 7. Рамниот дизајн (Мајкрософт го нарекува модерен кориснички интерфејс) не треба никакви сенки, градиенти или 3Д-графика. Автентично дигиталниот е новиот слоган на движењето, кој е крајна спротивност на скеоморфизмот. Помеѓу овие два стила лежи скеоонимализам, кој е видливо користен на телефоните со Android и наследува правила од двата типа на дизајн. Во оваа теза, ќе се испита новата автентично дигитална политика за дизајн на мобилен интерфејс на „Мајкрософт“ и ќе се спореди со сè уште распространетиот стандард за дизајн на мобилните уреди на „Епл“. vii
13 2. Скеооморфизам 6 (а) (б) Слика 2.1: Двата компјутери го копираат распоредот на нештата од реалниот свет, така што и двајцата се скеооморфни. Калкулаторот (а) исто така ги имитира копчињата и текстурата на вистински џебен калкулатор [13] преку градиенти, тој е скеооморфен и реален. Pебниот калкулатор (б) е создаден оптички во таканаречениот стил на рамен дизајн [14], но неговата структура е сè уште скеооморфна. скеоморфизам е начинот на кој се однесуваат работите. Кога превртувате нешто на екранот, дали тоа се лизга со интензитет или забавува, или се однесува на многу компјутерски, неприроден начин? Со начинот на кој се однесуваат работите, мислам дека скеооморфизмот е незапирлив тренд кој изгледа навистина убаво работи на сè. Но, кога станува збор за начинот на кој изгледаат работите, мислам дека тоа е повеќе стилски избор кој навистина зависи од софтверот што го создавате. 2.3 Реализам во корисничките интерфејси Во времето пред iphone, реализмот во корисничките интерфејси се користеше скоро исклучиво во компјутерски игри, веројатно за да се промовира потопување (интелектуалното потопување во дигиталниот свет) на плеерот. На пример, интерфејсот на компјутерската игра Diablo, воведен од Blizzard Entertainment во САД во 1996 година, покажа две камени фигури помеѓу
25 2. Скеуоморфизам 18 Слика 2.8: Апликацијата Apple Soulver [24] ги користи предностите на компјутерот. како Луцида Гранде, Вердана итн. сепак изгледаат најдобро. Овие фонтови имаа прилично ефтин изглед кога се отпечатени со висока резолуција. Дизајнот за новите дисплеи е веќе многу близу до дизајнот на печатење. Трендот далеку од реални или скеоморфни специјални ефекти е почеток на ерата на дизајнот за екрани со исклучително висока резолуција. Интерфејсот повеќе не мора да се прилагодува на лошата резолуција. Камен-темелниците на преовладувачкиот дизајн на кориснички интерфејс до сега: сјајни, стаклени копчиња, проarenири, сенки на предмети, коси и ефекти на релјеф, текстурите одамна престанаа да се гледаат во добри дизајни за печатење, бидејќи тие се непотребни поради високата резолуција за печатење. Колку е поголема резолуцијата на излезот, толку несмасни изгледаат овие ефекти. Тие работат на дисплеи под-ретината, бидејќи тие се човечко око
44 3. Рамен дизајн 37 (а) (б) Слика 3.10: Целото мени на прелистувачот на Windows Phone е скриено во лентата за адреси (а) [26]. Кога ќе допрете на трите бели точки, се отвора (б) [26]. Слика 3.11: Работните елементи на различните генерации на ipod од лево надесно: ipod 1G, ipod 3G и ipod 4G [6]. лентата за напредок може да го направи чекањето поподносливо за корисникот. Тој исто така има сигурност дека нешто ќе се случи додека чека. 4-ти закон: учењето знаење прави сè полесно. Дизајнерските психолошки принципи на дизајнот се засноваат на способноста на човечкиот ум да прави веродостојни заклучоци и на тој начин да работи со интерфејсот интуитивно
46 3. Рамен дизајн 39 (а) (б) Слика 3.12: Локалниот екран на WP има многу бел простор (а) [26] така што вниманието е насочено кон информациите. Од Windows Phone 8, екранот може да се прилагоди (b) [26]. сепак, не е апсолутно неопходно корисникот да знае многу за системот. Тој мора да верува во уредот и делумно да се откаже од приватноста за да постигне удобност. Закон 9: Неуспеси Постојат некои работи што не можат да се поедностават. 10. Закон: Единствениот закон за едноставност значи отстранување на очигледното и додавање на значајното. 3.4 Редизајн на ios Microsoft стана 100% дигитален со мобилниот оперативен систем Windows Phone. И во моментов изгледа како „Епл“ да оди во иста насока. На 29 октомври 2012 година, Apple објави дека Индустриски
51 3. Рамен дизајн (а) 44 (б) (в) Слика 3.16: Апликацијата ios 6 iphone Calculator (a) [53], веднаш до неа новата апликација во ios 7 (b) [53]. За споредба, апликацијата за калкулатор на Windows Phone (c) [26] со ист аранжман на копчињата за аритметичко работење. (а) (б) (в) Слика 3.17: Интернет прелистувачот Сафари на iphone под ios 6 (a) [53], покрај него новата апликација во ios 7 (b) [53]. Да се спореди прелистувачот Internet Explorer на Windows Phone (c) [26].
53 3. Рамен дизајн 46 (а) (б) (в) Слика 3.19: Почетен екран на ios 6 со стандардни апликации (a) [53], покрај него верзија на ios 7 (b) [53]. На копчето за затворање на апликацијата за камера на ios 7 не е потребна икона за фотоапарат (в) [53].
59 4. Скеоонимализам 52 (а) (б) Слика 4.4: Прецизна адаптација на пикселите на мрежата на Гугл (а) [38] и намалување на нивото на детали за прегледот на иконата од 16 px (б) [38]. (а) (б) Слика 4.5: Намалување на иконите, синиот игла покажува мала прогресија (а) [38]. Гугл претпочита дводимензионален преглед (б) [38]. апликацијата. Типографијата, исто така, треба да биде совршена за пиксели; Google го препорачува својот фонт Отвори санс за ова.