اصول گشتالت برای طراحان

هر رابطی که به آن اعتماد دارید بر پایه‌ی گشتالت کار می‌کند. Linear، Stripe، Vercel، Figma، Notion، Apple. هیچ‌کدام قانون ادراکی تازه‌ای اختراع نکرده‌اند. آن‌ها از قوانینی پیروی کرده‌اند که سیستم بینایی انسان از پیش از وجود صفحه‌نمایش اجرا می‌کرده است. همین پیروی است که فرق می‌گذارد میان صفحه‌ای که خودش را می‌خواند و صفحه‌ای که کاربر باید رمزگشایی‌اش کند.

اصول گشتالت همان چیزی است که مغز با آن پیکسل‌های خام را پیش از آن‌که ذهن آگاه سروکله‌اش پیدا شود به معنا تبدیل می‌کند. طراحانی که این اصول را می‌شناسند رابط‌هایی می‌سازند که آرام به نظر می‌رسند. طراحانی که نمی‌شناسند رابط‌هایی تحویل می‌دهند که شلوغ به نظر می‌رسند، حتی وقتی تراکم بصری دقیقاً یکی است. پیکسل‌ها همان‌اند. چیزی که تغییر می‌کند گروه‌بندی است.

این نوشته همان کانن است. هشت اصل، هر کدام با یک قانون، مثال‌های واقعی محصولی برای هر کدام، و یک ممیزی که پیش از انتشار روی هر صفحه‌ای می‌توانید اجرا کنید. بوکمارکش کنید.

هشت اصل، هر کدام یک قانون

گشتالت خلاصه‌ی این جمله است: «کل بزرگ‌تر از مجموع اجزای آن است.» تلی از نقطه‌ها تبدیل به یک چهره می‌شود. ردیفی از کارت‌ها تبدیل به یک فهرست می‌شود. مغز پیش از محتوا گروه‌بندی می‌کند. اگر طراحی شما این را نادیده بگیرد، کاربر باید کار مغز را دستی انجام دهد، و این کار را نمی‌کند.

هشت اصلی که هر طراح حرفه‌ای به آن‌ها نیاز دارد. قانون را حفظ کنید، بقیه‌اش کاربرد است.

1. مجاورت (Proximity). چیزهایی که نزدیک هم‌اند، یک گروه خوانده می‌شوند.

2. شباهت (Similarity). چیزهایی که شبیه هم‌اند، یک گروه خوانده می‌شوند.

3. پیوستگی (Continuity). چشم هموارترین مسیر را در چیدمان دنبال می‌کند.

4. بستار (Closure). مغز شکل‌های ناقص را به شکل‌های کامل تبدیل می‌کند.

5. شکل و زمینه (Figure and ground). چشم چیدمان را به پیش‌زمینه و پس‌زمینه تفکیک می‌کند.

6. سرنوشت مشترک (Common fate). چیزهایی که با هم حرکت می‌کنند، یک گروه خوانده می‌شوند.

7. تقارن و نظم (Symmetry and order). چیدمان‌های متقارن و منظم پیش از رسیدن محتوا قطعی و حل‌شده به نظر می‌رسند.

8. نقطه‌ی کانونی (Focal point). یک شکست واحد در الگو، توجه کل صفحه را به دست می‌آورد.

هر صفحه در هر محصولی که به آن احترام می‌گذارید چند تا از این‌ها را هم‌زمان به کار می‌برد. بیشترشان هر هشت تا را. این اصول با هم ترکیب می‌شوند، با هم رقابت نمی‌کنند.

مجاورت: فاصله همان گروه‌بندی است

فاصله از کادر، خط جداکننده یا برچسب معنای بیشتری حمل می‌کند. اگر دو آیتم نزدیک هم باشند، چشم آن‌ها را مرتبط می‌خواند. اگر آیتم سوم دو برابر دورتر باشد، چشم یک گسست می‌خواند. برچسبی لازم نیست. فضای خالی کار را انجام داد.

سایدبار Linear تمیزترین نمونه‌ی مجاورت است که تاکنون منتشر شده. Inbox، My Issues و Active در یک گروه فشرده‌اند. Projects، Views و Teams در گروهی دیگر. Settings تنها در پایین نشسته است. بین گروه‌ها هیچ خط جداکننده‌ای نیست، فقط فاصله، و دسته‌ها فوری خوانده می‌شوند.

