Новата простота в дизайна на интерфейса
1 Новата простота в дизайна на интерфейса. Skeuomorphism versus Flat Design Isabella Dimpfl M A S T E R A R B E I T подадена в магистърска степен по цифрови изкуства в Университета за приложни науки в Хагенберг през септември 2013
3 Декларация Декларирам вместо клетва, че съм написал настоящото произведение независимо и без външна помощ, че не съм използвал други източници освен тези, които съм дал и че съм отбелязал пасажите, взети от източниците, като такива. Дипломната работа не е изпратена на друг проверяващ орган в същата или подобна форма. Хагенберг, на 30 септември 2013 г. Изабела Димпфл iii
4 Съдържание Обяснение Резюме Резюме iii vi vii 1 Въведение Интерфейсът Простота Скеуоморфизъм Определение Скеуоморфизъм или реализъм? Реализъм в потребителските интерфейси Предимствата на реализма в дизайна на потребителския интерфейс Метафори Емоции Технология Хардуер Проблемите на реализма в потребителските интерфейси Странната долина на дизайна на интерфейса Ограниченията на скеуоморфните дизайни Ретина показва реалистични икони Плосък дизайн Съвременните принципи на дизайна на потребителския интерфейс Принцип 1: Горд от добра работа Принцип 2: По-малкото често е по-голямо Принцип 3: Бърз и динамичен Принцип 4: Автентично цифров Принцип 5: Спечелете заедно Модерният дизайн на потребителския интерфейс Навигация iv
5 Съдържание v Икони Типография Анимация Живи плочки Произход и влияния Швейцарски стил Информационен дизайн Джон Маеда: Закони на простотата The ios Re-Design Skeuo-minimalism Проблеми на плоския дизайн Определение Дизайн Skeuo-Minimalism в Google Заключение: 2D работи по-добре на сензорни екрани 53 A Съдържание на CD-ROM/DVD 55 A.1 Основен документ A.2 Фигури A.3 PDF файлове A.4 Онлайн източници Списък на източници 56 Литература Филми и аудиовизуални медии Онлайн източници
7 Резюме С дизайнерите на iphone откриха нови позиции в областта на дизайна на мобилен интерфейс. Създавайки метафори (или т.нар. Скеуоморфизми, тип дизайн, при който се имитират материали и неща от реалния свят), дизайнерите се опитаха да направят първите стъпки в новия медиен смартфон по-лесни за потребителите. Идеята беше потребителите да могат да се справят интуитивно с новото устройство. В резултат на това много дизайнери използваха тези ефекти като бонбони за очите за своите приложения. За съжаление използваемостта често изчезваше на заден план. Изглежда, че простотата на ранната дигитална епоха се е върнала към дизайна на интерфейса. Microsoft избухна в тази радикално нова посока с дизайна на своя интерфейс Windows Phone 7. Плоският дизайн (Microsoft го нарича Modern UI) не се нуждае от сенки, градиенти или 3D графика. Автентично дигитален е новият лозунг на движението, който е крайната противоположност на скеуоморфизма. Между тези два стила се крие скеуоминимализмът, който се използва на видно място при телефони с Android и наследява правилата от двата типа дизайн. В тази дипломна работа ще бъде разгледана новата автентично цифрова политика на дизайна на мобилния интерфейс на Microsoft и сравнена с все още преобладаващия стандартен дизайн на мобилните устройства на Apple. vii
13 2. Скеоморфизъм 6 (а) (б) Фигура 2.1: И двата компютъра копират оформлението на нещата от реалния свят, така че и двамата са скеуоморфни. Калкулаторът (а) също имитира бутоните и текстурата на истински джобен калкулатор [13] посредством градиенти; той е скеуоморфен и реалистичен. Джобният калкулатор (b) е създаден в така наречения стил на плосък дизайн [14], но структурата му все още е скеуоморфна. скеуоморфизмът е начинът, по който се държат нещата. Когато обърнете нещо на екрана, плъзга ли се с инерция или забавя, или се държи по много компютърен, неестествен начин? С начина, по който нещата се държат, мисля, че скеуоморфизмът е неудържима тенденция, която изглежда работи наистина добре за всичко. Но що се отнася до начина, по който изглеждат нещата, мисля, че това е по-скоро стилистичен избор, който наистина зависи от софтуера, който създавате. 2.3 Реализъм в потребителските интерфейси По времето преди iphone реализмът в потребителските интерфейси се използваше почти изключително в компютърни игри, вероятно за насърчаване на потапянето (интелектуалното потапяне в цифровия свят) на играчите. Например интерфейсът на компютърната игра Diablo, представен от Blizzard Entertainment в САЩ през 1996 г., показва две каменни фигури между
25 2. Скеоморфизъм 18 Фигура 2.8: Приложението Apple Mac Soulver [24] използва предимствата на компютъра. като Lucida Grande, Verdana и т.н. все още изглеждат най-добре. Тези шрифтове имаха доста евтин вид, когато се отпечатваха с висока разделителна способност. Дизайнът на новите дисплеи вече е много близък до дизайна на печат. Тенденцията към реалистични или скеуоморфни специални ефекти е началото на ерата на дизайна за дисплеи с изключително висока разделителна способност. Интерфейсът вече не трябва да се адаптира към лошата резолюция. Крайъгълните камъни на преобладаващия досега дизайн на потребителския интерфейс: лъскави, стъклени бутони, прозрачно фолио, сенки на обекти, скосявания и релефни ефекти, текстурите отдавна вече не се виждат в добрите дизайни за печат, защото са ненужни поради високата разделителна способност за печат. Колкото по-висока е разделителната способност на изхода, толкова по-грозно се появяват тези ефекти. Те работят върху субретинални дисплеи, тъй като са човешкото око
44 3. Плосък дизайн 37 (a) (b) Фигура 3.10: Цялото меню на браузъра на Windows Phone е скрито в адресната лента (a) [26]. Когато докоснете трите бели точки, тя се отваря (b) [26]. Фигура 3.11: Работните елементи на различните поколения ipod отляво надясно: ipod 1G, ipod 3G и ipod 4G [6]. лентата на напредъка може да направи чакането по-поносимо за потребителя. Той също така е сигурен, че нещо ще се случи, докато чака. Четвърти закон: Ученето на знания прави всичко по-лесно. Психологическите принципи на дизайна на дизайна се основават на способността на човешкия ум да прави правдоподобни заключения и по този начин да управлява интерфейса интуитивно
46 3. Плосък дизайн 39 (a) (b) Фигура 3.12: Заключващият екран на WP има много празно пространство (a) [26], така че вниманието е насочено към информацията. От Windows Phone 8 дисплеят може да бъде персонализиран (b) [26]. обаче не е абсолютно необходимо потребителят да знае много за системата. Той трябва да се довери на устройството и отчасти да се откаже от личния си живот, за да постигне комфорт. Закон 9: Провали Има някои неща, които не могат да бъдат опростени. 10. Закон: Единственият закон за простотата означава премахване на очевидното и добавяне на смисленото. 3.4 Редизайнът на ios Microsoft стана 100% цифров с мобилната операционна система Windows Phone. И в момента изглежда, че Apple върви в същата посока. На 29 октомври 2012 г. Apple обяви, че Industrial
51 3. Плосък дизайн (a) 44 (b) (c) Фигура 3.16: Приложението ios 6 iphone Calculator (a) [53], до него новото приложение в ios 7 (b) [53]. За сравнение, приложението калкулатор на Windows Phone (c) [26] със същото разположение на бутоните за аритметична операция. (a) (b) (c) Фигура 3.17: Интернет браузърът Safari на iphone под ios 6 (a) [53], до него новото приложение в ios 7 (b) [53]. За сравнение на браузъра Internet Explorer на Windows Phone (c) [26].
53 3. Плосък дизайн 46 (a) (b) (c) Фигура 3.19: Началният екран на ios 6 със стандартните приложения (a) [53], до него версия ios 7 (b) [53]. Бутонът на затвора на приложението на камерата на ios 7 не се нуждае от икона на камера (c) [53].
59 4. Скеуоминимализъм 52 (a) (b) Фигура 4.4: Перфектната адаптация на пикселите към мрежата в Google (a) [38] и намаляването на нивото на детайлност за изгледа с 16 px на иконата (b) [38]. (а) (б) Фигура 4.5: Намаляването на иконите, синият щифт показва лек градиент (а) [38]. Двуизмерен изглед се предпочита от Google (b) [38]. приложението. Типографията също трябва да бъде перфектна за пиксели; Google препоръчва своя шрифт Open Sans за това.