Нова простота в дизайні інтерфейсу
1 Нова простота в дизайні інтерфейсу. Скеуоморфізм проти плоского дизайну Ізабелла Дімпфл 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 Значки Типографіка Анімація Живі плитки Походження та вплив Швейцарський стиль Інформаційний дизайн Джон Маеда: Закони простоти ios Перепроектуйте скеуо-мінімалізм Проблеми плоского дизайну Визначення дизайну Скеуо-мінімалізм у 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 називає його сучасним інтерфейсом) не потребує жодних тіней, градієнтів або тривимірної графіки. Автентично цифровий - це нове гасло руху, яке є крайньою протилежністю скеуоморфізму. Між цими двома стилями лежить скеуомінімалізм, який широко використовується на телефонах Android і успадковує правила обох типів дизайну. У цій дипломній роботі буде розглянуто нову автентично цифрову політику дизайну мобільного інтерфейсу корпорації Майкрософт та порівняно із стандартними стандартами дизайну мобільних пристроїв 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] використовує переваги комп’ютера. як Люсіда Гранде, Вердана тощо, все ще виглядають найкраще. Ці шрифти мали досить дешевий вигляд при друці з високою роздільною здатністю. Дизайн нових дисплеїв вже дуже близький до дизайну друку. Тенденція від реалістичних або скеуоморфних спецефектів - це початок ери дизайну дисплеїв з надзвичайною високою роздільною здатністю. Інтерфейс більше не повинен адаптуватися до поганої роздільної здатності. Наріжні камені досі переважаючого дизайну користувальницького інтерфейсу: блискучі скляні кнопки, прозорі плівки, тіні предметів, скоси та ефекти тиснення, текстури вже давно не зустрічаються в хороших дизайнах друку, оскільки вони непотрібні через високу роздільну здатність для друку. Чим вища роздільна здатність виходу, тим громіздкіші ці ефекти. Вони працюють на субретинальних дисплеях, оскільки є людським оком
44 3. Плоский дизайн 37 (a) (b) Рисунок 3.10: Все меню браузера приховано в адресному рядку Windows Phone (a) [26]. Коли ви натискаєте на три білі крапки, вона відкривається (b) [26]. Рисунок 3.11: Елементи управління різних поколінь ipod зліва направо: ipod 1G, ipod 3G та ipod 4G [6]. індикатор виконання може зробити очікування більш стерпним для користувача. Він також впевнений, що щось станеться, поки він буде чекати. 4-й закон: вивчення знань робить усе простіше. Психологічні принципи дизайну засновані на здатності людського розуму робити правдоподібні висновки і, таким чином, інтуїтивно керувати інтерфейсом
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] та зменшення рівня деталізації для піктограми (b) у 16 пікселів [38]. (a) (b) Рисунок 4.5: Зменшення значків, синій штифт показує невеликий градієнт (a) [38]. Двовимірний вигляд надає перевагу Google (b) [38]. додаток. Типографіка також повинна бути ідеальною для пікселів; Google рекомендує для цього свій шрифт Open Sans.