داشبورد Stripe همین کار را با ردیف متریک‌ها می‌کند. درآمد، پرداخت‌ها و مشتریان در یک کاشی جمع شده‌اند، موجودی‌ها و تسویه‌ها در کاشی دیگر. همان بوم، ریتمی متفاوت، سه بخش آشکار.

ضدالگو فاصله‌ی یکنواخت در کل صفحه است. هر آیتم همان فاصله را با همه‌ی آیتم‌های دیگر دارد و کاربر باید همه‌ی برچسب‌ها را بخواند تا ساختار را پیدا کند. راه‌حل هرگز افزودن کادر بیشتر نیست.

راه‌حل باز کردن فاصله‌ی بین گروه‌ها و فشرده کردن فاصله‌ی درون آن‌هاست. فضای خالی نبودِ طراحی نیست، خودِ طراحی است. نسخه‌ی عمیق‌تر این بحث در مدخل واژه‌نامه‌ی فضای خالی آمده است.

قانون کاربرد: درون گروه، فاصله فشرده. بین گروه‌ها، فاصله باز. هرگز دو بار پشت سر هم یک مقدار یکسان نه، مگر این‌که بخواهید هر دو آیتم یکی خوانده شوند.

شباهت: شکل‌های یکسان یعنی معناهای یکسان

ظاهر تکراری نشان‌دهنده‌ی کارکرد تکراری است. اگر دو عنصر شبیه هم باشند، کاربر فرض می‌کند یک کار می‌کنند. اگر نکنند، طراحی دروغ می‌گوید.

Notion بر پایه‌ی شباهت ساخته شده است. هر بلوکِ هم‌نوع یکسان رندر می‌شود. تیترها شبیه تیتر، callout ها شبیه callout، بلوک‌های کد شبیه کد. کاربر در پنج دقیقه واژگان بصری را یاد می‌گیرد و بعد می‌تواند سندی با هزار بلوک را بدون خواندن اسکن کند.

پنل چپ Figma با همین منطق کار می‌کند. فریم‌ها شبیه فریم‌اند، کامپوننت‌ها شبیه کامپوننت، و instance ها ظاهر main خود را به ارث می‌برند اما با لفاف بنفشی که می‌گوید «این یک کپی است.» شکل قوانین را به کاربر یاد می‌دهد.

شبکه‌ی صفحه‌ی اصلی iOS در Apple نسخه‌ی مقیاس مصرفی همین است. هر آیکون برنامه همان اندازه، همان شعاع گوشه و همان فاصله‌ی شبکه را دارد. چشم «اپ‌ها» را یک دسته‌ی واحد می‌خواند و فقط وقتی قصد وارد می‌شود به انتخاب می‌رسد. شباهت را بشکنید، خوانش را شکسته‌اید. یک آیکون خارج از شبکه کل شبکه را به‌عنوان یک واحد خراب می‌کند.

نمای diff در Cursor همین منطق را در مقیاس کوچک‌تر اجرا می‌کند. خطوط اضافه‌شده همان سبزند، خطوط حذف‌شده همان قرمز، خطوط بدون تغییر همان خنثی. سه دسته، سه رفتار بصری، بدون نیاز به برچسب.

ضدالگو این است: «بیایید این یک دکمه را متفاوت کنیم تا توجه جلب شود.» این کار قرارداد شباهت را در همه‌جای دیگر می‌شکند. کاربر باید همه‌ی دکمه‌ها را دوباره بخواند تا بفهمد کدام قواعد هنوز برقرارند. اگر می‌خواهید یک اکشن را برجسته کنید، از اصل نقطه‌ی کانونی در ادامه استفاده کنید، نه نقض شباهت.

پیوستگی: چشم خط را دنبال می‌کند

چشم مسیرهای هموار را به مسیرهای قطع‌شده ترجیح می‌دهد. وقتی روی یک تراز، یک منحنی یا یک محور شروع به حرکت می‌کند، می‌خواهد ادامه دهد. طراحانی که این را رعایت می‌کنند چیدمان‌هایی می‌سازند که در یک نفس اسکن می‌شوند. طراحانی که نمی‌کنند چیدمان‌هایی تحویل می‌دهند که گیر می‌کنند.

