http://gnome.org.ru/wacko/Разработка/СоветыПоДизайну Изменения страницы http://gnome.org.ru/wacko/Разработка/СоветыПоДизайну en-us http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu/show?time=2006-07-29+17%3A23%3A39 <div class="pageBefore"><img src="http://gnome.org.ru/wacko/images/z.gif" width="1" height="1" border="0" alt="" style="display:block" align="top" /></div><div class="page"> <b>Сравнение версий <a name=".razrabotka.sovetypodizajjnu" href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu" class="">/Разработка&nbsp;/&nbsp;Советы&nbsp;По&nbsp;Дизайну</a> за <a href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu?time=2006-07-29+17%3A23%3A39">2006-07-29 17:23:39</a> и <a href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu">2006-09-03 18:08:46</a></b><br /> <br /> <b>Добавлено:</b><br /> <div class="additions">Если вы&nbsp;сомневаетесь об&nbsp;удобстве использования какого-либо дизайна, <a href="http://mail.gnome.org/mailman/listinfo/usability" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />список рассылки</a> по&nbsp;эргономике GNOME всегда к&nbsp;вашим услугам. Есть еще&nbsp;канал IRC&nbsp;#usability на&nbsp;irc.gnome.org где&nbsp;можно задать вопрос, правда участники на&nbsp;нем не&nbsp;очень активны. Будет не&nbsp;лишним получить помощь от&nbsp;других людей и&nbsp;настоящих дизайнеров &ndash; это&nbsp;наверное <a href="http://developer.gnome.org/projects/gup/hig/2.0/checks-other-people.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />самая важная рекомендация</a> GNOME HIG.</div><br /> <b>Удалено:</b><br /> <div class="deletions">Если вы&nbsp;сомневаетесь об&nbsp;удобстве использования какого-либо дизайна, <a href="http://mail.gnome.org/mailman/listinfo/usability" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />список рассылки по&nbsp;эргономике GNOME всегда к&nbsp;вашим услугам. Есть еще&nbsp;канал IRC&nbsp;#usability на&nbsp;irc.gnome.org где&nbsp;можно задать вопрос, правда участники на&nbsp;нем не&nbsp;очень активны. Будет не&nbsp;лишним получить помощь от&nbsp;других людей и&nbsp;настоящих дизайнеров &ndash; это&nbsp;наверное http://developer.gnome.org/projects/gup/hig/2.0/checks-other-people.html самая важная рекомендация</a> GNOME HIG.</div></div> http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu/show?time=2006-07-29+16%3A12%3A34 <div class="pageBefore"><img src="http://gnome.org.ru/wacko/images/z.gif" width="1" height="1" border="0" alt="" style="display:block" align="top" /></div><div class="page"> <b>Сравнение версий <a href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu" class="">/Разработка&nbsp;/&nbsp;Советы&nbsp;По&nbsp;Дизайну</a> за <a href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu?time=2006-07-29+16%3A12%3A34">2006-07-29 16:12:34</a> и <a href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu?time=2006-07-29+17%3A23%3A39">2006-07-29 17:23:39</a></b><br /> <br /> <b>Добавлено:</b><br /> <div class="additions"><a name="h624-1"></a><h3>Приведите типы ваших окон в&nbsp;порядок</h3> ||**Тип окна** | **Надпись в&nbsp;заголовке** |**Текст** |**Отображение на&nbsp;панели** ||</div><br /> <b>Удалено:</b><br /> <div class="deletions"><a name="h624-1"></a><h3>Приведите типы ваших окон в&nbsp;порядок.</h3> || **Тип окна** | **Надпись в&nbsp;заголовке** | **Текст** | **Отображение на&nbsp;панели** ||</div></div> http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu/show?time=2006-07-29+15%3A21%3A27 <div class="pageBefore"><img src="http://gnome.org.ru/wacko/images/z.gif" width="1" height="1" border="0" alt="" style="display:block" align="top" /></div><div class="page"> <b>Сравнение версий <a href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu" class="">/Разработка&nbsp;/&nbsp;Советы&nbsp;По&nbsp;Дизайну</a> за <a href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu?time=2006-07-29+15%3A21%3A27">2006-07-29 15:21:27</a> и <a href="http://gnome.org.ru/wacko/Razrabotka/SovetyPoDizajjnu?time=2006-07-29+16%3A12%3A34">2006-07-29 16:12:34</a></b><br /> <br /> <b>Добавлено:</b><br /> <div class="additions">Исходная статья по&nbsp;адресу: <a href="http://gnomejournal.org/article/44/three-simple-tips-for-interface-design-you-should-know" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />http://gnomejournal.org/article/44/three-simple-tips-for-interface-design-you-should-know</a><br /> 21 апреля 2006, Клаус Шварм (Claus Schwarm)<br /> Руководство по&nbsp;созданию интерфейса пользователя GNOME (HIG &ndash; Human Interface Guidelines) всегда вызывало споры среди поклонников GNOME и&nbsp;сторонних разработчиков. В&nbsp;своей статье Клаус Шварм (Claus Schwarm) рассказывает, почему HIG&nbsp;важен, а&nbsp;так же&nbsp;раскрывает несколько простых способов использования советов HIG.<br /> Когда участники проекта GNOME начали работать над&nbsp;второй версией рабочего окружения GNOME ни&nbsp;какие изменения в&nbsp;проекте не&nbsp;вызвали столько непонимания, недовольства и&nbsp;раздражения сколько вызвало <a href="http://developer.gnome.org/projects/gup/hig/2.0/index.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />«Руководство по&nbsp;созданию интерфейса»</a> (HIG). До&nbsp;сих пор&nbsp;находятся люди, которые не&nbsp;согласны с&nbsp;существующими направлениями развития GNOME.<a name="h624-1"></a><h3>Приведите типы ваших окон в&nbsp;порядок.</h3> <ul><li> <a href="http://developer.gnome.org/projects/gup/hig/2.0/windows-utility.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />Служебные окна</a> (Utility Windows) </li><li> <a href="http://developer.gnome.org/projects/gup/hig/2.0/windows-dialog.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />Диалоги</a> (Dialogs) </li><li> <a href="http://developer.gnome.org/projects/gup/hig/2.0/windows-alert.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />Предупреждения</a> (Alerts) </li><li> <a href="http://developer.gnome.org/projects/gup/hig/2.0/windows-progress.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />Окна прогресса</a> (Progress Windows) </li><li> <a href="http://developer.gnome.org/projects/gup/hig/2.0/windows-assistant.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />Помощники</a> (Assistants) </li></ul> || **Тип окна** | **Надпись в&nbsp;заголовке** | **Текст** | **Отображение на&nbsp;панели** ||<br /> Более «тяжелый» случай получается при&nbsp;смешивании служебного окна и&nbsp;окна прогресса, при&nbsp;этом возникает достаточно необычная комбинация кнопок, которая может запутать пользователя. Яркий пример такого смешивания показан ниже. В&nbsp;изображенный диалог поиска, необходимо ввести информацию до&nbsp;начала, а&nbsp;сам поиск может занять некоторое время.<a name="h624-2"></a><h3>Размещайте кнопки и&nbsp;надписи понятным образом</h3> За&nbsp;исключением панелей инструментов, все&nbsp;вторичные окна должны иметь хотя бы&nbsp;одну кнопку. Все&nbsp;надписи на&nbsp;кнопках должны быть в&nbsp;<a href="http://developer.gnome.org/projects/gup/hig/2.0/controls-buttons.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />повелительном наклонении</a>, и&nbsp;кратко описывать то, что&nbsp;произойдет после их&nbsp;нажатия. Кнопка с&nbsp;основным предлагаемым действиям должна находиться в&nbsp;нижнем правом углу окна. <a name="h624-3"></a><h3>Размещайте элементы интерфейса выдерживая интервалы и&nbsp;равнение</h3> Это&nbsp;пример несложного размещения. Разделитель, который обычно используют между нижними кнопками и&nbsp;содержимым, как&nbsp;рекомендовано GNOME HIG, отсутствует. Одна вещь сразу становиться понятной: дизайн пока не&nbsp;превосходен. Однако он&nbsp;демонстрирует некоторые <a href="http://developer.gnome.org/projects/gup/hig/2.0/design-window.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />принципы размещения элементов в&nbsp;служебных окнах и&nbsp;диалогах</a>. <br /> Для&nbsp;размещения содержимого использован элемент vertical box&nbsp;с&nbsp;3 строками. Свойство spacing (промежуток) установлено в&nbsp;12 пикселей, так&nbsp;что каждая часть визуально отделена. Элемент <a href="http://gtk.org/tutorial/x1312.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />frame</a> используется в&nbsp;каждой строке, причем вид&nbsp;границы (свойство Shadow) установлено в&nbsp;«none», а&nbsp;название выделено жирным. Кроме того, вокруг кнопок тоже есть граница.<br /> Внутри каждого фрейма, элемент <a href="http://gtk.org/tutorial/x1264.html" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />alignment</a> помогает расположить внутреннее содержимое. Свойство left padding (отступ слева) установлено в&nbsp;12 пикселей, свойство top&nbsp;padding (верхний отступ) в&nbsp;6 пикселей. По&nbsp;возможности содержимое выравнивается по&nbsp;левому и&nbsp;правому краям. Например, это&nbsp;может быть сделано по&nbsp;отношению к&nbsp;элементу combo box, который используется для&nbsp;выбора единиц измерения.<br /> Получившийся, дизайн выглядит приемлимо. При&nbsp;этом, вам&nbsp;наверное будет интересно узнать, что&nbsp;этот диалог копирует диалог «Export to&nbsp;bitmap», используемый в&nbsp;<a href="http://www.inkscape.org/" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />Inkscape 0.42</a>. Вот&nbsp;как он&nbsp;выглядел до&nbsp;редизайна:<a name="h624-4"></a><h3>Заключение</h3> Руководство этими тремя простыми рекомендациями не&nbsp;сделает мгновенно все&nbsp;ваши приложения легкими в&nbsp;использовании. Но&nbsp;они помогут вам&nbsp;начать думать, о&nbsp;том как&nbsp;сделать ваши приложения более простыми в&nbsp;использовании. Тем&nbsp;не&nbsp;менее, абсолютно точно, что&nbsp;вреда от&nbsp;них не&nbsp;будет, по&nbsp;крайней мере если вы&nbsp;не создаете приложение для&nbsp;Microsoft Windows в&nbsp;его стиле.<br /> Если вы&nbsp;сомневаетесь об&nbsp;удобстве использования какого-либо дизайна, <a href="http://mail.gnome.org/mailman/listinfo/usability" target="_blank" title="Внешняя ссылка (откроется в новом окне)" class="outerlink"><img src="http://gnome.org.ru/wacko/themes/gnome/icons/web.gif" alt="" border="0" />список рассылки по&nbsp;эргономике GNOME всегда к&nbsp;вашим услугам. Есть еще&nbsp;канал IRC&nbsp;#usability на&nbsp;irc.gnome.org где&nbsp;можно задать вопрос, правда участники на&nbsp;нем не&nbsp;очень активны. Будет не&nbsp;лишним получить помощь от&nbsp;других людей и&nbsp;настоящих дизайнеров &ndash; это&nbsp;наверное http://developer.gnome.org/projects/gup/hig/2.0/checks-other-people.html самая важная рекомендация</a> GNOME HIG.</div><br /> <b>Удалено:</b><br /> <div class="deletions">Руководство по&nbsp;созданию интерфейса пользователя GNOME (HIG &ndash; Human Interface Guidelines) всегда вызывало споры среди поклонников GNOME и&nbsp;сторонних разработчиков. В&nbsp;своей статье Клаус Шварм (Claus Schwarm) рассказывает, почему HIG&nbsp;важен, а&nbsp;так же&nbsp;раскрывает несколько простых способов использования правил HIG.<br /> Когда участники проекта GNOME начали работать над&nbsp;второй версией рабочего окружения GNOME ни&nbsp;какие изменения в&nbsp;проекте не&nbsp;вызвали столько антипатии, недовольства и&nbsp;раздражения сколько вызвало «Руководство по&nbsp;созданию интерфейса» (HIG). До&nbsp;сих пор&nbsp;находятся люди, которые не&nbsp;согласны с&nbsp;существующими направлениями развития GNOME.<a name="h624-1"></a><h1>Приведите типы ваших окон в&nbsp;порядок.</h1> <ul><li> Служебные окна (Utility Windows) </li><li> Диалоги (Dialogs) </li><li> Предупреждения (Alerts) </li><li> Окна прогресса (Progress Windows) </li><li> Помощники (Assistants) </li></ul> || Тип&nbsp;окна | Надпись в&nbsp;заголовке | Текст | Отображение на&nbsp;панели ||<br /> Более тяжелый случай возникает при&nbsp;смешивании служебного окна и&nbsp;окна прогресса, при&nbsp;этом возникает достаточно необычная комбинация кнопок, которая может запутать пользователя. Яркий пример такого смешивания показан ниже. В&nbsp;изображенный диалог поиска, необходимо ввести информацию до&nbsp;начала, а&nbsp;сам поиск может занять некоторое время.<a name="h624-2"></a><h1>Размещайте кнопки и&nbsp;надписи понятным образом</h1> За&nbsp;исключением панелей инструментов, все&nbsp;вторичные окна должны иметь хотя бы&nbsp;одну кнопку. Все&nbsp;надписи на&nbsp;кнопках должны быть в&nbsp;повелительном наклонении, и&nbsp;кратко описывать то, что&nbsp;произойдет после их&nbsp;нажатия. Кнопка с&nbsp;основным предлагаемым действиям должна находиться в&nbsp;нижнем правом углу окна. <a name="h624-3"></a><h1>Размещайте элементы интерфейса выдерживая интервалы и&nbsp;равнение</h1> Это&nbsp;пример несложного размещения. Разделитель, который обычно используют между нижними кнопками и&nbsp;содержимым, как&nbsp;рекомендовано GNOME HIG, отсутствует. Одна вещь сразу становиться понятной: дизайн пока не&nbsp;превосходен. Однако он&nbsp;демонстрирует некоторые принципы размещения элементов в&nbsp;служебных окнах и&nbsp;диалогах. <br /> Для&nbsp;размещения содержимого использован элемент vertical box&nbsp;с&nbsp;3 строками. Свойство spacing (промежуток) установлено в&nbsp;12 пикселей, так&nbsp;что каждая часть визуально отделена. Элемент frame используется в&nbsp;каждой строке, причем вид&nbsp;границы (свойство Shadow) установлено в&nbsp;«none», а&nbsp;название выделено жирным. Кроме того, вокруг кнопок тоже есть граница.<br /> Внутри каждого фрейма, элемент alignment помогает расположить внутреннее содержимое. Свойство left padding (отступ слева) установлено в&nbsp;12 пикселей, свойство top&nbsp;padding (верхний отступ) в&nbsp;6 пикселей. По&nbsp;возможности содержимое выравнивается по&nbsp;левому и&nbsp;правому краям. Например, это&nbsp;может быть сделано по&nbsp;отношению к&nbsp;элементу combo box, который используется для&nbsp;выбора единиц измерения.<br /> Получившийся, дизайн выглядит приемлимо. При&nbsp;этом, вам&nbsp;наверное будет интересно узнать, что&nbsp;этот диалог копирует диалог «Export to&nbsp;bitmap», используемый в&nbsp;Inkscape 0.42. Вот&nbsp;как он&nbsp;выглядел до&nbsp;редизайна:<a name="h624-4"></a><h1>Заключение</h1> Руководство этими тремя простыми рекомендациями не&nbsp;сделает мгновенно все&nbsp;ваши приложения легкими в&nbsp;использовании. Но&nbsp;они помогут вам&nbsp;начать думать, о&nbsp;том как&nbsp;сделать ваши приложения более простыми в&nbsp;использовании. Тем&nbsp;не&nbsp;менее, абсолютно точно, что&nbsp;вреда от&nbsp;них не&nbsp;будет, по&nbsp;крайней мере если вы&nbsp;не создаете приложение для&nbsp;Microsoft Windows в&nbsp;его стиле. <br /> Если вы&nbsp;сомневаетесь об&nbsp;удобстве использования какого-либо дизайна, GNOME usability mailing list всегда к&nbsp;вашим услугам. Есть еще&nbsp;канал IRC&nbsp;#usability на&nbsp;irc.gnome.org где&nbsp;можно задать вопрос, правда участники на&nbsp;нем не&nbsp;очень активны. Будет не&nbsp;лишним получить помощь от&nbsp;других людей и&nbsp;настоящих дизайнеров &ndash; это&nbsp;наверное самая важная рекомендация GNOME HIG.</div></div>