نمای deploy در Vercel پیوستگی در محیط تولید است. پایپ‌لاین به‌صورت خطی عمودی از مراحل اجرا می‌شود و هر مرحله روی همان محور با همان تورفتگی نشسته است. چشم از کامیت build در بالا تا deploy در پایین را در یک حرکت می‌خواند، حتی روی لاگ‌های طولانی. نوشته‌ی حالت بارگذاری همان محصول است توضیح می‌دهد چرا این سطح این‌قدر زمان تماشا می‌گیرد. گاتر diff در Cursor همین کار را روی محوری کوچک‌تر انجام می‌دهد، با نشانگر تغییر که به یک خط عمودی تمیز چسبیده و چشم آن را خط به خط دنبال می‌کند.

ضدالگو شکستن تراز برای تنوع بصری است. تورفتگی‌ها را پلکانی کنید، ارتفاع خط را تغییر دهید، وسط صفحه یک عنصر وسط‌چین بیندازید، و چشم مسیر را گم می‌کند. کاربر چیدمان نمی‌خواند، دارد یک پازل را رمزگشایی می‌کند.

راه‌حل انتخاب یک محور و گذاشتن محتوا روی آن است، حتی وقتی عناصر منفرد فرق دارند. فهرست فاکتورهای Stripe، فهرست issue های Linear، ناوبری مستندات Anthropic. همه تخت، همه تراز، همه در یک نگاه خواندنی.

قانون کاربرد: وقتی تردید دارید، چیزها را هم‌تراز کنید. هم‌ترازی اجباری سریع‌تر از عدم تقارن هنرمندانه خوانده می‌شود.

بستار: مغز شکل را تمام می‌کند

شکل‌های ناقص خودکار کامل می‌شوند. دایره‌ای که ۴۰ درجه‌اش کم است هنوز دایره خوانده می‌شود. لوگویی با یک بریدگی عمدی هنوز همان برند خوانده می‌شود. مغز شکاف را پر می‌کند چون یک کل را به یک گسست ترجیح می‌دهد.

لوگومارک Anthropic نمونه‌ی کتاب درسی است. دو فرم زاویه‌دار هرگز بسته نمی‌شوند، اما چشم آن‌ها را به یک نشان واحد می‌دوزد. Loops در لوگوی حلقه‌ای خود از بستار استفاده می‌کند، جایی که خمیدگی یک مدار کامل را القا می‌کند، با این‌که شکل باز است.

Figma از بستار در انتخاب استفاده می‌کند. دستگیره‌های آبی در چهار گوشه یک مستطیل کامل را القا می‌کنند حتی وقتی فقط گوشه‌ها کشیده شده‌اند. کاربر یک فریم می‌بیند، نه چهار نقطه‌ی معلق.

بستار همچنین دلیل کار کردن هیرو سکشن‌ها بدون کادر است. یک هیرو سکشن که فقط با فاصله و یک تیتر تعریف شده باز هم یک واحد محصور خوانده می‌شود چون چشم مستطیل ضمنی را می‌بندد. همین منطق بر کارت‌های مینیمال، نقل‌قول‌های برجسته و دکمه‌های CTA شبح‌گونه حاکم است. اگر محتوا مرز را القا کند، لازم نیست کشیده شود. موفق شدن در این کار به رعایت نسبت کنتراست بستگی دارد تا مرز ضمنی هنوز خوانده شود.

ضدالگو بیش از حد کشیدن هر کانتینر است. کادرهای ضخیم، جداکننده‌های کلفت، دورخط کامل روی هر پنل. صفحه شلوغ می‌شود و هر شکل برای توجه بستار رقابت می‌کند. خطوط را کم کنید. به چشم اعتماد کنید.

شکل و زمینه: عمق بدون کادر

چشم هر صحنه را به پیش‌زمینه و پس‌زمینه تفکیک می‌کند. توجه همین‌طور کار می‌کند. هرچه عقب بفرستید تبدیل به بافتار می‌شود، هرچه جلو بیاورید تبدیل به موضوع.

الگوی مودال Apple نمونه‌ی مرجع است. پس‌زمینه تار و تیره می‌شود، مودال با سایه‌ای نرم جلو می‌آید و توجه کاربر پیش از خوانده شدن متن جابه‌جا می‌شود. لایه‌های Stripe از همین الگو پیروی می‌کنند، کمی کم‌نمایش‌تر اما با منطقی یکسان. درخشش دکمه‌ی پرداخت روی کارتی که ظریف عقب رفته سوار است. دیالوگ‌های تأیید Resend حرکت تقریباً یکسانی از شکل و زمینه دارند، که کل اپ یک پله پایین می‌رود و دیالوگ جلو می‌آید.

ضدالگو اورلی تخت بدون جابه‌جایی عمق است. مودال روی بوم هم‌ارتفاع با بقیه‌ی UI می‌نشیند و کاربر تغییر تمرکز را حس نمی‌کند. راه‌حل لایه‌بندی نشانه‌های ادراکی واقعی است که پیش‌زمینه را اعلام می‌کنند.

سایه، تاری، تیرگی، مقیاس. دست‌کم دو تا را انتخاب کنید. نوشته‌ی ضد داشبورد توضیح می‌دهد داشبوردها وقتی همه‌ی پنل‌ها در یک ارتفاع می‌نشینند چطور شکل و زمینه را از دست می‌دهند.

قانون کاربرد: اگر همه‌ی عناصر روی یک صفحه‌اند، هیچ‌چیز پیش‌زمینه نیست. آنچه مهم است را انتخاب کنید و بالا بیاورید.

سرنوشت مشترک: حرکت همان گروه‌بندی است

چیزهایی که با هم حرکت می‌کنند یک چیز خوانده می‌شوند. سه آیتم را بکشید، تماشا کنید هماهنگ جابه‌جا می‌شوند، و چشم آن‌ها را یک واحد می‌خواند حتی وقتی شکل‌هایشان فرق دارد. حرکت را متوقف کنید و وحدت می‌شکند.

چندانتخابی Figma سرنوشت مشترک در عمل است. سه لایه را بگیرید، حرکت دهید، و آن‌ها مثل یک واحد هماهنگ سفر می‌کنند. کاربر دارد یک آبجکت گروه‌شده را ویرایش می‌کند، با این‌که Figma هرگز گروه نخواسته.

کشیدن برای بازچینی در Linear همین ترفند را روی فهرست issue ها به کار می‌برد. یک issue را بردارید، ردیف‌های اطراف هماهنگ جابه‌جا می‌شوند و جای جدید بدیهی خوانده می‌شود. کشیدن بلوک در Notion هم همین است، که بلوک‌های اطراف هماهنگ از هم دور می‌شوند تا جا باز شود.

سوی دیگر سرنوشت مشترک حذف است. سه آیتم را با یک سرعت و جهت از صفحه خارج کنید و کاربر آن‌ها را به‌عنوان حذف گروهی می‌خواند. با سرعت‌های متفاوت انیمیت کنید و کاربر می‌پرسد نکند بعضی شکست خورده‌اند. فلوهای آنبوردینگ از این قرض می‌گیرند: اسلایدها با یک بردار حرکت واحد جلو می‌روند و کاربر سفر را یک مسیر می‌خواند. تحلیل عمیق‌تر حرکت به‌عنوان ساختار در آنبوردینگ بدون آنبوردینگ آمده است.

ضدالگو حرکت ناهمگام روی آیتم‌های منطقاً گروه‌شده است. سه کارت که همگی به یک انتخاب تعلق دارند اما با زمان‌بندی‌های متفاوت، easing متفاوت و بردارهای کمی متفاوت انیمیت می‌شوند. کاربر آن‌ها را جدا می‌خواند با این‌که داده می‌گوید یکی‌اند. حرکت را قفل کنید. گروه همان‌جا خوانده می‌شود که گروه عمل می‌کند.

تقارن و نظم: تعادل حل‌شده حس می‌شود

چیدمان‌های متقارن پیش از تمام شدن بارگذاری تمام‌شده حس می‌شوند. مغز نظم را شایستگی می‌خواند. چیدمان‌های نامتقارن می‌توانند قدرتمند باشند، اما مالیات ادراکی بر کاربر تحمیل می‌کنند که باید با ابزارهای دیگر حقش را کسب کرد.

صفحه‌ی قیمت‌گذاری Stripe نمونه‌ی کتاب درسی است. سه ستون، ساختار کارت یکسان، ریتم عمودی کاملاً هم‌تراز، و پلن وسط کمی بالاتر برای نشان دادن توصیه. کاربر پیش از خواندن قیمت‌ها می‌خواند «این یک تیم محصول واقعی است.»

شبکه‌های محصول Apple در سایت بازاریابی همین کار را می‌کنند. پنل‌های داشبورد Vercel روی یک شبکه‌ی سخت‌گیرانه اجرا می‌شوند که حتی وقتی پنل‌ها دوباره جاری می‌شوند حفظ می‌شود. ترکیب‌بندی ثبات را اعلام می‌کند. تحلیل عمیق‌تر این نوع ساختار قیمت‌گذاری در مشکل صفحه‌ی قیمت‌گذاری و بررسی گسترده‌تر استک سایت بازاریابی 2026 آمده است.

ضدالگو «بیایید خلاق به نظر برسد» است. کارت‌هایی با عرض نامنظم، ستون‌هایی که تراز نیستند، ردیف‌هایی با ارتفاع متغیر بدون دلیل کارکردی. کاربر آشوب می‌خواند.

جایی برای طراحی نامتقارن هست، اما آن یک انتخاب ترکیب‌بندی آگاهانه است که به نقطه‌ی کانونی قوی و سلسله‌مراتب روشن نیاز دارد. پیش‌فرضِ یک داشبورد SaaS نیست. هر داشبوردی که شبکه را بشکند هزینه‌اش را در زمان اسکن می‌پردازد.

قانون کاربرد: متقارن شروع کنید، عمداً بشکنید. هرگز به این دلیل نشکنید که صفحه کسل‌کننده به نظر می‌رسید.

نقطه‌ی کانونی: یک شکست صفحه را می‌برد

چشم تمام توجهش را به تک عنصری می‌دهد که الگو را می‌شکند. به همین دلیل است که یک دکمه‌ی اصلی مرجانی در صفحه‌ای از اکشن‌های ثانویه‌ی خاکستریِ کم‌رنگ برنده می‌شود. و به همین دلیل است که صفحه‌ای با پنج اکشن «اصلی» صفر اکشن اصلی دارد.

پالت فرمان Linear یک کلینیک نقطه‌ی کانونی است. بقیه‌ی UI کم‌نور می‌شود و عقب می‌رود، پالت به‌عنوان یک سطح پرکنتراست جلو می‌آید و دقیقاً یک اکشن پیش‌فرض هایلایت شده است. کاربر بدون فکر می‌داند کجا نگاه کند.

دکمه‌ی پرداخت Stripe نسخه‌ی تجارت الکترونیک است. دکمه الگو را با رنگ برند، حرکت ملایم و مقیاس کمی بزرگ‌تر می‌شکند. لندینگ‌های Anthropic روی یک CTA مرجانی در برابر صفحه‌ای خنثی لنگر می‌اندازند و چشم پیش از تمام شدن تیتر روی آن می‌نشیند. دکمه‌ی «Apply» در پیشنهادهای AI در Cursor همین منطق را دارد.

ضدالگو صفحه‌ای با سه دکمه‌ی «اصلی» و دریایی از آیتم‌های ناوبری هم‌وزن است. هر نقطه‌ی کانونی دیگری را خنثی می‌کند. چشم کاربر می‌ایستد چون هیچ‌چیز آن‌قدر محکم الگو را نمی‌شکند که ببرد.

راه‌حل تنزل بی‌رحمانه است. یک اصلی انتخاب کنید و همه‌ی بقیه را به رفتار ثانویه یا ثالثیه تنزل دهید. صفحه با اینکه وزن کم کرده‌اید پرصداتر حس می‌شود، چون آن یک چیزِ باقی‌مانده حالا واقعاً چشم را می‌کشد. تحلیل عمیق‌تر در سلسله‌مراتب بصری در طراحی و در شیوه‌ی تفکیک تورم نقطه‌ی کانونی در کل صنعت توسط چرا هر SaaS در 2026 شبیه هم است آمده است.

اصل گشتالت در برابر الگوی UI

سریع‌ترین مرجع. یک ردیف برای هر اصل، یک قانون، یک نمونه‌ی مدرن، یک محصول. این ردیف را برای تمام عمر ذخیره کنید.

اگر فقط یک دارایی ذخیره‌شده را درونی می‌کنید، این یکی را درونی کنید. هر طراح حرفه‌ای باید بتواند این ردیف را پیش از اولین بازبینی طراحی از حفظ بخواند.

چگونه یک صفحه را از نظر گشتالت ممیزی کنیم

یک صفحه را پیش از انتشار از این هشت پرسش عبور دهید. اگر هر پاسخی «نه» باشد، صفحه ادراک را نشت می‌دهد، حتی اگر در ظاهر خوب به نظر برسد.

1. مجاورت. آیا آیتم‌های مرتبط به هم نزدیک‌تر از آیتم‌های نامرتبط‌اند؟ اگر فاصله در کل صفحه یکنواخت است، گروه‌بندی مجاورت رخ نمی‌دهد.

2. شباهت. آیا آیتم‌هایی با کارکرد یکسان ظاهر بصری مشترک دارند؟ اگر دو دکمه یک کار می‌کنند اما متفاوت به نظر می‌رسند، شباهت شکسته است.

3. پیوستگی. آیا چشم مسیر روشنی از بالا به پایین یا چپ به راست دارد؟ اگر چیدمان بی‌دلیل زیگزاگ می‌رود، پیوستگی شکسته است.

4. بستار. آیا کانتینرها با سبک‌ترین رفتاری که هنوز خوانده می‌شود کشیده شده‌اند؟ اگر هر پنل کادر ضخیم دارد، بستار بیش از حد کشیده شده است.

5. شکل و زمینه. آیا صفحه پیش‌زمینه‌ی روشنی دارد؟ اگر همه‌ی عناصر در یک ارتفاع‌اند، توجه جایی برای نشستن ندارد.

6. سرنوشت مشترک. آیا انیمیشن‌های آیتم‌های گروه‌شده هماهنگ حرکت می‌کنند؟ اگر اجزای چندانتخابی با زمان‌بندی‌های متفاوت می‌لغزند، گروه شکسته خوانده می‌شود.

7. تقارن و نظم. آیا چیدمان در نگاه اول حل‌شده حس می‌شود؟ اگر چشم باید برای یافتن ساختار کار کند، شبکه با کاربر می‌جنگد.

8. نقطه‌ی کانونی. آیا دقیقاً یک اکشن اصلی وجود دارد؟ اگر دو یا بیشتر است، نقطه‌ی کانونی خنثی شده است.

این را روی هر صفحه‌ای، در هر محصولی، در هر وضعیتی اجرا کنید. صفحه‌هایی که قبول می‌شوند آرام حس می‌شوند. صفحه‌هایی که رد می‌شوند شلوغ حس می‌شوند، حتی وقتی تراکم بصری یکسان است. این ممیزی را با انضباط مشکل صفحه‌ی تنظیمات ترکیب کنید و بدترین متخلفان را سریع پیدا می‌کنید. آموزه‌ی انجام بیشتر با کمتر، از جمله موردی که در به سیستم طراحی نیاز ندارید آمده، به‌طور طبیعی با این ممیزی جفت می‌شود.

اصول ترکیب می‌شوند، هرگز رقابت نمی‌کنند

یک صفحه‌ی عالی هر هشت را هم‌زمان اجرا می‌کند. مجاورت سازمان می‌دهد، شباهت تأیید می‌کند، پیوستگی راهنمایی می‌کند، بستار پاک می‌کند، شکل و زمینه اولویت می‌دهد، سرنوشت مشترک حرکت می‌دهد، تقارن تثبیت می‌کند، نقطه‌ی کانونی تصمیم می‌گیرد. هیچ‌کدام تنها کار نمی‌کنند. هیچ‌کدام با دیگری نمی‌جنگند اگر ترتیب را رعایت کنید.

اپ Linear یک مسترکلاس زنده است. سایدبار با مجاورت گروه‌بندی می‌کند، issue ها با شباهت تکرار می‌شوند، فهرست با پیوستگی اسکرول می‌شود، کارت‌ها با کادرهای سبک بسته می‌شوند، مودال با شکل و زمینه بالا می‌آید، کشیدن از سرنوشت مشترک استفاده می‌کند، شبکه با تقارن می‌ماند، پالت cmd-K با نقطه‌ی کانونی می‌برد. کل محصول اطاعت از گشتالت است که در یک تب فشرده شده.

Stripe همان درس در مقیاسی دیگر است. Vercel، Figma، Notion، Apple، Anthropic، Cursor، Loops، Resend. هیچ‌کدام قانون ادراک تازه‌ای اختراع نکردند. آن‌ها از قوانین موجود سخت‌تر از رقبایشان پیروی کردند.

این کل خندق کیفیت طراحی است. رازی در کار نیست. فقط تسلط بر کانن ادراک است و صبر برای به کار بستنش در هر صفحه، هر فلو، هر وضعیت. بافتار عمیق‌تر افشای تدریجی همین نقش را درون فلوهای مشخص بازی می‌کند.

سوالات متداول

هشت اصل گشتالت برای طراحان چیست؟

مجاورت، شباهت، پیوستگی، بستار، شکل و زمینه، سرنوشت مشترک، تقارن و نظم، و نقطه‌ی کانونی. هر کدام یک قانون ادراکی است که سیستم بینایی انسان خودکار اجرا می‌کند. طراحانی که به آن‌ها احترام می‌گذارند رابط‌هایی می‌سازند که خودشان را می‌خوانند. طراحانی که نمی‌گذارند رابط‌هایی تحویل می‌دهند که شلوغ حس می‌شوند.

کدام اصل گشتالت در طراحی UI مهم‌تر است؟

مجاورت، با اختلاف زیاد. فاصله سیگنال گروه‌بندی بیشتری از هر رفتار دیگری حمل می‌کند، از جمله کادر، رنگ و برچسب. اگر فقط وقت داشتید یک اصل را روی یک صفحه درست کنید، فاصله‌ها را درست کنید.

گشتالت چه فرقی با سلسله‌مراتب بصری دارد؟

سلسله‌مراتب بصری استراتژی است. گشتالت فیزیک ادراک در زیر آن است. سلسله‌مراتب می‌گوید «کاربر باید اول اینجا را ببیند.» گشتالت توضیح می‌دهد چرا چشم او واقعاً به آنجا می‌رود. بدون پیروی از گشتالت نمی‌توانید سلسله‌مراتب بسازید، و پیروی از گشتالت بدون برنامه‌ی سلسله‌مراتب صفحه‌هایی آرام اما بی‌جهت می‌سازد.

آیا اصول گشتالت برای رابط‌های AI-native مرتبط‌اند؟

بیشتر مرتبط‌اند، نه کمتر. رابط‌های AI-native محتوای پویاتر، خروجی استریم‌شده‌ی بیشتر و چیدمان‌های نامطمئن‌تری نسبت به اپ‌های سنتی دارند. گشتالت مجموعه‌قوانینی است که این سطوح پویا را خواندنی نگه می‌دارد. سرنوشت مشترک، شباهت و نقطه‌ی کانونی وقتی محتوا به‌صورت بلادرنگ تغییر می‌کند بیشترین بار را به دوش می‌کشند.

چطور گشتالت را به یک تیم طراحی آموزش دهم؟

یک صفحه را با هم ممیزی کنید. یک سطح واقعی انتخاب کنید، هر هشت پرسش را روی آن اجرا کنید و تماشا کنید تیم شکست‌هایی را ببیند که پیش‌تر نمی‌توانست نامشان ببرد. گشتالت به‌صورت انتزاعی آموخته نمی‌شود. با پیدا کردن تخلف‌ها در محصولات واقعی آموخته می‌شود تا وقتی که چشم خودکار شروع به گرفتن‌شان کند.

CTA

محصولی می‌خواهید که هر صفحه‌اش پیش از آن‌که کاربر متن را بخواند خودش را بخواند؟ Brainy رابط‌هایی طراحی می‌کند که ادراک در استخوان‌بندی‌شان نهفته است، نه این‌که در پایان رویشان نقاشی شده باشد. ما در هر فلو، هر وضعیت و هر جزئیات از کانن پیروی می‌کنیم. Brainy را استخدام کنید و همان وضوحی را تحویل بگیرید که Linear، Stripe و Anthropic به‌طور پیش‌فرض تحویل می‌دهند.